Datatable 使用例子

现在项目中总要用这个玩意。研究了几天基本可以用

 

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

 

转载于:https://www.cnblogs.com/hasubasora/p/6608133.html