现在项目中总要用这个玩意。研究了几天基本可以用
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;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 };