• 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,'10%',"orderable":false},
                          {"data": "organName","targets": 1,"render": function(data, type, row) {
                                var html = "<a href='${ctp}/rest/member/openTabListMemberPage?moId=" + row['moId'] + "&organName=" + data + "&pos=p1' target='_black'>"+data+"</a>";
                                return html;
                          },'10%',"orderable":false},
                          {"data": "officialName","targets": 2,'10%',"orderable":false}
                      ]
    
            } );
            $("div.toolbar").html('<b style="color:red">自定义文字、图片等等</b>');
        }
  • 相关阅读:
    敲七
    二维指针数组**p
    食物链(待解决)
    蛇行矩阵
    快速排序 QuickSort
    堆排序
    猪的安家
    百度语言翻译机
    HTML <base> 标签
    免费网络管理流量监控软件大比拼
  • 原文地址:https://www.cnblogs.com/Kevin-1992/p/12608427.html
Copyright © 2020-2023  润新知