table部分代碼

<table class="table table-bordered table-striped" id="table-main">  <thead>  <tr>    <th>用戶名</th>    <th>渠道名</th>    <th>游戲名</th>    <th>結(jié)果</th>    <th>耗時</th>    <th>創(chuàng)建時間</th>  </tr>  </thead></table>

異步加載數(shù)據(jù)并實現(xiàn)定制化

下面是簡單例子, 其中 table-main 的初始化元素為table的id。

$('#select-game').select2(); // 初始化搜索下拉框        // 表格漢化列表  var table_lang = {    "sProcessing": "處理中...",    "sLengthMenu": "每頁 _MENU_ 項",    "sZeroRecords": "沒有匹配結(jié)果",    "sInfo": "當(dāng)前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",    "sInfoEmpty": "當(dāng)前顯示第 0 至 0 項，共 0 項",    "sInfoFiltered": "(由 _MAX_ 項結(jié)果過濾)",    "sInfoPostFix": "",    "sSearch": "搜索:",    "sUrl": "",    "sEmptyTable": "表中數(shù)據(jù)為空",    "sLoadingRecords": "載入中...",    "sInfoThousands": ",",    "oPaginate": {      "sFirst": "首頁",      "sPrevious": "上頁",      "sNext": "下頁",      "sLast": "末頁",      "sJump": "跳轉(zhuǎn)"    },    "oAria": {      "sSortAscending": ": 以升序排列此列",      "sSortDescending": ": 以降序排列此列"    }  };   //初始化表格  var table_main = $("#table-main").dataTable({    language:table_lang,  // 提示信息    autoWidth: false,   // 禁用自動調(diào)整列寬    lengthMenu: [25, 50, 100],    stripeClasses: ["odd", "even"], // 為奇偶行加上樣式，兼容不支持CSS偽類的場合    processing: false,   // 隱藏加載提示,自行處理    serverSide: true,   // 啟用服務(wù)器端分頁    searching: true,    // 啟用原生搜索    orderMulti: true,   // 啟用多列排序    order: [],       // 取消默認排序查詢,否則復(fù)選框一列會出現(xiàn)小箭頭    renderer: "bootstrap", // 渲染樣式：Bootstrap和jquery-ui    pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers    columnDefs: [{      "targets": 'nosort', // 列的樣式名      "orderable": false  // 包含上樣式名‘nosort'的禁止排序    }],    ajax: function (data, callback, settings) {      //封裝請求參數(shù)      var param = {};      param.limit = data.length; // 頁面顯示記錄條數(shù)，在頁面顯示每頁顯示多少項的時候      param.start = data.start; // 開始的記錄序號      param.page = (data.start / data.length)+1; // 當(dāng)前頁碼      //ajax請求數(shù)據(jù)      $.ajax({        type: "GET",        url: "getRecodeList",        cache: true, // 開啟緩存        data: param, // 傳入組裝的參數(shù)        dataType: "json",        success: function (result) {//              console.log(result);          //setTimeout僅為測試延遲效果          setTimeout(function () {            //封裝返回數(shù)據(jù)            var returnData = {};            returnData.draw = data.draw;       // 這里直接自行返回了draw計數(shù)器,應(yīng)該由后臺返回            returnData.recordsTotal = result.total;  // 返回數(shù)據(jù)全部記錄            returnData.recordsFiltered = result.total;// 后臺不實現(xiàn)過濾功能，每次查詢均視作全部結(jié)果            returnData.data = result.data;      // 返回的數(shù)據(jù)列表            //console.log(returnData);            // 調(diào)用DataTables提供的callback方法，代表數(shù)據(jù)已封裝完成并傳回DataTables進行渲染            // 此時的數(shù)據(jù)需確保正確無誤，異常判斷應(yīng)在執(zhí)行此回調(diào)前自行處理完畢            callback(returnData);            cut_td($("#table-main"), 40); // 表格截斷           }, 200);        }      });    },    //列表表頭字段    columns: [      { "data": "user_name" },      { "data": "channel" },      { "data": "game" },      { "data": "status",        "render": function(data){          var status_name = '';          switch(data)          {            case 0: status_name = '未完成'; break;            case 1: status_name = '腳本錯誤'; break;            case 2: status_name = '成功'; break;            case 3: status_name = '測試通過'; break;            default : status_name = '未知'; break;          }          return status_name;        }},      { "data": "cast_time",        "render" : function(data){          if (data)          {            return data + 's';          }          else          {            return '廢棄';          }        }},      { "data": "format_created_at" },    ]  }).api();