經驗，是前行路上，磕磕碰碰，不斷探索，最終留下的結晶；亦是下一次，快速高效，尋求到結果的快捷方式。
datatable插件具體可參考：
官網：http://datatables.club/
參數說明：http://www.cnblogs.com/hyywaq/p/5919412.html
html頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 頁面引入css樣式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/datatable/css/dataTables.bootstrap.min.css"> </head> <body> <table id="data_table" class="table table-bordered table-striped table-hover" width="100%"> <thead> <tr> <th>ID</th> <th>名稱</th> <th>任務</th> <th>日期</th> <th>操作</th> </tr> </thead> <tbody id="data_list"> </tbody> </table> <!-- require.js 模塊化 --> <script src="js/common/libs/require.js" data-main="js/list"></script> </body> </html>
js:
//定義js文件路徑,相對頁面的路徑 require.config({ paths: { jquery: 'js/common/libs/jquery.min', 'datatables.net': 'js/common/libs/datatable/jquery.dataTables.min', dbBootstrap: 'js/common/libs/datatable/dataTables.bootstrap.min' }, shim: { 'datatables.net':{ deps:['jquery'] }, 'dbBootstrap':{ deps:['jquery','datatables.net'] } } }); require(['dbBootstrap'],function(){ var util = {
table:{}, //獲取列表信息 getListInfo:function(){ var listUrl = '', base_url = window.location.host; util.table = $('#data_table').dataTable({ language: { "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": ": 以降序排列此列" } }, "pagingType":'full_numbers', // 分頁 "aoColumnDefs": [{"bSortable":false, "aTargets": [4]}], //第5列不排序，其余排序 "order":[[3,'desc']], // 默認按時間倒序 排序 //ajax請求 'processing':true, 'serverSide':true, 'ajax':{ 'url':listUrl, 'dataSrc': function(result) { if(result && result.data && !$.isEmptyObject(result.data)){ return result.data; }else{ return []; } } }, 'columns':[ // 表格數據是obj是映射顯示 {data:'id'}, {data:'name'}, {data:'task'}, {data:'time'}, {data:function(data){ if(data && data.status && data.status==='pending'){ return '<a class="pending">進行中</a>'; } return '<a class="link-text" href="http://'+base_url+'/detail?id='+data.id+'">查看</a>'; }} ] }); // 響應式處理，始終保持分頁、搜索等控件在表格的四個角落 var el = ['data_table_length','data_table_filter','data_table_info','data_table_paginate']; for(var i=0, len=el.length; i<len; i++){ $('#'+el[i]).parent().removeClass('col-sm-6').addClass('col-xs-6'); }; } }; util.getListInfo(); });
特別注意：當需要刷新表格數據，即重新渲染表格時，只需按照下面的方式操作即可：
//刷新當表格 reload:function(flag){ setInterval(function(){ if(flag){ util.table.api().ajax.reload(null, true); // 調用插件的方法,第一個參數是回調，第二個參數是：true-重置分頁，false-保持之前的分頁信息 } },1000*10); }