官方的每页显示多少条 放在表格上面 很丑
添加属性 使其放在表格下面,如下图
添加的属性是:
bLengthChange:true,//每页多少条框体
dom: '<t><lfip>'//控制显示的位置,详细释义参考http://www.datatables.club/reference/option/dom.html
完整代码:
var dataTable=$('.dataTable').DataTable({
language: {
"sProcessing": "处理中...",
"buttons.copy": "复制",
"buttons.print": "打印",
"sLengthMenu": "显示 _MENU_ 项结果。",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"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:true,//每页多少条框体
pagingType:"full_numbers",//分页样式
searchable:false,//搜索总开关
searching:false,
ordering:true,//排序总开关
dom: '<t><lfip>',
columnDefs: [
{
"title": "日期",
"name": "create_date",
"data": "create_date",
"targets": [0],
"orderable": true,
"orderData": [0]
},
{
"title": "新增用户",
"name": "new_user_count",
"data": "new_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 + "条记录";
}
});
其中data数据为
{
"result": 1,
"message": "成功",
"data": [{
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-01"
}, {
"new_user_count": 6790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-06"
}, {
"new_user_count": 3790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-07"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-15"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-16"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-17"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-18"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-19"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-20"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-21"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-22"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-23"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-24"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-25"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-26"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-27"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-28"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-29"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-06-30"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-01"
}, {
"new_user_count": 6790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-06"
}, {
"new_user_count": 3790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-07"
}, {
"new_user_count": 1790,
"active_user_count": 6777,
"total_user_count": 103306,
"create_date": "2019-07-14"
}]
}