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非常强大，各种排序过滤功能，这里我没有做代码展示。后面的学习中，再继续追加到这里。