欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Datatables 后端分页 (前端代码)

程序员文章站 2022-05-06 09:40:15
...

//http://datatables.club/upgrade/1.10-convert.html
我在网上看到有许多版本的写法,这插件有两种参数写法 匈牙利式 驼峰式,以上是地址。

后端分页 前端所需要的配置

function PostTableDatas(url) {
  return {
    lengthChange: false, //允许改变每页显示的数据条数
    serverSide: true, //服务器处理分页,默认是false,需要服务器处理,必须true
    sAjaxDataProp: "aData", //是服务器分页的标志,必须有
    jQueryUI: true, //是否使用 jQury的UI theme
    autoWidth: false, //是否自适应宽度
    scrollCollapse: true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
    searching: false, //是否启动过滤、搜索功能
    ordering: false, //去掉页头排序
    destroy: true,
    processing: true, //开启加载等待提示,提示信息是下面language中的sProcessing配置
    paging: true, //开启分页
    searching: false, //开启搜索
    iDisplayLength: 10,//必须传,一页显示几个,同时这个参数担任着如何根据参数分页的功能
    ajax: {
      type: "post",
      //请求数据的URL
      url: url,
      //后端返回中哪个字段是数据
      dataSrc: "data.Data",
      data: getSerachParam(), //请求参数
      columnDefs: getcolumnDefs(),
      //你也可以自己指定返回的数据中的字段
      dataFilter: function (data) {
        var json = jQuery.parseJSON(data);
        return JSON.stringify(json);
      },
    },
    //告诉datatables数据中对应的列
    aoColumns: getTableColumns(),
    // 搜索
    fnServerParams: function (aoData) {
      aoData._rand = Math.random();
    },
    initComplete: function (settings, json) {},
    fnDrawCallback: function () {
      getData();
    },
    language: {
      lengthMenu: "每页显示 _MENU_ 条数据",
      zeroRecords: "没有匹配结果",
      info: "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
      infoEmpty: "显示第 0 至 0 项结果,共 0 项",
      emptyTable: "没有匹配结果",
      loadingRecords: " ",
      thousands: ",",
      paginate: {
        first: "首页",
        previous: "上一页",
        next: "下一页",
        last: "末页",
      },
    },
  };
}
//封装的函数方法使用 参数是接口路径(后端提供)
// example2 为 table标签的ID
$("#example2").dataTable(PostTableDatas("api/getList")



1.getTableColumns() 告诉插件以如何的形式渲染 table

//封装的方法使用 告诉插件如何渲染表头和数据
function getTableColumns(){
  return[
      {
        mDataProp: "", sTitle: "<input type='checkbox'  class='checkall'/> 全选", sWidth: "5%", sDefaultContent: "", sClass: "center",
        "render": function (data, type, full, meta) {
          return '<input type="checkbox"  name="id" class="checkchild"  data-rowindex="' + meta.row + '" value="' + full.id + '" />';
        }
      },
      { mDataProp: "name", sTitle: "姓名", sWidth: "6%" },
      {
        mDataProp: "sex", sTitle: "性别", sWidth: "6%"
      },
      {
        mDataProp: "Status", sTitle: "设备状态", sWidth: "6%",
        "render": function (data, type, full, meta) {
          if (data == 0) {
            return '<span>在线</span>';
          } else {
            return '<span>离线</span>';
          }
        }
      },
    ];
}

2.getSerachPara() 调用插件的时候传参数,默认的情况下插件会自带一些参数进行传递

function getSerachParam() {
    var model = { serialNo: $("#txt_scode").val() }
    return model;
  }

Datatables 后端分页 (前端代码)
你会发现插件在请求 url的时候 自带了很多参数, 在最后有一个serialNo 就是我上方额外传递的一个参数,如果需要做搜索功能,可以这样传递。

这里后端要注意 start 为从第几个开始取数据 length为取几个数据 draw为目前第几次访问数据(图中没有截取到。)

3.getcolumnDefs()

  //操作 目前我没有使用到这个方法,所以写个空方法
  function getcolumnDefs() {

  }

这样我在 封装PostTableDatas中的 3个方法都定义了,接口也能调通的话前端的工作就实现了。

请求返回数据

Datatables 后端分页 (前端代码)
draw 前端传什么,后端对应返回同样的值过来(插件会读取)
recordsTotal 数据总数
recordsFiltered 过滤后的数据(后端分页在前端显示的重点) 在上面定义参数我定义了一个iDisplayLength 值 recordsFiltered 除以iDisplayLength 等于页数。
比如
recordsFiltered后端传的值为150,iDisplayLength 前端设置的值为10,那么插件会自动生成15页

数据是在data.Data 数组中 我们在插件配置中也要配置dataSrc 对应的层次

相关标签: 前端插件