Comment implémenter le chargement asynchrone de datatable

Cette fois, je vais vous montrer comment implémenter le chargement asynchrone de datatable. Quelles sont les précautions pour implémenter le chargement asynchrone de datatable. Ce qui suit est un cas pratique, jetons un coup d'œil.

code pièce du tableau

<table class="table table-bordered table-striped" id="table-main">
  <thead>
  <tr>
    <th>用户名</th>
    <th>渠道名</th>
    <th>游戏名</th>
    <th>结果</th>
    <th>耗时</th>
    <th>创建时间</th>
  </tr>
  </thead>
</table>

Chargez les données de manière asynchrone et réalisez la personnalisation

Ce qui suit est un exemple simple, où l'élément d'initialisation de table-main est l'identifiant de la table.

$('#select-game').select2(); // 初始化搜索下拉框
 
       // 表格汉化列表
  var table_lang = {
    "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": "末页",
      "sJump": "跳转"
    },
    "oAria": {
      "sSortAscending": ": 以升序排列此列",
      "sSortDescending": ": 以降序排列此列"
    }
  };
 
  //初始化表格
  var table_main = $("#table-main").dataTable({
    language:table_lang,  // 提示信息
    autoWidth: false,   // 禁用自动调整列宽
    lengthMenu: [25, 50, 100],
    stripeClasses: ["odd", "even"], // 为奇偶行加上样式，兼容不支持CSS伪类的场合
    processing: false,   // 隐藏加载提示,自行处理
    serverSide: true,   // 启用服务器端分页
    searching: true,    // 启用原生搜索
    orderMulti: true,   // 启用多列排序
    order: [],       // 取消默认排序查询,否则复选框一列会出现小箭头
    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) {
      //封装请求参数
      var param = {};
      param.limit = data.length; // 页面显示记录条数，在页面显示每页显示多少项的时候
      param.start = data.start; // 开始的记录序号
      param.page = (data.start / data.length)+1; // 当前页码
      //ajax请求数据
      $.ajax({
        type: "GET",
        url: "getRecodeList",
        cache: true, // 开启缓存
        data: param, // 传入组装的参数
        dataType: "json",
        success: function (result) {
//              console.log(result);
          //setTimeout仅为测试延迟效果
          setTimeout(function () {
            //封装返回数据
            var returnData = {};
            returnData.draw = data.draw;       // 这里直接自行返回了draw计数器,应该由后台返回
            returnData.recordsTotal = result.total;  // 返回数据全部记录
            returnData.recordsFiltered = result.total;// 后台不实现过滤功能，每次查询均视作全部结果
            returnData.data = result.data;      // 返回的数据列表
            //console.log(returnData);
            // 调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
            // 此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
            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();

Format de retour des données d'arrière-plan

{
 "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
  }
 ]
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser les autorisations utilisateur dans Vue2.0

Explication détaillée des étapes d'utilisation d'axios (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!