jQuery DataTable 列居中是一個常見的需求,經常用于表格中的標題或者數值,使其更具有美感和可讀性。下面我們將介紹如何通過jQuery DataTable來實現列居中顯示。
首先,我們需要在表格初始化時對每一列進行樣式設置。在該樣式中,我們將居中對齊標題和數據。
$(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "targets": 'text-center', //使用text-center類名匹配需要居中的列數 "className": 'text-center', "render": function ( data, type, full, meta ) { return data; }, } ] } ); } );在上面的代碼中,我們使用了columnDefs屬性,用于設置列的格式。在該屬性中,我們將targets屬性設置為text-center,該屬性用于直接指定需要居中列的列數。接下來的className屬性用于指定數據列風格,其值為text-center,指定了該列中的內容應該在水平方向上居中。 最后,我們在render函數中返回data,并通過return語句返回輸出該數據。注意,render函數是每次在表格被插入新行前對數據進行處理的函數。 通過上述的代碼設置,我們可以實現將指定的數據列居中顯示。如果您想對其它列進行設置,只需將targets屬性設置為對應的列數即可。記得在CSS中定義對應的類名,以便正確地應用居中樣式。