使用DataTable插件实现异步加载数据


Posted in Javascript onNovember 19, 2017

table部分代码

<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>

异步加载数据并实现定制化

下面是简单例子, 其中 table-main 的初始化元素为table的id。

$('#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();

后台数据返回格式

{
 "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
  }
 ]
}
Javascript 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
微信小程序实现左右列表联动
May 19 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 #Javascript
gulp安装以及打包合并的方法教程
Nov 19 #Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 #Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 #Javascript
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
You might like
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
pytorch简介
2020/11/11 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
夏季药店促销方案
2014/08/22 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
罗马假日观后感
2015/06/08 职场文书