使用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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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
深入理解PHP中的global
2014/08/19 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python实现批量压缩图片
2018/01/25 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python实现计算器简易版
2020/12/17 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
自我评价格式
2014/01/06 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年资料员工作总结
2015/04/25 职场文书
python实现网络五子棋
2021/04/11 Python