使用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 相关文章推荐
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
原生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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python中lambda()的用法
2017/11/16 Python
Python单元测试实例详解
2018/05/25 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
django中forms组件的使用与注意
2019/07/08 Python
python 实现让字典的value 成为列表
2019/12/16 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
支教自我鉴定
2014/01/18 职场文书
社区文化建设方案
2014/05/02 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
老公出轨后的保证书
2015/05/08 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
高二语文教学反思
2016/02/16 职场文书
如何在Python项目中引入日志
2021/05/31 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python