dataTable 从服务器获取数据源的两种表现形式
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 从服务器获取数据源的两种表现形式相关推荐
- SSM整合之Mybatis笔记( MyBatis获取参数值的两种方式(重要))(P020—P025)
P20 MyBatis获取参数值的两种方式(重要) 一.什么叫做获取取参数值的两种方式 以后在我们开发是方向B/S系统,然后我们现在要做的任务通过浏览器/页面/视图 收集用户输入的一些数据,然后把这些 ...
- MyBatis获取参数值的两种方式以及传参情况
MyBatis获取参数值的两种方式 MyBatis获取参数值的两种方式:${}和#{} 传参情况 演示环境 1.单个字面量类型的参数 2.多个字面量类型的参数 3.map集合类型的参数 4.实体类类型 ...
- 微信小程序获取openid的两种方式
这篇文章是关于获取openid的两种方式,自己在学着用微信小程序来写一个小东西玩 首先我们要到小程序官网获取到自己的appid和Appsecret 如图 第一种:直接在微信小程序中获取,不需要通过后台 ...
- 职称以考代评的专业有哪些_湖南中级职称证书获取方式有两种:评审和以考代评...
职称是对一个人的技术水平.熟练程度.工作实绩等业务技术方面的全面评价. 对大部分人来说,职称象征着一定的身份.地位. 职称实际获取方式有四种:认定.评审.以考代评和职业资格对应职称. 认定和职业资格对 ...
- 浏览器访问云服务器上图片的两种方法
浏览器访问云服务器上图片的两种方法 1. Tomcat方式 打开tomcat的conf目录下配置文件server.xml 添加以下内容: <Context docBase="/home ...
- c语言中,关于指针变量前的*有两种表现形式:
c语言中,关于指针变量前的*有两种表现形式: 变量定义时 如:char *pc; int *pi; 这里的*是跟随变量类型(char, int...)的,表示指针变量类型,是个标识符 变量引 ...
- python有哪两种表现形式小练笔_爱有两种表现形式小练笔400字
爱,我们每个人都需要.爱,大都来自父母,但是我来自父母的爱是两种不同的爱:爸爸是严肃的爱,妈妈是鼓励的爱. 不久前,我考试得了九十五分.我回家一冲进家门就对妈妈喊:"妈妈,我考试考了九十五分 ...
- xp系统更新的服务器失败是怎么回事啊,xp系统显示“服务器错误500”的两种解决方法...
xp纯净版系统在浏览网页的时候会遇到这样或者那样的错误,比如经常遇到404错误,503错误,怎么回事呢?这些都是HTTP的状态码,不同的状态码代表不同的错误类型,有些不常用的状态码便没有详细的记载,例 ...
- 关于EL表达式获取参数的两种方法
今天演示EL表达式的时候发现自己jsp的基础实在是薄弱,在这个很简单的问题上迷惑了很久. 首先在看遇到的问题: 在浏览器地址输入,表示传入一个参数test,值为123 http://localhost ...
最新文章
- 常用js代码整理、收集
- Matplotlib实例教程 | 统计DataFrame中文本长度分布(条形统计图)
- python 排序_Python 排序了解一下?
- 安装rabbitMQ delayed-messaged
- [转载] python数学编程书推荐_图书推荐:《Python数学编程》
- 关于easyx库中怎样贴出透明图片
- 如何在 Windows 10/11 下通过命令卸载产品许可密钥
- 线程池,是时候做个了结了!
- 领存技术至强 E5-2648L 6U VPX 通用密集计算刀片
- shell中let 命令与Expr命令介绍
- 2万行java代码的系统_PublicCMS: 200万行代码修改 打造安全快速的java cms 轻松支撑千万数据、千万PV;目前已经拥有全球0.0002%的用户,诸多明星网站案例。...
- 前端基础(二十七):面向对象基础
- R软件-ggplot2 画火山图
- dnf剑魂buff等级上限_DNF剑魂职业定位、装备、加点、猴戏、新老换装详解
- 修改so文件的关键方法
- win10系统怎么安装显卡驱动,驱动人生详细教程
- 浅谈Altera和Xilinx的FPGA区别
- error C2338: /RTCc rejects conformant code错误解决
- 国外主流网站分析工具介绍
- 通信原理简明教程 | 信号、信道与噪声
热门文章
- 最长连续子序列nlogn算法
- 快手用旺旺瓶子做机器人_用平底锅做西多士,早餐不发愁,孩子三天两头点名吃,简单快手...
- python import io_详解Python IO编程
- 非线性回归模型java_R中的非线性多元回归
- eclipse lombok插件安装_Eclipse-安装Freemarker插件
- 维护人员工具_防爆配电箱检修规范和维护保养
- 主存储器是现代计算机系统的数据传送中心,第2章计算机体系结构习与题答案.doc...
- linux oracle 关闭防火墙,Linux 下关闭防火墙设置
- 能量平衡_500kA 铝电解槽的能量平衡分析
- app图标圆角角度_?APP图标造型分析