美文网首页
dataTable进行服务端分页返回的前端处理

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

作者: Piemon_Jay | 来源:发表于2019-05-20 17:17 被阅读0次

    最近搞的后台,框架用的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": ": 以降序排列此列"
               }
           }
        });
    

    相关文章

      网友评论

          本文标题:dataTable进行服务端分页返回的前端处理

          本文链接:https://www.haomeiwen.com/subject/gjzkzqtx.html