dataTable进行服务端分页返回的前端处理

2019-05-20  本文已影响0人  Piemon_Jay

最近搞的后台,框架用的h-ui,里边用到了datable。
这里介绍一下:datatable是一款基于jQuery的表格插件,简单易用。
话不多说,开始敲bug:

 table=$('.table-sort').dataTable({
        serverSide: true, 
        orderable:false,
        searching: false,
        lengthChange: false,
        pageLength: 15, 
        sort : false, 
        ajax:{   
            url: "接口地址",
            type: "POST",    
            contentType: "application/x-www-form-urlencoded", 
            async : false, 
            dataType : 'json',
            data:function(d){
                //通过形参"d"可以获取到datable自带的参数信息,然后计算和转换设置接口所需要的参数
                //我的服务端接口配置是pageno为页数,count为数量,state是其他参数
                d.pageno = d.start/d.length+1;
                d.count = d.length;
                d.state=$("#orderstate").val();
            },
            dataFilter: function (json) {//json是服务器端返回的数据
                //如果服务端返回的json字符串符合datatable要求,则直接return json,若不符合则进行以下步骤
                //获取到的是json字符串,转换成json对象,提取所需要的数据
                var dt = $.parseJSON(json);
                console.log(dt);
                pagetotal = dt.data.pagetotal;
                list = dt.data.list;
                //然后定义一个符合datatable要求的对象,data属性的值是实际返回的数据
                var returndt = {
                    //"draw": ,
                    "recordsTotal": dt.data.recordTotal,
                    "recordsFiltered": dt.data.recordTotal,
                    "data":dt.data.list
                };
                //把符合要求的对象再次转为json字符串return出去
                return JSON.stringify(returndt);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                window.parent.location.href="login.html";
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            } 
        },  
        "columns":[
        {title:"XX",data:"oid",class:"args text-c",},
        {title:"AA",data:"proname",width:"160",class:"lookde text-c",render: function(data, type, row) { 
return '<u style="cursor:pointer" onClick="order_edit(this)" class="text-primary" title="查看">'+data+'</u>'; }},
        {title:"CC",data:"sku",class:"sku text-c"}
        ],
        "aaSorting": [[ 0, "desc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
          //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
          {"orderable":false,"aTargets":[1,2,3]}// 制定列不参与排序
        ],
        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": "末页"
           },
           "oAria": {
               "sSortAscending": ": 以升序排列此列",
               "sSortDescending": ": 以降序排列此列"
           }
       }
    });
上一篇下一篇

猜你喜欢

热点阅读