Datatables后端分页

通过以下的js代码,在action或者controller中接受参数主要是起始页和页大小,然后进行后端分页代码就可以了。

JS dataTables初始化函数如下:

//列表初始化
    function initDatatable(){
        $('#example').dataTable( {
            "language": {
                "url" : "${ctp}/jqueryplugin/datatables/js/Chinese.json"
            },
            ajax:function(data, callback, settings){
                var param = {}; 
                //其他的参数     
                param.xxxx= xxxx;

                //组装分页参数
                param.startIndex = data.start;//起始页号
                param.pageSize = data.length;//页长度

                var params = JSON.stringify(param);
                var paramObj = new Object();
                paramObj['mo']=params;

                $.ajax({
                    type: "POST",
                    url: "${ctp}/rest/xxxx/xxxx.vhtml",
                    cache : false,  //禁用缓存
                    data: paramObj,    //传入已封装的参数
                    dataType: "json",
                    success: function(result) {
                        //setTimeout仅为测试延迟效果
                        setTimeout(function(){
                            //异常判断与处理
                            if (result.errorCode) {
                                //$.dialog.alert("查询失败。错误码:"+result.errorCode);
                                return;
                            }

                            //封装返回数据,这里仅演示了修改属性名
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
                            returnData.data = result.data;

                            callback(returnData);
                        },200);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //$.dialog.alert("查询失败");
                        //$wrapper.spinModal(false);
                    }
                 });
            },
            //"destroy":true,
            //"dom": '<"toolbar">frtip',
            "serverSide":true,
            processing:true,//载入数据的时候是否显示“载入中”
            //"data": data,
            //"dom": 'rt<"bottom"iflp<"clear">>',   
            "paging": true,
            "searching":false,//去掉搜索框
            "destroy":true,
            //"pagingType":"first_last_numbers",
            columns: [
                      {"data": "moId","targets": 0,width:'10%',"orderable":false},
                      {"data": "organName","targets": 1,"render": function(data, type, row) {
                            var html = "] + "&organName=" + data + "&pos=p1' target='_black'>"+data+"";
                            return html;
                      },width:'10%',"orderable":false},
                      {"data": "officialName","targets": 2,width:'10%',"orderable":false}
                  ]

        } );
        $("div.toolbar").html('自定义文字、图片等等');
    }

你可能感兴趣的:(前端尝试)