datatables的学习总结
$(document).ready(function() { var oTable= $('#dataTables-example').DataTable({
// searching : false,//去掉搜索框方法一: 百度上的方法,但是我用这没管用
// bFilter: false, //去掉搜索框方法三:这种方法可以
bLengthChange: false, //去掉每页显示多少条数据方法
responsive: true,
language: {
"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": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
fnServerParams:function(data){ //修改参数 }, serverSide: true, //开启服务器模式
ajax : function(data, callback,settings) {//ajax配置为function,手动调用异步查询 $.ajax({
type : "post",
url : "<?=base_url('user/userListData')?>",
cache : false, //禁用缓存
data : data, //传入已封装的参数
dataType : "json",
success : function(res) {
// console.log(res);
// callback(res);
setTimeout(
function() { //封装返回数据,这里仅演示了修改属性名
var returnData = {};
returnData.draw = res.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = res.recordsTotal;
returnData.recordsFiltered = res.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = res.data;
//关闭遮罩
//$wrapper.spinModal(false);
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
},
200);
},
error : function(XMLHttpRequest, textStatus,errorThrown) {
$.Style.alert('danger','系统错误,请稍后再试!');
}
});
},
// data: data,
columns: [
{ data: "id" },
{ data: "user_login" },
{ data: "user_sex" },
{ data: "user_ctime" },
{ data: "user_last_ctime" },
{ data: "user_last_ip" },
{
data : "user_status",
render : function(data, type,row) {
if (data == 1) {
return "正常";
} else if(data==2) {
return "未验证";
}else{
return '禁用';
} }
},
{ data: "" }
],
"columnDefs": [{
"targets": [ -1 ],
"searchable": false,
"orderable": false,
"data": null,
"defaultContent": "i am not empty",
"render": function ( data, type, row ) {
console.log(row['id'])
return "<a href='+data+' class='btn btn-info btn-xs btn-grad'>编辑</a>";
}
}]
}); });
$(document).ready(function() { var oTable= $('#dataTables-example').DataTable({
// searching : false,//去掉搜索框方法一: 百度上的方法,但是我用这没管用
// bFilter: false, //去掉搜索框方法三:这种方法可以
bLengthChange: false, //去掉每页显示多少条数据方法
responsive: true,
language: {
"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": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
fnServerParams:function(data){ //修改参数 }, serverSide: true, //开启服务器模式
ajax : function(data, callback,settings) {//ajax配置为function,手动调用异步查询 $.ajax({
type : "post",
url : "<?=base_url('user/userListData')?>",
cache : false, //禁用缓存
data : data, //传入已封装的参数
dataType : "json",
success : function(res) {
// console.log(res);
// callback(res);
setTimeout(
function() { //封装返回数据,这里仅演示了修改属性名
var returnData = {};
returnData.draw = res.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = res.recordsTotal;
returnData.recordsFiltered = res.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = res.data;
//关闭遮罩
//$wrapper.spinModal(false);
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
},
);
},
error : function(XMLHttpRequest, textStatus,errorThrown) {
$.Style.alert('danger','系统错误,请稍后再试!');
}
});
},
// data: data,
columns: [
{ data: "id" },
{ data: "user_login" },
{ data: "user_sex" },
{ data: "user_ctime" },
{ data: "user_last_ctime" },
{ data: "user_last_ip" },
{
data : "user_status",
render : function(data, type,row) {
if (data == ) {
return "正常";
} else if(data==) {
return "未验证";
}else{
return '禁用';
} }
},
{ data: "" }
],
"columnDefs": [{
"targets": [ -1 ],
"searchable": false,
"orderable": false,
"data": null,
"defaultContent": "i am not empty",
"render": function ( data, type, row ) {
console.log(row['id'])
return "<a href='+data+' class='btn btn-info btn-xs btn-grad'>编辑</a>";
}
}]
}); });
datatables的学习总结的更多相关文章
- dataTables 插件学习整理
在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...
- DataTables使用学习记录
导入 <link rel="stylesheet" type="text/css" href="DataTables-1.10.12/media ...
- dataTables的学习笔记 -- 未开启服务器数据模式
官方网站:http://www.datatables.net/ (1)未开启服务器数据模式(即"bServerSide" : false),数据会从后台直接全部获取,然后在前台全部 ...
- DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程
一.DataTables 个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- datatables 学习笔记1 基础篇
本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...
- jquery datatables 学习笔记
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...
- JQuery DataTables学习
1.Datatables简单介绍 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,根据的基础逐步增强,这将添加先进的互动控制.支持不论什么HTML表格. 主要特点: 自己主动 ...
- JQuery Datatables Columns API 参数详细说明
---恢复内容开始--- Data Tables: http://datatables.NET/ Version: 1.10.0 Columns说明 虽然我们可以通过DOM直接获取DataTables ...
随机推荐
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- selenium - webdriver - Keys类(键盘操作)
Keys()类提供了键盘上几乎所有按键的方法,这个类可用来模拟键盘上的按键,包括各种组合键,如 Ctrl+A, Ctrl+X,Ctrl+C, Ctrl+V 等等 from selenium impor ...
- 洛谷P4198 楼房重建 (分块)
洛谷P4198 楼房重建 题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题, ...
- Python数据处理和数据可视化
工具1:numpy 下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 入门文档:https://docs.scipy.org/doc/nump ...
- HDU4738:Caocao's Bridges(求桥)
Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- HDU3308 线段树(区间合并)
LCIS Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Nginx安装(官网翻译)
转载自:https://www.nginx.com/resources/wiki/start/topics/tutorials/install/ 二进制版本预包装的Linux和BSD大多数Linux发 ...
- 这个随笔用用来放一些好的思想和思考方式(暂时secret)
一: 给你一个只有4和7的数字,求这是第几个幸运数字? 思路: 我们把4映射成0,7映射成1,然后就如下枚举:0,1,00,01,10,11.因为是映射的,所以可以前导0,然后我们就会知道给出的那个数 ...
- 2015/9/4 Python基础(8):映射和集合类型
Python里唯一的映射类型是字典.映射类型对象里,hash值(key)和指向的对象(值)是一对多的关系.字典对象是可变的,这一点上很像列表,它也可以存储任意个数任意类型的Python对象,其中包括容 ...
- Apache 文件服务器
1.安装apache服务器yum install httpd 2.启动httpd服务service httpd start 3.查看httpd服务器的版本httpd -v 4.修改访问端口和文件路径, ...