jQuery Datatable是一種非常流行的數(shù)據(jù)表格插件,使用它可以快速的展示數(shù)據(jù),提升用戶體驗(yàn)。在實(shí)際開發(fā)中,我們經(jīng)常需要設(shè)置數(shù)據(jù)表格的內(nèi)容居中來美化頁面。下面我們來介紹一下這個(gè)如何實(shí)現(xiàn)。
首先,我們需要在datatable初始化的時(shí)候設(shè)置表格內(nèi)容居中。我們可以使用它提供的columnDefs配置項(xiàng)來針對(duì)每一列進(jìn)行設(shè)置。
$(document).ready(function() {
$('#example').DataTable( {
"columnDefs": [
{ "className": "dt-center", "targets": "_all" }
]
} );
} );
上述代碼意思是將每一列的類名都設(shè)置為"dt-center",然后在CSS樣式中定義該類名稱的樣式。
.dt-center {
text-align: center;
}
這樣,我們就可以實(shí)現(xiàn)table中內(nèi)容的居中對(duì)齊了。
除了在datatable初始化時(shí)設(shè)置,我們還可以通過動(dòng)態(tài)添加或刪除CSS類來實(shí)現(xiàn)內(nèi)容對(duì)齊方式的變化。例如:
$("#example").addClass('dt-center');
這個(gè)代碼就可以在已有的表格中添加一個(gè)'class=dt-center'的類名,達(dá)到居中對(duì)齊的效果。
以上就是如何使用jQuery Datatable設(shè)置數(shù)據(jù)表格中內(nèi)容的居中對(duì)齊的方法。希望對(duì)大家有所幫助。