datatables ajax后端请求那些坑

在对datatables做后端数据填充的时候，遇到一个，翻页问题。在多次操作翻页后，总是提示加载中。反了很多博客没有找到原因。

经过测试，发现原来自己坑了自己。

代码如下：

datatables : {

            init : function (table_id,ajax_url,columns,buttons,searchParams) {

                if(null == columns || undefined == columns){

                    columns = [];

                }

                if(null == buttons || undefined == buttons){

                    buttons = [];

                }

                var $t_table = $("#" + table_id);

                var $api_table = $t_table.dataTable({

                    language: {

                        "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": ": 以降序排列此列"

                        }

                    },

                    ajax : {

                        url:ajax_url,

                        data:function (d) {

                            if(undefined != searchParams && null != searchParams )

                                $.each(searchParams,function (i,val) {

                                    d[i] = val;

                                });

                        }

                    },

                    processing: true,

                    serverSide: true,

                    dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

                    columns : columns,

                    buttons: buttons

                }).api();

                return $api_table;

            }

        }

 var columns = [

        {data:'itemName'},

        {data:'itemIcon',

         render:function (data, type, row, meta) {

                return '<img src="'+row.itemIcon+'" width="25" height="25"/>';

            }

        },

        {data:'id'},

        {data:'extNeedAmount'},

        {

            data:'id',

            render:function (data, type, row, meta) {

                return '<a class="btn-edit">操作</a>';

            }

        }

    ];

    var buttons = [

        {

            text: '添加',

            className: 'btn green ',

            action: function ( e, dt, node, config ) {

                 $("#addLevelModel").modal("show");

            }

        }

    ];

    var table = Q.datatables.init('level_table','/admin/basic/level/loaddata',columns,buttons);

后端代码

    /**

     * 加载表格内容

     * @return type

     */

    public function loadDataAction()

    {

        $column_name = $this->request->get('columns')[$this->request->get('order')[0]['column']]['data'];

        $column_order = $this->request->get('order')[0]['dir'];

        $search_value = $this->request->get('search')['value'];

        $params = array(

            'order'=>$column_name.' '.$column_order,

            'conditions'=>'itemType = '.$this->mItemType.' and ( itemName LIKE "%'.$search_value.'%" )'

        );

        $recordsTotal = SysItem::count(array( 'conditions'=>'itemType = '.$this->mItemType));

        $recordsFiltered = SysItem::count($params);

        $params['limit'] = array('number' => intval($this->request->get('length')), 'offset' => intval($this->request->get('start')));

        $data = SysItem::find($params)->toArray();

        $result = array(

            'draw'=>intval($this->request->get('draw')),

            'recordsTotal'=>$recordsTotal,

            'recordsFiltered'=>$recordsFiltered,

            'data'=>$data

        );

        return $this->response->setJsonContent($result);

    }

特别注意的地方：

'draw'=>intval($this->request->get('draw'))
draw要原样返回，不然会出现一直加载中，本来我用start做返回的，就 只能前翻，后翻页就出现问题。
前端只要不需要做翻页函数处理，回调部分，我也默认了。datatables非常强大，各种排序过滤功能，这里我没有做代码展示。后面的学习中，再继续追加到这里。

巴特西

datatables ajax后端请求那些坑

最新文章

热门文章