js_datatable表格当加载海量数据的时候为了减轻渲染压力通过后台分也的时候,前端的写法。

$('#datatable1').DataTable({
                                "serverSide": true,//后台分页必须开启的参数,否者无法后台分页
                                "bDestroy" : true,
                                "retrieve": true,//保证只有一个table实例
                                "bPaginate": true,
                                "sPaginationType": 'full_numbers',
                                
                                "language": {
                                    "sInfoEmpty": "没有数据",
                                    "sZeroRecords": "没有检索到数据",
                                    "lengthMenu": "显示 _MENU_ 每页记录",
                                    "sLoadingRecords": "正在载入...",
                                    "sProcessing": "正在载入...",
                                    "search":         "查询:",
                                    "info": "显示 _PAGE_ 页,共 _PAGES_页",
                                    "sInfoFiltered": "(从 _MAX_ 条记录中检索)",
                                    "sInfoPostFix": "",
                                    "sDecimal": "",
                                    "sThousands": ",",
                                    "sSearchPlaceholder": "",
                                    "sUrl": "",
                                    "sZeroRecords": "没有相关记录",
                                    "paginate": {
                                        "first":      "首页",
                                        "last":       "尾页",
                                        "next":       "下一页",
                                        "previous":   "上一页"
                                    },
                                    "oAria": {
                                        "sSortAscending": ": 升序排列",
                                        "sSortDescending": ": 降序排列"
                                    },


                                },
                                "sScrollX" : "100%",
                                "sScrollXInner" : "100%",
                                "bScrollCollapse" : true,
                                "order" : [ 2, 'asc' ] ,
                                ajax: function (data, callback, settings) {
                                    //console.log(data);
                                    //封装请求参数
                                    var param ="";//排序方式,用与传参 
                                     if(data.order[0].dir=="desc"){
                                         param =data.columns[data.order[0].column].data-1;//升序
                                     }else{
                                         param = data.columns[data.order[0].column].data-1+"_"+data.order[0].dir;//降序
                                     }
                                    var pageNum = (data.start/data.length)+1;//当前页码,用与传参
                                    var pageSize=data.length;//页面显示记录条数,在页面显示每页显示多少项的时候,用与传参;
                                    var search = data.search.value;//搜索条件,用于传参
                                    var soap_request='<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:zhgl="http://zhgl"><soapenv:Header/><soapenv:Body><zhgl:fyAndPlService><action>rjjzcszd</action><month>'+time+'</month><qxdm>'+localStorage.qxdm+'</qxdm><zdqx>'+localStorage.qxdm+'</zdqx><gpId></gpId><gpmc>'+search+'</gpmc><ljmzcs>'+v+'</ljmzcs><pageNum>'+pageNum+'</pageNum><pageSize>'+pageSize+'</pageSize><order>'+param+'</order><key></key></zhgl:fyAndPlService></soapenv:Body></soapenv:Envelope>'; //传入后台的参数,自定义
                                    console.info(soap_request);

                                     //datatable封装好的参数,用下面ajax格式,自动向后台发送请求,当点击相关按钮时;
                                    $.ajax({
                                        type: "POST",
                                        url: "../filterServlet",//请求路径
                                        cache: false,  //禁用缓存
                                        data:soap_request,//请求参数
                                        success: function (data) {
                                            //console.log(result);
                                          var result = fomtData(data, 'fyAndPlServiceResult');//后台返回的数据,这里用了自定义方法从新格式化了数据
                                            var list=result.list;
                                            var dataSet = [];
                                            //$("#datatable1").hide();
                                            //延迟
                                            setTimeout( function () {
                                                var returnData = {};
                                                returnData.draw = this.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                                returnData.recordsTotal =result.count;//返回数据全部记录
                                                returnData.recordsFiltered =result.count;//后台不实现过滤功能,每次查询均视作全部结果
                                                //返回的数据列表处理
                                                for (var i = 0; i < list.length; i++) {
                                                     .........从新组织数据格式放入dataSet;
                                                    dataSet.push(obj);
                                                } 
                                                returnData.data = dataSet;
                                                //回调函数
                                                callback(returnData); 
                                            }, 100);
                                        }
                                    });
                                },
                                fixedColumns : { //固定列的配置项
                                    leftColumns : 2, //固定左边第一列

                                },

                                columns : [ {
                                    title : "序号",width:"12%","data": null, "orderable" : false,
                                    "render" : function(data, type, full, meta){
                                        return meta.row + 1 + meta.settings._iDisplayStart;//为列表添加索引列,当后台分页的时候,解决索引列翻页不能连续自增问题。
                                        } 
                                }, {
                                    title : "列1"
                                }, {
                                    title : "列2"
                                }, {
                                    title : "列3"
                                } ]
                            });

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值