因工作需要,做一个统计列表,要实现表头固定,可以通过点击表头进行排序,还有内容导出;
本来是考虑用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 [];
}
}
}
});