云迈博客

您现在的位置是:首页 > 灌水专栏 > 正文

灌水专栏

jquery.dataTables 表格分页

zero2020-08-27灌水专栏347
表格编号用户时间javascript

表格

            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="60">编号</th>
                    <th width="60">用户</th>
                    <th width="60">时间</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

javascript

        $(function(){
            $('.table-sort').dataTable({
                serverSide: true,
                paging: true,  // 开启分页
                pageLength: "10", // 每页显示条数
                ajax: function (data, callback, settings) {
                    //封装请求参数
                    var param = {};
                    param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.page = (data.start / data.length)+1;//当前页码
                    param.order = data.order[0]
                    param.search = data.search.value; // 如果开启搜索框为搜索框值
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "<{:U('')}>",
                        cache: false,  //禁用缓存
                        data: param,  //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            //封装返回数据
                            var returnData = {};
                            returnData.draw = data.limit;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;//返回数据全部记录
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
                            returnData.data = result.data;//返回的数据列表
                            //console.log(returnData);
                            //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }
                    });
                },                
                "columns": [  // 行数必须和表格一致
                    {'data': 'id'},
                    {'data': 'realname'},                    
                    {'data': 'create_time', 'render': function(data, type, row, meta){
                        // 重新渲染数据
                        return new Date(parseInt(data) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
                    }},
                ]
            }).api();
        });

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~