Datatables 后端分页 (前端代码)

//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;
  }

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

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

3.getcolumnDefs()

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

  }

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

请求返回数据

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

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