1.引用dataTables.js
<script src="${static_ctx}/lte/plugins/datatables/jquery.dataTables.min.js"></script>
2.html代码：
1 <table class="result-table dataTable no-footer" id="orderManagerTable" role="grid" 2 aria-describedby="orderManagerTable_info" style="width: 1078px;"> 3 <colgroup> 4 <col width="2%"> 5 <col width="10%"> 6 <col width="14%"> 7 <col width="15%"> 8 <col width="6%"> 9 <col width="8%"> 10 <col width="16%"> 11 <col width="8%"> 12 <col width="21%"> 13 </colgroup> 14 <thead> 15 <tr class="table-title" role="row"> 16 <th class="sorting_disabled or" rowspan="1" colspan="1" style="width: 17px;"></th> 17 <th width="10%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 108px;">竞价编号</th> 18 <th width="18%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 151px;">订单号</th> 19 <th width="8%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 162px;">下单时间</th> 20 <th width="8%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 65px;">商品项数</th> 21 <th width="8%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 86px;">下单金额</th> 22 <th width="9%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 172px;">确认时间</th> 23 <th width="10%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 86px;">状态</th> 24 <th width="26%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 226px;">操作</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr role="row" class="odd"> 29 <td class=" or"></td> 30 <td>B2018065391</td> 31 <td>1120181000020933</td> 32 <td>2018-06-08 10:45:17</td> 33 <td>1</td> 34 <td>18.36</td> 35 <td></td> 36 <td>待收货</td> 37 <td><a href="javascript:void(0);" orderid="9cee5863-9379-40a7-a2bd-0fba1c81946f" status="4" 38 biddingcode="B2018065391" orderno="1120181000020933" onclick="new orderManager.init().detailOrder(this)"> 39 订单详情</a><span style="color:#ff8a00">|</span><a href="javascript:void(0);" 40 orderid="9cee5863-9379-40a7-a2bd-0fba1c81946f" status="4" 41 biddingcode="B2018065391" orderno="1120181000020933" 42 onclick="new orderManager.init().looklogistics(this)"> 43 查看物流</a></td> 44 </tr> 45 <tr role="row" class="even"> 46 <td class=" or"></td> 47 <td>B2018065371</td> 48 <td>1120181000020485</td> 49 <td>2018-06-04 17:34:38</td> 50 <td>1</td> 51 <td>6600</td> 52 <td></td> 53 <td>审核中</td> 54 <td><a href="javascript:void(0);" orderid="efa548e2-3e00-4f97-ae70-4a77df194dc0" status="1" 55 biddingcode="B2018065371" orderno="1120181000020485" onclick="new orderManager.init().detailOrder(this)"> 56 订单详情</a></td> 57 </tr> 58 </tbody> 59 </table>
3.js代码：
1 var orderManager = {}; 2 orderManager.init = function(){ 3 }; 4 orderManager.init.prototype = { 5 6 //获得地址url 7 getContextPath : function(locate) { 8 return document.location.protocol + "//" + document.location.hostname + ":" + document.location.port + "/" + locate; 9 }, 10 // 表格数据 11 initManagerTable : function(){ 12 $('#orderManagerTable').DataTable({ 13 /* 14 * sAjaxSource 15 * 默认为null 16 * 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData） 17 * 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源 18 */ 19 "sAjaxSource" : "/bidding-web/biddingOperator/getBiddingOrderMangerList", 20 //fnServerData：这个是结合服务器模式的回调函数，用来向服务器传额外的参数并且处理服务器返回过来的数据 21 "fnServerData" : function(sSource, aoData, fnCallback) { 22 //序列化表格的数据，固定写法 23 var serializeData = function(aoData){ 24 var data = {}; 25 for(var i = 0 ;i<aoData.length ;i++){ 26 var dd = aoData[i]; 27 if(dd['value']){ 28 data[ dd['name'] ]= dd['value']; 29 } 30 } 31 return $.param(data); 32 }; 33 //向服务器传递数据并处理返回回来的数据，sSource固定写法 34 $.ajax({ 35 "type" : 'post', 36 "url" : sSource, 37 //"dataType" : "json", 38 //"dataSrc": "data", 39 "data" :serializeData(aoData), 40 "success" : function(resp) { 41 if (resp.status=="success"){ 42 fnCallback(resp.data); //fnCallback()渲染表格()括号里面放请求回来的数据 43 }else { 44 showMessage({message: "系统出错，请重新登陆"}); 45 } 46 }, 47 "error" : function () { 48 showMessage({message: "系统出错，请重新登陆"}); 49 } 50 }); 51 }, 52 //向服务器传额外的参数 53 "fnServerParams" : function(aoData) { 54 var biddingCode = $('#biddingCode').val(); 55 var orderSTime=$('#orderStartTime').val(); //orderSTime d.对象不能定义为orderStartTime 56 var orderETime=$('#orderEndTime').val(); 57 var status = $("#statusCode").val(); 58 var orderNo = $('#orderNo').val(); 59 var confSTime=$('#confStartTime').val(); 60 var confETime=$('#confEndTime').val(); 61 aoData.push({ 62 "name" : "biddingCode", 63 "value" : biddingCode 64 },{ 65 "name": "orderSTime", 66 "value": orderSTime 67 },{ 68 "name": "orderETime", 69 "value": orderETime 70 },{ 71 "name": "status", 72 "value": status 73 },{ 74 "name": "orderNo", 75 "value": orderNo 76 },{ 77 "name": "confSTime", 78 "value": confSTime 79 },{ 80 "name": "confETime", 81 "value": confETime 82 }); 83 }, 84 //定义列 85 "columns": [ 86 { "data": "id" }, 87 { "data": "biddingCode" }, 88 {"data": "orderNo"}, 89 { 90 "data": "dateCreated", 91 "render" : function(data) { 92 //格式化时间 93 var date = new Date(data); 94 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()+ ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds(); 95 } 96 }, 97 {"data": "goodsNumber"}, 98 { "data": "singleAmount" }, 99 { 100 "data": "confirmationTime" , 101 "render" : function(data) { 102 var date = new Date(data); 103 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()+ ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds(); 104 } 105 }, 106 { "data" : "statusDescription" }, 107 { 108 "data" : "operation", 109 "render" : function(data, type, full, meta) { //data是当前格数据，full可以拿到当前行的数据 110 // debugger; 111 if(data!=null){ 112 var option =""; 113 for(var i=0; i<data.length; i++){ 114 var eventDes =data[i].event; 115 if(eventDes!=null){ 116 option = option + '<a href="javascript:void(0);" orderId = "'+ full.id +'" onclick="new orderManager.init().'+ data[i].event + '"> '+ data[i].operationName + '</a> ' 117 }else{ 118 option = option + '<a href="javascript:void(0);" orderId = "'+ full.id +'" > '+ data[i].operationName + '</a> ' 119 } 120 } 121 return option ; 122 }else{ 123 return data; 124 } 125 } 126 } 127 ], 128 //隐藏第一列 aoColumnDefs设置列的属性时，可以任意指定列，并且不需要给所有列都设置。 129 "aoColumnDefs":[ 130 { 131 "sClass":"or", 132 "aTargets":[0], 133 "data":"operations", 134 "mRender":function(a,b,c,d){//id，c表示当前记录行对象 135 return ''; 136 } 137 } 138 ], 139 "bServerSide" : true, //需要向后端传jqueryDataTablesVo数据,是否启动服务器端数据导入 140 "searching":false, 141 "paging": true, 142 "ordering": false, 143 "bPaginate": true, 144 "bSort": false, // 是否启动各个字段的排序功能 145 "bFilter" : false,// 是否启动过滤、搜索功能 146 // "aLengthMenu" : [5, 10, 20, 50, 100], //更改显示记录数选项 147 "bLengthChange":false,// 每行显示记录数 148 "bInfo" : true,// //是否显示页脚信息，DataTables插件左下角显示记录数 149 "bWidth" : true, 150 //"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示 151 //"aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列 152 //"bJQueryUI" : true, //是否使用 jQury的UI theme 153 "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变 154 "sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认 155 "bAutoWidth":true, //是否自适应宽度 156 "iDisplayLength" : 5, // 每页显示行数 157 //"bServerSide" : true, 158 "bDestroy" : true, 159 "bSortCellsTop" : true, 160 /* 161 * 自定义语言设置 162 */ 163 "oLanguage" : { 164 "sProcessing" : "正在获取数据，请稍后...", 165 "sLengthMenu" : "显示 _MENU_ 条", 166 "sZeroRecords" : "没有检索到数据", 167 "sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条", 168 "sInfoEmpty" : "记录数为0", 169 "sInfoFiltered" : "(全部记录数 _MAX_ 条)", 170 "sInfoPostFix" : "", 171 "sSearch" : "搜索", 172 "sUrl" : "", 173 "oPaginate" : { 174 "sFirst" : "首页", 175 "sPrevious" : "前一页", 176 "sNext" : "后一页", 177 "sLast" : "尾页" 178 } 179 } 180 } ); 181 }, 182 183 //查询 184 search : function() { 185 186 $("#searchBtn").click(function() { 187 new orderManager.init().initManagerTable(); 188 189 }) 190 }, 191 //所有状态 192 getAllStatus :function () { 193 $.ajax({ 194 url: '/bidding-web/biddingOperator/getAllStatus', 195 success: function (data) { 196 var status = '<li><a code="" href="javascript:void(0)" onclick="new orderManager.init().getValue(this)">全部</a></li>' 197 $("#allStatus").append(status); 198 for (var i=0;i<data.length;i++) { 199 status = "<li><a code=" + data[i].statusCode + " href=\"javascript:void(0)\" onclick=\"new orderManager.init().getValue(this)\">"+ data[i].statusDescription +"</a></li>" 200 $("#allStatus").append(status); 201 } 202 }, 203 error: function () { 204 alert("请求失败") 205 } 206 }) 207 }, 208 getValue :function (obj) { 209 debugger; 210 var code = $(obj).attr("code"); 211 // var statusDescription = $(obj).text(); 212 $("#statusCode").val(code); 213 // alert(code); 214 // alert(statusDescription); 215 }, 216 //取消订单 217 cancelOrder :function (obj) { 218 debugger; 219 var orderId = $(obj).attr("orderId"); 220 $.ajax({ 221 url: '/bidding-web/biddingOperator/updateStatusById' , 222 data:{ 223 status:7, 224 id:orderId 225 }, 226 success: function (data) { 227 new orderManager.init().initManagerTable(); 228 }, 229 error: function () { 230 alert("请求失败") 231 } 232 }) 233 }, 234 //删除订单 235 deleteOrder :function (obj) { 236 var orderId = $(obj).attr("orderId"); 237 $.ajax({ 238 url: '/bidding-web/biddingOperator/deleteJcbdMallOrderById' , 239 data:{ 240 id:orderId 241 }, 242 success: function (data) { 243 new orderManager.init().initManagerTable(); 244 }, 245 error: function () { 246 alert("请求失败") 247 } 248 }) 249 } 250 } 251 252 $(function(){ 253 var obj = new orderManager.init(); 254 obj.getContextPath(); 255 obj.initManagerTable(); 256 obj.search(); 257 obj.getAllStatus(); 258 }) 259 260 261 262 263 264 datatables参数配置详解 265 /* 266 * 默认为true 267 * 是否自动计算列宽，计算列宽会花费一些时间，如果列宽通过aoColumns传递，可以关闭该属性作为优化 268 */ 269 "bAutoWidth":true, 270 /* 271 * 默认为false 272 * 是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提升 273 * 当该属性设置为true时，表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来 274 */ 275 "bDeferRender":false, 276 /* 277 * 默认为true 278 * 是否对数据进行过滤，数据过滤是十分灵活的，允许终端用户输入多个用空格分隔开的关键字 279 * 匹配包含这些关键字的行，即使关键字的顺序不是用户输入的顺序，过滤操作会跨列进行匹配，关键字可以分布在一行中不同的列 280 * 要注意的是如果你想在DataTable中使用过滤，该选项必须设置为true，如果想移除默认过滤输入框但是保留过滤功能，请设置为false(API没写，推测是false) 281 */ 282 "bFilter":true, 283 /* 284 * 默认为true 285 * 是否显示表格信息，是指当前页面上显示的数据的信息，如果有过滤操作执行，也会显示过滤操作的信息 286 */ 287 "bInfo":true, 288 /* 289 * 默认为fasle 290 * 是否开启jQuery UI ThemeRoller支持，需要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差异，有些是额外附加的 291 */ 292 "bJQueryUI":false, 293 /* 294 * 默认为true 295 * 是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持 296 */ 297 "bLengthChange":false, 298 /* 299 * 默认为true 300 * 是否开启分页功能,即使设置为false,仍然会有一个默认的<前进,后退>分页组件 301 */ 302 "bPaginage":true, 303 /* 304 * 默认为false 305 * 当表格在处理的时候（比如排序操作）是否显示“处理中...” 306 * 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处 307 */ 308 "bProcessing":false, 309 /* 310 * 默认为false 311 * 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据 312 * 当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项 313 */ 314 "bScrollInfinite":false, 315 /* 316 * 默认为false 317 * 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源 318 */ 319 "bServerSide":false, 320 /* 321 * 默认为true 322 * 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定 323 */ 324 "bSort":true, 325 /* 326 * 默认为true 327 * 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色 328 * 该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候） 329 * 当对大数据集进行排序的时候你或许希望关闭该选项 330 */ 331 "bSortClasses":true, 332 /* 333 * 默认为false 334 * 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等 335 * 这样当终端用户重新加载这个页面的时候可以使用以前的设置 336 */ 337 "bStateSave":false, 338 /* 339 * 默认为空字符串，即：无效 340 * 是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项 341 * 从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用） 342 */ 343 "sScrollX":"100%", 344 /* 345 * 默认为空字符串，即：无效 346 * 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看 347 * 当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用） 348 */ 349 "sScrollY":"100%", 350 /* 351 * 自定义语言设置 352 */ 353 "oLanguage": { 354 "oAria": { 355 /* 356 * 默认值为activate to sort column ascending 357 * 当一列被按照升序排序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 358 */ 359 "sSortAscending": " - click/return to sort ascending", 360 /* 361 * 默认值为activate to sort column ascending 362 * 当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 363 */ 364 "sSortDescending": " - click/return to sort descending" 365 }, 366 "oPaginate": { 367 /* 368 * 默认值为First 369 * 当使用全数字类型的分页组件的时候，到第一页按钮上的文字 370 */ 371 "sFirst": "First page", 372 /* 373 * 默认值为Last 374 * 当使用全数字类型的分页组件的时候，到最后一页按钮上的文字 375 */ 376 "sLast": "Last page", 377 /* 378 * 默认值为Next 379 * 当使用全数字类型的分页组件的时候，到下一页按钮上的文字 380 */ 381 "sNext": "Next page", 382 /* 383 * 默认值为Previous 384 * 当使用全数字类型的分页组件的时候，到前一页按钮上的文字 385 */ 386 "sPrevious": "Previous page" 387 }, 388 /* 389 * 默认值activate to sort column ascending为 390 * 当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示 391 * 注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值） 392 */ 393 "sEmptyTable": "No data available in table", 394 /* 395 * 默认值为Showing _START_ to _END_ of _TOTAL_ entries 396 * 该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除 397 */ 398 "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)", 399 /* 400 * 默认值为Showing 0 to 0 of 0 entries 401 * 当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式 402 */ 403 "sInfoEmpty": "No entries to show", 404 /* 405 * 默认值为(filtered from _MAX_ total entries) 406 * 当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念 407 */ 408 "sInfoFiltered": " - filtering from _MAX_ records", 409 /* 410 * 默认值为空字符串 411 * 使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面 412 * sInfoEmpty和sInfoFiltered可以以任何被使用的方式进行结合 413 */ 414 "sInfoPostFix": "All records shown are derived from real information.", 415 /* 416 * 默认值为‘,‘ 417 * DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字 418 * 默认情况下会自动调用，可以使用该选项来自定义分割的字符 419 */ 420 "sInfoThousands": "‘", 421 /* 422 * 默认值为Show _MENU_ entries 423 * 描述当分页组件的下拉菜单的选项被改变的时候发生的动作，‘_MENU_‘变量会被替换为默认的10，25，50，100 424 * 如果需要的话可以被自定义的下拉组件替换 425 */ 426 "sLengthMenu": "Display _MENU_ records", 427 /* 428 * 默认值为Loading... 429 * 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示 430 * 向终端用户指明数据正在被加载，注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效 431 */ 432 "sLoadingRecords": "Please wait - loading...", 433 /* 434 * 默认值为Processing... 435 * 当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串 436 */ 437 "sProcessing": "DataTables is currently busy", 438 /* 439 * 默认为Search: 440 * 描述用户在输入框输入过滤条件时的动作，变量‘_INPUT_‘,如果用在字符串中 441 * DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置 442 * 如果变量没有指定，用户输入会自动添加到字符串后面 443 */ 444 "sSearch": "Apply filter _INPUT_ to table", 445 /* 446 * 默认值为空字符串，即：无效 447 * 所有语言信息可以被存储在服务器端的文件中，DataTable可以根据该参数指定的URL去寻找 448 * 必须保存语言文件的URL信息，必须是JSON格式，对象和初始化中使用的oLanguage对象具有相同的属性 449 * 请参考示例文件来了解该参数是如何工作的 450 */ 451 "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt", 452 /* 453 * 默认值为No matching records found 454 * 当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串 455 * sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作 456 */ 457 "sZeroRecords": "No records to display" 458 } 459 "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示 460 "bServerSide" : true, //是否启动服务器端数据导入 461 "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设自定回复为初始化状态 462 "bJQueryUI" : true, //是否使用 jQury的UI theme 463 "sScrollY" : 450, //DataTables的高 464 "sScrollX" : 820, //DataTables的宽 465 "aLengthMenu" : [20, 40, 60], //更改显示记录数选项 466 "iDisplayLength" : 40, //默认显示的记录数 467 "bAutoWidth" : false, //是否自适应宽度 468 //"bScrollInfinite" : false, //是否启动初始化滚动条 469 "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变 470 "bPaginate" : true, //是否显示（应用）分页器 471 "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数 472 "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页 473 "bSort" : true, //是否启动各个字段的排序功能 474 "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列 475 "bFilter" : true, //是否启动过滤、搜索功能 476 "oLanguage": { //国际化配置 477 "sProcessing" : "正在获取数据，请稍后...", 478 "sLengthMenu" : "显示 _MENU_ 条", 479 "sZeroRecords" : "没有您要搜索的内容", 480 "sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条", 481 "sInfoEmpty" : "记录数为0", 482 "sInfoFiltered" : "(全部记录数 _MAX_ 条)", 483 "sInfoPostFix" : "", 484 "sSearch" : "搜索", 485 "sUrl" : "", 486 "oPaginate": { 487 "sFirst" : "第一页", 488 "sPrevious" : "上一页", 489 "sNext" : "下一页", 490 "sLast" : "最后一页" 491 } 492 }