1 var table = $('#example1').DataTable({
 2         "processing": true,//加载效果
 3         "autoWidth": false,
 4        "iDisplayLength": 25,//设置每页要显示的条数
 5         "lengthMenu": [[25, 50, 100], [25, 50, 100]],//设置每页显示条数的下来列表
 6          "serverSide": true,//从服务器调取数据源时设置为true
 7          "ajax":{
 8               "url":接口地址',
 9               "data":function(b){//传参以此作为搜索条件
10                       b.taskId=$("#tId").val();
11                      b.state=$("#state").val();
12                   //    alert(b.positionId);
13                   },
14                "beforeSend":function(xhr){//加载loading
15                   var index = layer.load(1, {
16                       shade: [0.5,'#000'] //0.5透明度的黑色背景
17                     });
18               },
19
20                "complete":function(xhr){//加载完成之后关闭loading
21                             layer.closeAll('loading');
22                         layer.msg('加载完成');
23
24                    }
25           },
26           "columns": [// columns 用来配置具体列的属性
27               {"data":"aid","bSearchable":false,"visible":false},
28             {"data":  function ( row, type, set ) {//属性方法可以自定义显示方式
29                 return  "<a href='apkUpdate.html?aid=" + row.aid + "'>"+row.customName+"</a>";
30             },"bSearchable":true},
31             {"data": "advertisersName","bSearchable":false},
32             {"data": "taskName","bSearchable":true},
33             {"data": function ( row, type, set ) {
34                 return "<a target=\"_blank\" href='apkIncomeList.html?aid=" + row.aid + "'> <span class=\"glyphicon glyphicon-usd\"></span></a>";
35
36             },"bSearchable":true},
37             {"data": "limited","bSearchable":false},
38             {"data": function ( row, type, set ) {
39                 //处理时间戳
40                 return $.myTime.UnixToDate(row.startDate);
41
42             } ,"bSearchable":false},
43             {"data": function ( row, type, set ) {
44                 //处理时间戳
45                 return $.myTime.UnixToDate(row.endDate);
46
47             } ,"bSearchable":false},
48             {"data": "startTime","bSearchable":false},
49             {"data": "endTime","bSearchable":false},
50             {"data": function ( row, type, set ) {
51                 if(row.state==1){
52                     return "开";
53                 }else if(row.state==2){
54                     return "关";
55                 }else{
56                     return "临时";
57                     };
58
59
60             } ,"bSearchable":false},
61             {"data": function ( row, type, set ) {
62                     return "<a href=\""+row.apkUrl+"\" title=\""+row.apkUrl+"\"><span class=\"glyphicon glyphicon-download-alt\"></span></a>";
63                 } ,"bSearchable":false}
64           ],
65           "columnDefs": [//自定义列 columnDef s 属性
66                  {
67                      "targets": [0,1,2,3,4,5,6,7,8,9,10,11],
68                        "orderable":false
69                    },
70
71             {
72               "targets": [12],
73               "data":"aid",
74               "render": function(data, type, full) {
75                 return "<a href='apkUpdate.html?aid=" + data + "'>修改</a>";
76               }
77             }
78           ],
79           "language": {//设置显示的内容
80               'sSearch': '数据筛选:',
81                  "lengthMenu": "每页显示 _MENU_ 项记录",
82                 "zeroRecords": "没有符合项件的数据...",
83                 "info": "当前页数 _PAGE_ ,共有 _PAGES_页",
84                 "infoEmpty": "显示 0 至 0 共 0 项",
85                  "infoFiltered": ""
86         },
87         //在 dom 里面不配置 f ,可以隐藏掉默认的搜索框
88           "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer"ip>'
89
90         });
91      $.fn.dataTable.ext.errMode = 'throw';//当出现问题时不弹出
92
93 $('#apkBtn').bind('click',//自定义搜索框在按下回车键时搜索数据
94             function(e) {
95                 var pos=$("#apkInput").val();
96                 table.search(pos).draw();//搜索
97             });  

通过ajax先加载数据之后初始化dataTable,与上面的区别就是,后初始化dataTable,排序和搜索都是客户端处理。当然分页需要自己写了。

 1  $.ajax({
 2         url:"url",
 3         type: "GET",
 4         success: function(ret) {
 5           if (ret.CODE == "201") {
 6            var channelTaskLogModels = ret.data;
 7
 8            for (var i = 0; i < channelTaskLogModels.length; i++) {
 9             $("#example1").append("<tr><td>" + channelTaskLogModels[i].appName + "</td><td>" + channelTaskLogModels[i].points + "</td><td>" + $.myTime.UnixToDate(channelTaskLogModels[i].createTime) + "</td><td><span class='channel'>" + channelTaskLogModels[i].address + "</span></td></tr>");
10           }
11               $('#example1').dataTable({
12                 "iDisplayLength": 25,
13                 "lengthMenu": [[25, 50, 100], [25, 50, 100]],
14                 "paging":false,
15                 "language": {
16                   'sSearch': '数据筛选:',
17                   "lengthMenu": "每页显示 _MENU_ 项记录",
18                   "zeroRecords": "没有符合项件的数据...",
19                   "info": "当前页数 _PAGE_ ,共有 _PAGES_页",
20                   "infoEmpty": "显示 0 至 0 共 0 项",
21                   "infoFiltered": "111"
22                 },
23               });
24             }
25         },
26         error: function(xhr, status, msg) {
27           layer.msg('玩命加载中..');
28         }
29       });

