使用以下.js文件。
使用以下.css文件。
以下是表格布局:
<table class="table table-responsive table-bordered table-striped table-hover" id="tbl-cat-lvl-two" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Code</th>
<th>Icon</th>
<th>Category Label</th>
<th>Precedence</th>
<th>Visibility</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
这是表脚本:
catLvl2table = $('#tbl-cat-lvl-two').DataTable( {
"processing" : true,
"serverSide" : true,
"order" : [[ 4, "asc" ]],
"responsive" : true,
"scrollY" : "236px",
"scrollCollapse": true,
"ajax" : {
"url" : baseUrl+getCatLvl2DataUrl+lvl1CatId,
"type" : "POST"
},
"columnDefs" : [
{ "visible" : false, "targets": [0] },
{ "orderable" : false, "targets": [0, 2, 5, 6] },
{
className: "align-center check-align-center",
"targets": [6],
"render" : function (data, type, full, meta){
let id = full.id;
return `<button href="" class="btn btn-sm btn-info dt-btn-view" data-id="${id}"><i class="fa fa-eye"></i></button><button href="" class="btn btn-sm btn-primary dt-btn-edit" data-id="${id}"><i class="glyphicon glyphicon-pencil"></i></button><button href="" class="btn btn-sm btn-danger dt-btn-del" data-id="${id}"><i class="glyphicon glyphicon-trash"></i></button>`;
}
}
],
"columns": [
{ "data": "id" },
{ "data": "code" },
{ "data": "icon" },
{ "data": "category" },
{ "data": "precedence" },
{ "data": "visibility" },
],
});