使用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实现拆分姓名的方法(纯JS版)
May 08 Javascript
javascript操作referer详细解析
Mar 10 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Vue3 源码导读(推荐)
Oct 14 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框架的理由
2015/09/26 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Vue实现选择城市功能
2017/05/27 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
使用Python生成XML的方法实例
2017/03/21 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
舞蹈比赛获奖感言
2014/02/04 职场文书
施工安全责任书
2014/04/14 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
继承权公证书范本
2015/01/23 职场文书
平遥古城导游词
2015/02/03 职场文书
法律服务所工作总结
2015/08/10 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang