js插件---datatable常用配置
一、总结
一句话总结：
datatable常用配置百度一下特别方便
二、jquery datatable 实例操作
转自或参考：jquery datatable 实例操作
https://www.cnblogs.com/xiaoxiaoqiye/p/6958801.html
var dataTables = $(".table").dataTable({
data: d,//为ajax的值,没有直接用插件自带的请求数据方式，个人觉得data的方式好控制一些
columns: [{//设置表格内容
sDefaultContent: "",//默认值
data: "Id",//对应数据json的key
bVisible: false //此列不显示
}, {
title: "名称",
data: "Name",
class:"",//设置当前td的class值
render: function (data, type, full) { //自定义模块的内容，data为key对应的Name的值，full为所有的值
return "<div title='" + data + "' > " + data + "</div>"; //可以通过设置div的宽来防止无法设置表格td的宽，并且可以添加title
}
}],
//"columnDefs": [{//设置 编辑按钮
// "targets": [3],
// "data": "id",
// "render": function (data, type, full) {
// return "<a class='updata' href='#' >编辑</a>";
// }
//}],
bPaginate: false, //是否显示（应用）分页器
bInfo: false, //是否显示页脚信息，DataTables插件左下角显示记录数
bSort: true, //是否启动各个字段的排序功能
aaSorting: [[0, 'asc']],//默认排序列
bSelectAll: false,
fnCallback: function () { },
//oPageSize: 10,
//oSortType: "desc",
//oSortCol: "proName",
bProcessing: true,
oLanguage: {//多语言配置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearchPlaceholder": "🔍 查找",//搜索框内占位符
"sSearch": "",//搜索框前的字体
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
}
});
$(".tabel").dataTable({aaData : d});//重新加载数据
$(".table").dataTable().fnDeleteRow(index);//删除行
$(".table").dataTable().fnUpdate("a", 1, 1, false);//修改行,最后一个参数，是否重绘表格
$(".table").dataTable().fnUpdate(["a","b"],1);//修改列
$(".table").DataTable().row.add(dc).draw();//添加行
$(".table").dataTable().fnPageChange(page); //跳转到某页
$(".table").dataTable().fnGetData();//得到页面中所有对象
$(".table").dataTable().fnSetColumnVis( 0, false);//隐藏列 三、Datatable 使用例子
转自或参考：Datatable 使用例子
https://www.cnblogs.com/hasubasora/p/6608133.html
1 var month = {
2 filter: {},
3 DataTables: "",
4 init: function() {
5 _this = this;
6 $(".addAccount").on('click', function() {
7
8 });
9 $("#proSelect").on('change', function() {
10
11 });
12 $('[name=tDnum]').on('blur', function() {
13
14 });
15 $('[name=tDnum]').on('keyup', function() {
16
17 });
18 DataTables = $('#table_id').DataTable({
19 "processing": true,
20 "serverSide": true, //服务器分页
21 "sEmptyTable": true,
22 "sLoadingRecords": true,
23 "scrollX": false,
24 "searching": false,
25 "ordering": false,
26 "paging": true,
27 "bAutoWidth": true, //是否自适应宽度
28 "bLengthChange": true, //隐藏下拉
29 // data: [
30 // ['1', '2', '3', '4', '5', '6']
31 // ]，
32 // info: false, //隐藏 Showing 1 to 2 of 2 entries //有多少页
33 // retrieve: true, //检索实例，
34 // destroy: true， //销毁当前表格，对象
35 // ajax: {
36 // url: "",//替换新链接
37 // dataSrc: function(data) { //dataSrc=success 成功返回数据
38 // return data.data;
39 // }
40 // },
41 //制定第几列 显示什么属性 columns.data
42 //columns.render 渲染函数
43 "aaSorting": [
44 [1, "desc"]
45 ],
46 "aLengthMenu": [
47 [10, 50, 100],
48 [10, 50, 100]
49 ],
50 // "dom": 'rt<"bottom"iflp<"clear">>',
51 "order": [
52 [0, "desc"]
53 ],
54 "ajax": {
55 "url": AccountData,
56 "type": 'post',
57 "data": function(d) {
58 //添加额外的参数传给服务器
59 var filter = {};
60 d.filter = _this.filter;
61
62 }
63 },
64 "dom": '<"row"<"#id.col-xs-6"r><"col-xs-6">>' + "t" +
65 '<"row"<"col-xs-6"i><"col-xs-6"p>>',
66 "aoColumns": [
67 /**
68 * 第1列默认排序
69 第2列默认排序
70 第3列只升序
71 第4列降序排序，其次是升序，然后再升序
72 第5列只降序
73 第6列默认排序
74 */
75 null,
76 null,
77 { "orderSequence": ["asc"] },
78 { "orderSequence": ["desc", "asc", "asc"] },
79 { "orderSequence": ["desc"] },
80 null
81 ],
82 columnDefs: [{
83 targets: 0,
84 data: "",
85 title: "操作",
86 render: function(data, type, row, meta) { //结算单Id
87 if (row[11] == "0") { //待申请结算
88 return '<input type="checkbox" name="checkBoxes" data-id="' + row[2] + '">';
89 } else {
90 return '<input type="checkbox" disabled name="checkBoxes" data-id="' + row[2] + '">';
91 }
92 }
93 }, {
94 targets: 9,
95 "visible": false //隐藏掉那一列
96 }, {
97 targets: 11, //判断td内容改td中的内容
98 render: function(data, type, row, meta) {
99 if (data == "1") {
100 return "审核中";
101 } else if (data == "0") {
102 return "待申请结算";
103 } else if (data == "2") {
104 return "审核通过";
105 } else if (data == '3') {
106 return "审核不通过";
107 }
108 return data;
109 }
110 }, {
111 targets: 8,
112 data: "",
113 title: "操作",
114 render: function(data, type, row, meta) {
115 return '<input type="checkbox" name="checkBoxes" data-id="' + row[8] + '">';
116 }
117 }],
118 // 回调函数， 当表格加载完后
119 initComplete: function() {
120 $("#id").append("input");
121 },
122 "createdRow": function(row, data, index) { //改變某航顏色
123 if (data[2].replace(/[\$,]/g, '') * 1 > 4000) {
124 $('td', row).eq(2).html('<div style="border:1px solid red;width:300px">' + data[2] + '</div>');
125 }
126 },
127 language: {
128 "sProcessing": "拼命加载中...",
129 "sLengthMenu": "显示 _MENU_ 项结果",
130 "sZeroRecords": "没有匹配结果",
131 "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
132 "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
133 "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
134 "sInfoPostFix": "",
135 "sSearch": "搜索:",
136 "sUrl": "",
137 "sEmptyTable": "表中数据为空",
138 "sLoadingRecords": "玩命加载中...",
139 "sInfoThousands": ",",
140 "oPaginate": {
141 "sFirst": "首页",
142 "sPrevious": "上页",
143 "sNext": "下页",
144 "sLast": "末页"
145 },
146 "oAria": {
147 "sSortAscending": ": 以升序排列此列",
148 "sSortDescending": ": 以降序排列此列"
149 }
150 },
151 });
152 $.fn.dataTable.ext.errMode = function(s, h, m) {};
153 },
154 //搜索功能
155 selsect: function() {
156 _this.filter = {
157 keywords: $('#keywords').val(),
158 projectId: $("#projectId").val(),
159 checkStatus: $("#searchDataTable").val()
160 };
161 DataTables.ajax.reload(null, false);
162 // DataTables.draw();
163 },
164 //打开对账选择商品内容
165 openContent: function(oid) {
166 var url = clearing_url;
167 url += '/oid/' + oid; // 需要附带参数 /
168 layer.open({
169 type: 1, //1 是 HTML 2是frame
170 title: '标题',
171 shadeClose: true,
172 shade: [0.8, '#393D49'],
173 scrollbar: false,
174 maxmin: true, //开启最大化最小化按钮
175 area: ['99%', '99%'], //窗口宽度
176 content: ID, // 类型是1的用ID 2的用链接
177 success: function() { //执行弹出层完成时,获取当前层索引},
178
179 },
180 end: function() {
181 //关闭后执行父页面的功能
182 }
183 });
184 },
185 confirm: function(num) { //确认弹出询问信息
186 parent.layer.confirm('确定结算？', {
187 icon: 3,
188 title: '结算确认',
189 yes: function() {
190 $.ajax({
191 url: clearing_url,
192 type: 'post',
193 dataType: 'json',
194 data: { payRecordList: num },
195 success: function(data) {
196 if (data.status == 1) {
197 parent.layer.msg('结算已发送，耐心等待审核！');
198 DataTables.ajax.reload();
199 setTimeout(parent.layer.closeAll, 1000);
200 }
201 if (data.url == 1000) {
202 parent.layer.alert(data.info, function(index) {
203 //bankCard 要打开的连接
204 parent.openFrame(bankCard, 'left-bankCard'); //跳转框架
205 parent.layer.close(index);
206 });
207 }
208 },
209 error: function(data) {
210 parent.layer.msg('网站被外星人绑架啦~(≧▽≦)~啦啦啦，请刷新页面！');
211 }
212 });
213 },
214 cancel: function() {
215 _this.dataTable.api().ajax.reload();
216 }
217 });
218 },
219 each: function() { //数组转换对象
220 art = [];
221 $.each($("[name=checkBoxes]:checked"), function(i, n) {
222 art.push($(n).attr("data-id"));
223 //console.log($(n).attr("data-id"));
224 });
225 var _atr = art.toString(); //转出object
226 },
227
228 }; 我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
版权申明：欢迎转载，但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。
博主25岁，前端后端算法大数据人工智能都有兴趣。
大家有啥都可以加博主联系方式（qq404006308，微信fan404006308）互相交流。工作、生活、心境，可以互相启迪。
聊技术，交朋友，修心境，qq404006308，微信fan404006308
26岁，真心找女朋友，非诚勿扰，微信fan404006308，qq404006308
人工智能群：939687837
作者相关推荐
感悟总结
其它重要感悟总结
感悟总结200813
最近心境200830
最近心境201019
201218-210205
![js常用插件(四)之jsonExportExcel导出表格(后台系统必备)[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)