Datatables 前端分页 (前端代码)

封装dataTables配置方法

function PostTableDatasNoPage(url) {
  return {
    lengthChange: false, //允许改变每页显示的数据条数
    processing: true, //隐藏加载提示,自行处理
    serverSide: false, //启用服务器端分页
    searching: false, //禁用原生搜索
    orderMulti: false, //启用多列排序
    jQueryUI: true, //是否使用 jQury的UI theme,
    searching: false, //是否启动过滤、搜索功能
    ordering: false, //去掉页头排序
    bDestroy: true,
    ordering: false,
    iDisplayLength: 10,
    ajax: {
      type: "post",
      //请求数据的URL
      url: url,
      dataFilter: function (data) {
        return data;
      },
      //后端返回中哪个字段是数据
      dataSrc: function (data) {
        return data.Data; //获取服务器返回的数据
      },
      data: getSerachParam(), //请求参数
      columnDefs: getcolumnDefs(),
      //你也可以自己指定返回的数据中的字段
    },
    //告诉datatables数据中对应的列
    aoColumns: getTableColumns(),
    // 搜索
    fnServerParams: function (aoData) {
      aoData._rand = Math.random();
    },
    initComplete: function (settings, json) {},
    fnDrawCallback: function () {
      
    },
    language: {
      lengthMenu: "每页显示 _MENU_ 条数据",
      zeroRecords: "没有匹配结果",
      info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
      infoEmpty: "显示第 0 至 0 项结果，共 0 项",
      emptyTable: "没有匹配结果",
      loadingRecords: " ",
      thousands: ",",
      paginate: {
        first: "首页",
        previous: "上一页",
        next: "下一页",
        last: "末页",
      },
    },
  };
}

在方法里面再次封装了 请求参数(getSerachParam)、返回格式(getcolumnDefs)、渲染格式(getTableColumns)三个方法

//定义渲染格式
function getTableColumns() {
    return [
      {
        mDataProp: "FaceID", sTitle: "<input type='checkbox'  class='checkall minimal'/> 全选", sWidth: "5%", sDefaultContent: "", sClass: "center",
        "render": function (data, type, full, meta) {
          return '<input type="checkbox"  name="id" class="checkchild minimal"  data-rowindex="' + meta.row + '"  value="' + full.id + '" />';
        }
      },
      { mDataProp: "FaceID", sTitle: "人员ID", sWidth: "4%" },
      {
        mDataProp: "SerialNo", sTitle: "人员编号", sWidth: "6%"
      },
      {
        mDataProp: "PersonName", sTitle: "姓名", sWidth: "6%"
      },
      {
        mDataProp: "GroupID", sTitle: "组名", sWidth: "6%"
      },
      {
        mDataProp: "DataCode", sTitle: "自定义编码", sWidth: "6%"
      },
      {
        mDataProp: "CreateDate", sTitle: "创建时间", sWidth: "6%"
      }, {
        mDataProp: "Remark", sTitle: "备注", sWidth: "6%"
      },
    ];
  }
  //操作
  function getcolumnDefs() {

  }
  //每次插件请求接口带参数
  function getSerachParam() {
    var starttime = $("#startdate").val(); //开始时间
    var enddate = $("#enddate").val(); // 结束时间
    var txtscode = $("#txt_scode").val();
    var model = {
      faceName: txtscode,
      startdate: starttime,
      enddate: enddate
    };
    return model;
  }

最后table标签ID为tableList 渲染数据

var dataTable = $("#tableList").dataTable(PostTableDatas("api/FaceManagement/SearchFaceData"))