zoukankan      html  css  js  c++  java
  • 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>');
        }
  • 相关阅读:
    linux查看日志文件内容命令tail、cat、tac、head、echo
    改变自己的128种方法,教你变得更优秀!
    php 23种设计模式
    Swoole消息推送
    PHP 出现 502 解决方案
    【centos7】添加开机启动服务/脚本
    curl 参数配置详解
    i系列标准-互联网周刊
    MySQL 设计与开发规范2
    Cocos Creator webviw网页置顶增加返回键的方法
  • 原文地址:https://www.cnblogs.com/Kevin-1992/p/12608427.html
Copyright © 2011-2022 走看看