使用DataTable插件實現(xiàn)異步加載數(shù)據(jù)

更新時間：2017年11月19日 11:43:22 作者：悠悠

本文給大家分享的是Jquery+dataTable插件來實現(xiàn)異步加載數(shù)據(jù)的示例代碼，非常實用，有需要的小伙伴可以參考下

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": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
    "sInfoEmpty": "當前顯示第 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,   // 啟用服務器端分頁
    searching: true,    // 啟用原生搜索
    orderMulti: true,   // 啟用多列排序
    order: [],       // 取消默認排序查詢,否則復選框一列會出現(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; // 當前頁碼
      //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ù)器,應該由后臺返回
            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ù)需確保正確無誤，異常判斷應在執(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();

后臺數(shù)據(jù)返回格式

{
 "total": 234,
 "per_page": "25",
 "current_page": 1,
 "last_page": 10,
 "next_page_url": "http://local.dgc_sdkops.com/monitor/log_pack/getRecodeList?page=2",
 "prev_page_url": null,
 "from": 1,
 "to": 25,
 "data": [
  {
   "id": 128,
   "user_id": 1,
   "task_id": "package_128_113",
   "channel_version_id": 128,
   "game_version_id": 113,
   "extend_id": 0,
   "type": "pack",
   "status": 2,
   "remark": "",
   "cast_time": 93475,
   "created_at": "1500365068",
   "updated_at": "1500458543",
   "user_name": "admin",
   "format_created_at": "2017-07-18 16:04:28",
   "format_updated_at": "2017-07-18 16:04:28",
   "game": "x",
   "channel": "y",
   "game_id": 11290,
   "channel_id": 67
  },
  {
   "id": 240,
   "user_id": 1,
   "task_id": "package_128_113",
   "channel_version_id": 128,
   "game_version_id": 113,
   "extend_id": 0,
   "type": "pack",
   "status": 0,
   "remark": "",
   "cast_time": 0,
   "created_at": "1500458454",
   "updated_at": "1500458454",
   "user_name": "admin",
   "format_created_at": "2017-07-19 18:00:54",
   "format_updated_at": "2017-07-19 18:00:54",
   "game": "x",
   "channel": "y",
   "game_id": 11290,
   "channel_id": 67
  }
 ]
}

您可能感興趣的文章:

jquery實現(xiàn)垂直和水平菜單導航欄
這篇文章主要為大家詳細介紹了jquery實現(xiàn)垂直和水平菜單導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
解決同一頁面中兩個iframe互相調(diào)用jquery,js函數(shù)的方法
本文主要介紹了解決同一頁面中兩個iframe互相調(diào)用jquery,js函數(shù)的方法，具有很好的參考價值，需要的朋友可以看下
2016-12-12
3種不同的ContextMenu右鍵菜單實現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實現(xiàn)代碼的相關資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2016-11-11
jQuery ajax讀取本地json文件的實例
下面小編就為大家?guī)硪黄猨Query ajax讀取本地json文件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
適用于手機端的jQuery圖片滑塊動畫
這篇文章主要為大家分享了適應手機端的jQuery圖片滑塊動畫,不僅在PC瀏覽器上可以使用，而且更適合在手機端的網(wǎng)頁中使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery中大家不太了解的幾個方法
在今天這篇文章中，我們將介紹幾個jQuery的相關方法，無論你是入門級極客或者骨灰級極客，可能都會忽略這些方法的使用。希望大家會覺得有幫助！
2015-03-03
jQuery插件zTree實現(xiàn)刪除樹節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹節(jié)點的方法,結(jié)合實例形式分析了jQuery樹插件zTree針對節(jié)點的遍歷與刪除操作相關技巧,需要的朋友可以參考下
2017-03-03
jquery插件開發(fā)之實現(xiàn)google+圈子選擇功能
最近項目中用到的一個效果，類似于Google+的添加圈子功能。本文插件約8成封裝，好多功能是依據(jù)項目中實際需求寫的。若要使用，可根據(jù)自身情況擴展修改
2014-03-03
Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
jquery實現(xiàn)先淡出再折疊收起的動畫效果
這篇文章主要介紹了jquery實現(xiàn)先淡出再折疊收起的動畫效果,通過jquery鏈式操作實現(xiàn)頁面元素的漸變折疊與展開功能,非常簡單實用,需要的朋友可以參考下
2015-08-08