datatable 每页显示多少条 放到表格下面

官方的每页显示多少条 放在表格上面 很丑

添加属性 使其放在表格下面,如下图

添加的属性是:

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"
	}]
}

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值