datatables日常使用集合
datatables CDN链接地址:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
1.datatables初始化
开发中许多页面都需要datatables,很多设置都是重复的,所以对其默认值做了统一设置。
默认值设置:
//默认错误模式是alert出异常信息,非常不友好,改成none后将不显示alert窗口
$.fn.dataTable.ext.errMode = 'none';
// 覆盖默认设置
$.extend($.fn.dataTable.defaults, {
paging : true, // 分页
lengthChange : false, // 长度
searching : false, // 是否显示默认搜索
info : true, // 是否显示列表信息
autoWidth : true, // 是否自动宽度
processing : true, // 是否显示'处理中'
serverSide : true, // 是否是服务端处理
ordering : true, // 是否支持排序
ajax : {
dataSrc : 'list', // 重置返回的JSON消息数据头,datatables默认是'data'
type : 'POST', // 默认是post提交
data : function(data) {
// 自动获得form 表单的数据,并设置到data中提交查询
var arrayInput = $("form :input");
if (arrayInput != undefined && arrayInput.length > 0) {
for (var i = 0; i < arrayInput.length; i++) {
data[arrayInput[i].id] = arrayInput[i].value;
}
}
// 获得orderby条件,设置到orderby中提交查询
var orderBy = '';
for (var i = 0; i < data.order.length; i++) {
order = data.order[i];
column = data.columns[order.column];
orderBy += ',' + column.data + " " + order.dir;
}
if (orderBy != '') {
orderBy = orderBy.substr(1);
}
data.orderBy = orderBy;
// 删除内置的列信息,排序信息,搜索信息
// 不删除会全部提交到后台,数据量很大
delete (data.columns);
delete (data.order);
delete (data.search);
}
},
language : {
decimal : "",
emptyTable : "查无数据",
info : "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
infoEmpty : "当前显示第 0 至 0 项,共 0 项",
infoFiltered : "(由 _MAX_ 项结果过滤)",
infoPostFix : "",
thousands : ",",
lengthMenu : "每页 _MENU_ 项",
loadingRecords : "载入中...",
processing : "处理中...",
search : "搜索:",
zeroRecords : "没有匹配结果",
paginate : {
"first" : "首页",
"previous" : "上页",
"next" : "下页",
"last" : "末页"
},
aria : {
"sortAscending" : ": 以升序排列此列",
"sortDescending" : ": 以降序排列此列"
}
},
drawCallback : function() {
// 表格绘画完成后,自动添加第一个行“序号”列
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;
var columns = api.context[0].aoColumns;
var columnIndex = -1;
for (var i = 0; i < columns.length; i++) {
if (columns[i].title == '序号') {
columnIndex = i;
break;
}
}
if (columnIndex != -1) {
api.column(columnIndex).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
}
}
});
调用:
// 初始化表格
function initTable() {
var i = -1;
table = $('#dataTable').DataTable(
{
ajax : {
url : prefix + "/list2/"
},
columnDefs : [
{
targets : ++i,
title : '',
data : null,
render : function(data, type, row, meta) {
var result = '<input type="checkbox" value="'
+ row.dictID + '" />';
return result;
},
orderable : false
}, {
//默认值设置JS中会判断此列是否存在
title : "序号",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : null,
}, {
title : "字典ID",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : "dictID",
}, {
title : "数据字典名称",
"searchable" : false,
"orderable" : true,
"targets" : ++i,
data : "dictName",
}, {
title : "数据字典值",
"searchable" : false,
"orderable" : true,
"targets" : ++i,
data : "dictValue",
}],
order : [ [ 5, 'asc' ] ]
});
}
2.即时搜索
我的列表原来没有即时搜索效果,后来考虑把搜索条件做统一获得和提交,不要在各自的JS中每次提交。
就给搜索表单加一个id,且名字为search。这个时候发现就产生了即时搜索的效果,只要表单获得焦点或有输入。
列表就会自动带上条件查询。
3.刷新表格,保持在当前页
ajax.reload(null, false); //刷新后还保持在当前页面
ajax.reload(); //刷新后自动到第一页
官方链接:https://datatables.net/reference/api/ajax.reload()
4.列隐藏
通过列属性:className
示例代码:
columnDefs : [
{
targets : ++i,
title : '',
data : null,
orderable : false,
className : $('isValid').val() == '2' ? ''
: 'hidden',
render : function(data, type, row, meta) {
var result = '<input type="checkbox" value="'
+ row.detailID + '" />';
return result;
}
}, {
title : "序号",
"searchable" : false,
"orderable" : false,
"targets" : ++i,
data : null,
}]
5.销毁table
table.destroy(); // table是datatable的实例变量
$('#dataTable').empty(); // 清空table的html,这一步必须要有,否则会清除不干净
datatables日常使用集合的更多相关文章
- 一些日常工具集合(C++代码片段)
一些日常工具集合(C++代码片段) ——工欲善其事,必先利其器 尽管不会松松松,但是至少维持一个比较小的常数还是比较好的 在此之前依然要保证算法的正确性以及代码的可写性 本文依然会持久更新,因为一次写 ...
- RichTextBox控件日常使用集合
1.RichTextBox控件自动滚动到底部 richTextBox1.ScrollToCaret(); //将控件的内容滚动到当前光标位置
- Select2日常操作集合
1.获得多选值 var arraySelected = $('#carTypes').select2("data"); var carTypesDesc = ''; for (va ...
- 用Stream流轻易的收集数据
前言 在日常使用集合时,我们通常使用迭代器来处理集合中的数据,假如有一个用户列表 List,我们想要将用户按照性别分组生成 Map<String, List>.需要遍历 List,然后判断 ...
- 程序猿的日常——Java中的集合列表
列表对于日常开发来说实在是太常见了,以至于很多开发者习惯性的用到数组,就来一个ArrayList,根本不做过多的思考.其实列表里面还是有很多玩法的,有时候玩不好,搞出来bug还得定位半天.所以这里就再 ...
- MongoDB通过Shell 实现集合的日常归档
1.MongoDB数据归档的意义 和其他类型的数据库一样,归档对MongoDB同样重要.通过归档,可以保持集合中合适的数据量,对数据库的性能是一种保障,也就是大家常说的数据冷热分离. 同时,归档对数据 ...
- PHP 日常开发过程中的bug集合(持续更新中。。。)
PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0' 是 ...
- Java8之Stream 集合聚合操作集锦(含日常练习Demo)
Stream 是用函数式编程方式在集合类上进行复杂操作的工具,其集成了Java 8中的众多新特性之一的聚合操作,开发者可以更容易地使用Lambda表达式,并且更方便地实现对集合的查找.遍历.过滤以及常 ...
- 【日常笔记】datatables表格数据渲染
现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据 使用datatables可以更方便的来渲染数据 [中文api]http://datatables.club/index.htm ...
随机推荐
- 微信小程序入门教程(一)API接口数据记录
今天测试用小程序调用API接口,发现有些数据打印都是对象,怎么全部打印详细点来 小程序代码: httpsearch: function (name, offset, type, cb) { wx.re ...
- springBoot打包发布项目------jar包
这两年微服务很流行,这里简单介绍一下如何将自己使用idea写的微服务打包成一个可执行的jar包,并发布到linux服务器的步骤.因为spring boot有内置的tomcat所以一般使用内置的tomc ...
- chart.js angular组件封装(ng6)、实战配置、插件编写
前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...
- VS2017 新建win32控制台应用
VS2017的Win32应用比较隐蔽添加新项目,选择项目向导,点击下一步即可看到.
- nmap学习之nmap -sP 【目标】
一.通过arp包判断局域网内的主机状态 二.对于局域网外的主机通过向主机 1)发送普通ICMP请求包[类型字段为8,代码字段为0]: 2)发送时间戳ICMP请求包[类型字段为13,代码字段为0]: 3 ...
- html页面设置<span>的高度和宽度
<span>标签属于行内元素(inline),所以无法设置高度和宽度:如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block): 1 span{di ...
- jQuery滑动
通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown(speed,callback):用于向下滑动元素. slideUp(speed,callback ...
- nginx 基于uwsgi部署Django
1.安装nginx yum install -y nginx(需要epel源) 2.安装环境 可以考虑使用虚拟化环境,本处不再使用 3.安装uwsgi yum groupinstall "D ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- netty长链接保存方案
架构 client router server zk redis 对于router: 保存客户端和服务器对 redis clientid : serverip & port 对于server ...