html
<table class="table table-striped table-bordered table-hover text-center dataTable">
<thead>
<tr>
<th data-field="create_date" class="text-center">日期</th>
<th data-field="new_user_count" class="text-center">新增用户</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
js
var dataTable=$('.dataTable').DataTable({
language: {
"sProcessing": "处理中...",
"buttons.copy": "复制",
"buttons.print": "打印",
"sLengthMenu": "显示 _MENU_ 项结果。",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
serverSide: false,//分页,取数据等等的都放到服务端去
processing: false,//载入数据的时候是否显示“载入中”
order:[[0,"asc"]],
autoWidth:false,//自动宽度
pageLength: 10,
responsive: true,
serverSide: false,//服务器模式,使用ajax必须开启
bPaginate: true,//分页总开关
bLengthChange:false,//去掉每页多少条框体
pagingType:"full_numbers",//分页样式
searchable:false,//搜索总开关
searching:false,//去除搜索框
ordering:true,//排序总开关
columnDefs: [
{
"title": "日期",
"name": "create_date",
"data": "create_date",
"targets": [0],
"orderable": true,
"orderData": [0]
},
{
"title": "活跃用户",
"name": "active_user_count",
"data": "active_user_count",
"targets": [1],
"orderable": true,
"orderData": [1]
}
],
destroy:true,
data: data,
infoCallback: function(settings,start,end,max,total,pre) {
var api = this.api();
var pageInfo = api.page.info();
return "共"+pageInfo.pages +"页,当前显示"+ start + "到" + end + "条记录" + ",共有"+ total + "条记录";
}
});
js中的data数据
{
"result": 1,
"message": "成功",
"data": [{
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-08"
}, {
"new_user_count": 3790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-09"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-14"
}]
}
显示效果