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非常強大，各種排序過濾功能，這里我沒有做代碼展示。后面的學習中，再繼續追加到這里。