Datatables配置汇总

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（MIT license）！商业支持
更多特性请到官网查看

为什么要使用Datatables

运营大爷不喜欢服务器端的分页显示，可以接受3-5秒的查询时间，喜欢无条件式的模糊搜索日志等

样式选择Bootstrap

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js

//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css

国际化显示

Datatables支持国际化，你可以把语言定义在文件中，使用language.url选项来初始化

$(document).ready(function() {
    $('#example').dataTable({
        "language": {
            "url": "../resources/zh_CN.json"
        }
    });
});

zh_CN.json

{
    "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": ": 以降序排列此列"
	}
}

保存状态

Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。

这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项.

需要注意的是，这个特性不支持ie6、ie7

默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格

这个参数值也可以控制是本地储存(0~更大)还是session储存(-1)

下面的例子展示了Datatables设置 stateSave选项初始化后，实现的状态保存

$(document).ready(function() {
  $('#example').dataTable( {
    stateSave: true
  });
});

DOM定位

datatables默认会打开部分特性，比如搜索框，分页显示等等，或许你不喜欢datatables这样去布局，可能你想把分页按钮放在底部的中间，搜索框放在顶部的左上角，不用担心datatables考虑到这个问题，使用dom选项就可以灵活配置各个特性的位置

datatables定义了10个字符表示不同的组件

l - Length changing 每页显示多少条数据选项
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分页按钮
r - pRocessing 加载等待显示信息
< and > - div elements 一个div元素
<“#id” and > - div with an id 指定id的div元素
<“class” and > - div with a class 指定样式名的div元素
<“#id.class” and > - div with an id and class 指定id和样式的div元素

$(document).ready(function() {
    $('#example').dataTable( {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
    });
});

按钮+导出Excel

按钮可以通过 buttonsOption ，使用 domOption 指定按钮：

$('#myTable').DataTable({
    dom: 'Bfrtip',
    buttons: ['copy', 'excel', 'print']
});

导出功能可由H5或Flash实现，我所使用的为H5，需要添加JS

//code.jquery.com/jquery-1.12.4.js(必选)
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js(必选)
https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js(必选)
//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js(必选)
//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js(Excel)
//cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js(打印)

这里没有选择CSV和PDF功能是因为他对中文支持不友好，有乱码

转载请注明原地址: http://blog.noark.xyz/article/2017/6/15/datatables配置汇总/

小流氓