dataTablas Ajax分页 ThinkPHP

来源:互联网 发布:淘宝海尔官方旗舰店 编辑:程序博客网 时间:2024/05/29 03:08

前端代码,php的有空再整理完发出来

研究了2天弄出来,苦逼

<div class="row">    <div class="col-xs-12">        <div class="table-responsive">            <table id="sample-table-2" class="table table-striped table-bordered table-hover">                <label>                    <input type="text" class="form-control fuzzy-search" placeholder="搜索">                </label>                <button type="submit" class="dataTable-sub">搜索</button>                <thead>                    <tr>                        <th class="center">                            <label>                                <input type="checkbox" class="ace" />                                <span class="lbl"></span>                            </label>                        </th>                        <th>路由</th>                        <th>在线人数</th>                        <th>订单</th>                    </tr>                </thead>                <tbody>                </tbody>            </table>        </div>    </div></div><script type="text/javascript">    $(function () {        //提示信息        var lang = {            "sProcessing": "搜索中...",            "sLengthMenu": "每页 _MENU_ 项",            "sZeroRecords": "没有匹配结果",            "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",            "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",            "sInfoPostFix": "",            "sSearch": "搜索:",            "sUrl": "",            "sEmptyTable": "没有数据",            "sLoadingRecords": "载入中...",            "sInfoThousands": ",",            "oPaginate": {                "sFirst": "首页",                "sPrevious": "上页",                "sNext": "下页",                "sLast": "末页",                "sJump": "跳转"            },            "oAria": {                "sSortAscending": ": 以升序排列此列",                "sSortDescending": ": 以降序排列此列"            }        };        //初始化表格        var table = $("#sample-table-2").dataTable({            language:lang,  //提示信息            autoWidth: false,  //禁用自动调整列宽            //stripeClasses: ["odd", "even"],  //为奇偶行加上样式,兼容不支持CSS伪类的场合            processing: true,  //隐藏加载提示,自行处理            serverSide: true,  //启用服务器端分页            searching: false,  //禁用原生搜索            orderMulti: false,  //启用多列排序            //order: [],  //取消默认排序查询,否则复选框一列会出现小箭头            renderer: "bootstrap",  //渲染样式:Bootstrap和jquery-ui            pagingType: "simple_numbers",  //分页样式:simple,simple_numbers,full,full_numbers            columnDefs: [            { "orderable": false, "targets": [ 0,3] }            ],            order: [            [ 2, 'desc' ]            ],            //option显示数量            "aLengthMenu": [[20, 50, 100, 500, -1], [20, 50, 100, 500, "所有"]],            "iDisplayLength": 20,   //默认显示20条            /*columnDefs: [{                "targets": 'nosort',  //列的样式名                "orderable": false    //包含上样式名‘nosort’的禁止排序            }],*/            ajax: function (data, callback, settings) {                //封装请求参数                var param = userManage.getQueryCondition(data);                /*param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候                param.start = data.start;//开始的记录序号                param.page = (data.start / data.length)+1;//当前页码*/                console.log(param);                //ajax请求数据                $.ajax({                    type: "GET",                    url: "{:U('ApMain/getData')}",                    cache: false,  //禁用缓存                    data: param,  //传入组装的参数                    dataType: "json",                    success: function (result) {                        console.log(result);                        //setTimeout仅为测试延迟效果                        setTimeout(function () {                            //封装返回数据                            var returnData = {};                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回                            returnData.recordsTotal = result.total;//返回数据全部记录                            returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果                            returnData.data = result.data;//返回的数据列表                            console.log(returnData);                            //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染                            //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕                            callback(returnData);                        }, 200);                    }                });            },            //列表表头字段            columns: [{                 "data": "id" ,                render: function(data, type, full){                    return "<label><input type='checkbox' class='ace' box='checkbox' value='"+full.id+"' /><span class='lbl'></span></label>";                }            },{                 "data": "gw_id",                render: function(data, type, full){                    var str = "{:U('ApMain/detail', array('id'=>'full_id'))}";                    var url = str.replace('full_id', full.id);                    var gw = full.gw_id;                    if(full.comment) {                        return "<a href="+url+">"+gw.substr(-6, 6)+"("+full.comment+")</a>";                    } else{                        return "<a href="+url+">"+gw.substr(-6, 6)+"</a>";                    }                }             },            { "data": "onuser" },            { "data": "gw_id" ,                render: function(data, type, full){                    var str,url,full_gw;                    str = "{:U('控制器/模板', array('gw'=>'full_gw'))}";                    url = str.replace('full_gw', full.gw_id);                    return "<a href="+url+">查看</a>";                }            }            ]        }).api();        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象        //点击搜索        $('.dataTable-sub').click(function(){              table.draw();        });          $('table th input:checkbox').on('click' , function(){            var that = this;            $(this).closest('table').find('tr > td:first-child input:checkbox')            .each(function(){                this.checked = that.checked;                $(this).closest('tr').toggleClass('selected');            });        });    });    //参数处理    var userManage = {        currentItem : null,        getQueryCondition : function(data) {            var param = {};            //组装排序参数            if (data.order&&data.order.length&&data.order[0]) {                switch (data.order[0].column) {                    case 1:                    param.order = "comment";                    break;                    case 2:                    param.order = "onuser";                    break;                    default:                    param.order = "onuser";                    break;                }                param.sort = data.order[0].dir;            }            //查询参数            param.fuzzy = $(".fuzzy-search").val();            //组装分页参数            param.start = data.start;            param.length = data.length;            return param;        }    }</script>



0 0