jQuery DataTables的简单实现
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。
主要特点:
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/jquery.dataTables.css" type="text/css" rel="stylesheet">
<title>管理员查看供应商信息</title> </head>
<body>
<table id="supplier-info" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>编号</th>
<th>全称</th>
<th>简称</th>
<th>类型</th>
<th>联系人</th>
<th>手机号码</th>
<th>联系电话</th>
<th>传真</th>
<th>邮编</th>
<th>地址</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tfoot>
<tr>
<th>编号</th>
<th>全称</th>
<th>简称</th>
<th>类型</th>
<th>联系人</th>
<th>手机号码</th>
<th>联系电话</th>
<th>传真</th>
<th>邮编</th>
<th>地址</th>
<th>备注</th>
<th>操作</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>001</td>
<td>上海真彩文具店</td>
<td>真彩</td>
<td>文具</td>
<th>吴杰</th>
<th>18223456789</th>
<th>22896789</th>
<th>010-12345678</th>
<th>350108</th>
<th>上海宝山</th>
<th>—</th>
<td>[编辑][设为无效]</td>
</tr>
<tr>
<td>002</td>
<td>上海真彩文具店</td>
<td>真彩</td>
<td>文具</td>
<th>吴杰</th>
<th>18223456789</th>
<th>22896789</th>
<th>010-12345678</th>
<th>350108</th>
<th>上海宝山</th>
<th>—</th>
<td>[编辑][设为无效]</td>
</tr>
<tr>
<td>003</td>
<td>上海真彩文具店</td>
<td>真彩</td>
<td>文具</td>
<th>吴杰</th>
<th>18223456789</th>
<th>22896789</th>
<th>010-12345678</th>
<th>350108</th>
<th>上海宝山</th>
<th>—</th>
<td>[编辑][设为无效]</td>
</tr>
</tbody>
</table>
CSS:
需要引入:jquery.dataTables.css
JavaScript:
除了引入以下两个插件以外,还需要编写下代码
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#supplier-info').dataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
); column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} ); column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
</script>
结果如下所示:
附:
jquery.js
jquery.dataTables.js
jquery.dataTables.css 资源地址:http://pan.baidu.com/s/1pLemHLL
jQuery DataTables的简单实现的更多相关文章
- Jquery DataTables warning : Requested unknown from the data source for row 0
昨天在做 Jquery DataTables 的时候,遇到的一个问题,我使用MVC,在tables上加入了一个actionlink的href.但是在运行起来的时候,报错: DataTables war ...
- JQuery Datatables(一)
最近项目中用了Bootstrap的样式风格,控件用了JQuery Datatables,主要有几下几点目标: 实现BootStrap风格的table,使用Ajax获取数据,并有勾选项 可以实现全选,单 ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)
接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (1)
我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...
- jquery datatables api (转)
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 最全的jquery datatables api 使用详解
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- jquery datatables api
原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...
- jquery.dataTables的用法
写页面前端时,使用表格的插件可以快速漂亮的排版.本例子中使用jquery.dataTables来处理table.直接来点干货 html代码如下 <table cellpadding=" ...
- jquery datatables 学习笔记
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...
随机推荐
- Sublimetext3将空格转换为Tab
最近在学习Python,从网上粘贴的代码很多缩进都是空格,这样就会导致代码执行的时候报错,因为Python是依靠缩进来判断代码层次的.我的编辑器是Sublime Text 3看了一下,原来转换成Tab ...
- OpenCV教程(42) xml/yaml文件的读写
参考资料: http://docs.opencv.org/modules/core/doc/xml_yaml_persistence.html #include "opencv2/openc ...
- flink和spark stream等框架的对比
参考这篇文章: https://www.sohu.com/a/196257023_470008 我们当时的目标就是要设计一款低延迟.exactly once.流和批统一的,能够支撑足够大体量的复杂计算 ...
- ButterKnife 注解 bindview
简介 官网:http://jakewharton.github.io/butterknife/ github:https://github.com/JakeWharton/butterknife 注意 ...
- jquery中filter(fn)的使用研究
jquery中filter(fn)给出的官方说明是: 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除 ...
- 【PAT Advanced Level】1013. Battle Over Cities (25)
这题给定了一个图,我用DFS的思想,来求出在图中去掉某个点后还剩几个相互独立的区域(连通子图). 在DFS中,每遇到一个未访问的点,则对他进行深搜,把它能访问到的所有点标记为已访问.一共进行了多少次这 ...
- IOS网络访问详解
第一.访问网络的方式 同步请求:数据的请求过程是由主线程发起的,网络加载需要一定的时间,因此会堵塞主线程 异步请求:数据的请求在多线程中完成 同步请求无法取消,异步请求的过程中可以取消,同步请求无法监 ...
- ZOJ 3587 扩展KMP
思路:这题确实大帝做得非常机智!字符串先求最长前缀,反的字符串再求一次最长前缀.然后就能够搞了. 每一个子串出现的次数就是最长前缀的次数嘛! #pragma comment(linker, " ...
- 记录一下自己常用的maven工程的pom.xml模板
1. 带有hadoop-CDH4.2.1的pom.xml模板 <?xml version="1.0" encoding="UTF-8"?> < ...
- STL - 容器 - MultiSet
MultiSet根据特定排序准则,自动将元素排序.MultiSet允许元素重复.一些常规操作:MultiSetTest.cpp #include <iostream> #include & ...