datatables.js

lib中已收录，下载过H-ui框架，无需单独下载，但页面需要单独引入。单独下载地址 datatables_v1.10.15.js

datatables.js是由一款用JQuery开发的表格插件，默认是英文版，H-ui已在原版基础上做了汉化。本插件版权归原作者所有，下载仅供学习研究。

使用方法

1、datatables.js依赖jquery或者zepto.js。

<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>

js调用

$(".table-juanzeng").dataTable({

});

demo效果

用户 金额（¥） 时间(降序)

前台分页与后台分页

用前台分页还是后台分页？取决于你的数据量。

如果只是1000条以下，几十条，几百条这样的数据，建议，一次把数据请求过来，直接前台分页，这样只请求一次，不管你怎么点页码进行分页切换都不会再请求服务端，减轻服务器的压力。

如果上万，上百万的数据，那就必须走异步请求，根据页码和搜索条件请求服务端，服务端根据参数返回当前页的数据即可。这样可以保证时效性，每次翻页请求的数据都是最新的，也会减轻前台的数据渲染的压力。

相关参数

属性 默认值 描述 备注
paging true 是否表格分页 布尔值 true | false
searching true 是否开启搜索功能 布尔值 true | false
ordering true 是否排序 布尔值 true | false
orderMulti true 是否多列排序 布尔值 true | false
autoWidth false 是否自动调整列宽 布尔值 true | false
scrollX 水平滚动 字符串 '200px'
scrollY 垂直滚动 字符串 '200px'
aLengthMenu [10, 25, 50, 100] 设置下拉每页显示条数 数组
pageLength 10 默认显示的条数 数字
lengthChange true 是否允许显示tables的一页展示多少条记录的下拉列表 布尔值 true | false
info true 是否显示右下角显示总数和过滤条数的控件 布尔值 true | false
processing true 获取数据过程中是否出现加载指示 布尔值 true | false
stripeClasses ["odd", "even"] 为奇偶行加上样式 数组
serverSide false 开启服务器分页 布尔值 true | false
bStateSave false 是否保存状态 布尔值 true | false
columns 定义表格的列
ajax 异步加载数据源 对象。 
{
  url: url,
  type: 'POST',
  data: {
    // 请求的条件参数
  },
  success: function() {

  }
}
deferRender false 控制表格的延时渲染。 布尔值 true | false
drawCallback 表格生成后回调函数 function()
language 原版的datatables是英文版，H-ui已汉化 设置表格语言 对象。 
{
  "emptyTable": "表中没有可用数据",
  "info": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
  "infoEmpty": "没有记录",
  "infoFiltered": "(从 _MAX_ 条记录中过滤)",
  "infoPostFix": "",
  "thousands": ",",
  "lengthMenu": "每页显示 _MENU_条",
  "loadingRecords": "加载中...",
  "processing": "处理中...",
  "search": "搜索:",
  "zeroRecords": "没有找到符合条件的数据",
  "paginate": {
    "first": "首页",
    "last": "尾页",
    "next": "下一页",
    "previous": "上以页"
  },
  "aria": {
    "sortAscending":  ": activate to sort column ascending",  //当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀
    "sortDescending": ": activate to sort column descending"  //当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀
  }
}

微信扫码打赏

觉得不好，您千万别打赏，退不了费的！