转载于:https://www.cnblogs.com/hyywaq/p/5919435.html

dataTable 从服务器获取数据源的两种表现形式相关推荐

  1. SSM整合之Mybatis笔记( MyBatis获取参数值的两种方式(重要))(P020—P025)

    P20 MyBatis获取参数值的两种方式(重要) 一.什么叫做获取取参数值的两种方式 以后在我们开发是方向B/S系统,然后我们现在要做的任务通过浏览器/页面/视图 收集用户输入的一些数据,然后把这些 ...

  2. MyBatis获取参数值的两种方式以及传参情况

    MyBatis获取参数值的两种方式 MyBatis获取参数值的两种方式:${}和#{} 传参情况 演示环境 1.单个字面量类型的参数 2.多个字面量类型的参数 3.map集合类型的参数 4.实体类类型 ...

  3. 微信小程序获取openid的两种方式

    这篇文章是关于获取openid的两种方式,自己在学着用微信小程序来写一个小东西玩 首先我们要到小程序官网获取到自己的appid和Appsecret 如图 第一种:直接在微信小程序中获取,不需要通过后台 ...

  4. 职称以考代评的专业有哪些_湖南中级职称证书获取方式有两种:评审和以考代评...

    职称是对一个人的技术水平.熟练程度.工作实绩等业务技术方面的全面评价. 对大部分人来说,职称象征着一定的身份.地位. 职称实际获取方式有四种:认定.评审.以考代评和职业资格对应职称. 认定和职业资格对 ...

  5. 浏览器访问云服务器上图片的两种方法

    浏览器访问云服务器上图片的两种方法 1. Tomcat方式 打开tomcat的conf目录下配置文件server.xml 添加以下内容: <Context docBase="/home ...

  6. c语言中,关于指针变量前的*有两种表现形式:

     c语言中,关于指针变量前的*有两种表现形式: 变量定义时 如:char *pc;   int *pi; 这里的*是跟随变量类型(char, int...)的,表示指针变量类型,是个标识符 变量引 ...

  7. python有哪两种表现形式小练笔_爱有两种表现形式小练笔400字

    爱,我们每个人都需要.爱,大都来自父母,但是我来自父母的爱是两种不同的爱:爸爸是严肃的爱,妈妈是鼓励的爱. 不久前,我考试得了九十五分.我回家一冲进家门就对妈妈喊:"妈妈,我考试考了九十五分 ...

  8. xp系统更新的服务器失败是怎么回事啊,xp系统显示“服务器错误500”的两种解决方法...

    xp纯净版系统在浏览网页的时候会遇到这样或者那样的错误,比如经常遇到404错误,503错误,怎么回事呢?这些都是HTTP的状态码,不同的状态码代表不同的错误类型,有些不常用的状态码便没有详细的记载,例 ...

  9. 关于EL表达式获取参数的两种方法

    今天演示EL表达式的时候发现自己jsp的基础实在是薄弱,在这个很简单的问题上迷惑了很久. 首先在看遇到的问题: 在浏览器地址输入,表示传入一个参数test,值为123 http://localhost ...

最新文章

  1. 常用js代码整理、收集
  2. Matplotlib实例教程 | 统计DataFrame中文本长度分布(条形统计图)
  3. python 排序_Python 排序了解一下?
  4. 安装rabbitMQ delayed-messaged
  5. [转载] python数学编程书推荐_图书推荐:《Python数学编程》
  6. 关于easyx库中怎样贴出透明图片
  7. 如何在 Windows 10/11 下通过命令卸载产品许可密钥
  8. 线程池,是时候做个了结了!
  9. 领存技术至强 E5-2648L 6U VPX 通用密集计算刀片
  10. shell中let 命令与Expr命令介绍
  11. 2万行java代码的系统_PublicCMS: 200万行代码修改 打造安全快速的java cms 轻松支撑千万数据、千万PV;目前已经拥有全球0.0002%的用户,诸多明星网站案例。...
  12. 前端基础(二十七):面向对象基础
  13. R软件-ggplot2 画火山图
  14. dnf剑魂buff等级上限_DNF剑魂职业定位、装备、加点、猴戏、新老换装详解
  15. 修改so文件的关键方法
  16. win10系统怎么安装显卡驱动,驱动人生详细教程
  17. 浅谈Altera和Xilinx的FPGA区别
  18. error C2338: /RTCc rejects conformant code错误解决
  19. 国外主流网站分析工具介绍
  20. 通信原理简明教程 | 信号、信道与噪声

热门文章

  1. 最长连续子序列nlogn算法
  2. 快手用旺旺瓶子做机器人_用平底锅做西多士,早餐不发愁,孩子三天两头点名吃,简单快手...
  3. python import io_详解Python IO编程
  4. 非线性回归模型java_R中的非线性多元回归
  5. eclipse lombok插件安装_Eclipse-安装Freemarker插件
  6. 维护人员工具_防爆配电箱检修规范和维护保养
  7. 主存储器是现代计算机系统的数据传送中心,第2章计算机体系结构习与题答案.doc...
  8. linux oracle 关闭防火墙,Linux 下关闭防火墙设置
  9. 能量平衡_500kA 铝电解槽的能量平衡分析
  10. app图标圆角角度_?APP图标造型分析