因工作需要,做一個統計列表,要實現表頭固定,可以通過點擊表頭進行排序,還有內容導出;
本來是考慮用layui 的table,但是系統裏用了require.js ,在用layui感覺有點重複,所以採用了datatables。
主要優點:功能強大,可選擇擴展功能也算全面了。
基本用法:
$("#table").dataTable({
"searching": false,//不要搜索框
"paging": false, //不要分頁
"scrollX": 500,//固定寬度,水平滾動
"scrollY": 380,//固定高度 ,垂直滾動
"serverSide": false,//不開啓服務器模式
"processing":true,
"autoWidth": true, //隨內容自動計算列寬
"columns": [
{
title: "序號",
render: function (data, type, row, meta) {
return meta.row + 1 + meta.settings._iDisplayStart
}, width: "50", "orderable": false //禁止排序
},
{title: "項目名稱", "data": "name"},
{
title: "項目編碼", "data": "code", render: function (data, type, row, meta) {
// row 行數據
if (data) return data;
else return "";
}
},
],
fixedColumns: {
leftColumns: 2 // 固定左邊兩列
},
buttons:[ {extend: 'excel',
className: 'btn-export',
text: '導出',
filename: '項目彙總表',
title: '項目彙總表'} ],
language: {
"info": "總記錄數爲_TOTAL_條",
"loadingRecords": "請等待,數據正在加載中......",
"emptyTable": "暫無查到相關記錄"
},
ajax: {
url:'project/getList.do',
"dataSrc": function ( json ) {
if(json.code==200){
return json.data;
}else{
return [];
}
}
}
});