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: ...
随机推荐
- 【Burnside定理】&【Pólya定理】
Burnside & Pólya (详细内容请参阅<组合数学>或2008年cyx的论文,这里只写一些我学习的时候理解困难的几个点,觉得我SB的请轻鄙视……如果有觉得不科学的地方欢迎 ...
- Objective-C：ARC自动释放对象内存
ARC是cocoa系统帮你完成对象内存释放的引用计数机制 .h文件 // Person.h // 01-ARC // // Created by ma c on 15/8/13. // Copyrig ...
- jQuery EasyUI 教程-Tooltip（提示框）
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...
- Node.js中的HTTPS示例
需要openssl的支持, openssl本身不提供windows的安装程序,可以按照如下的步骤进行安装: (参考https://conetrix.com/Blog/how-to-install- ...
- SharpDevelop 版本信息
mscorlib,4.0.0.0,C:\Windows\Microsoft.NET\Framework\v4.0.30319\mscorlib.dll SharpDevelop,5.1.0.4936, ...
- 【leetcode 桶排序】Maximum Gap
1.题目 Given an unsorted array, find the maximum difference between the successive elements in its sor ...
- 在项目代码中载入cocostudio导出的动画并循环播放
须要在代码中引入#include "cocostudio/CocoStudio.h" using namespace cocostudio; ArmatureDataManager ...
- 使用(function() {}).call(this);包裹代码有什么好处，什么时候应该这样做？
转自:http://segmentfault.com/q/1010000002519489 1.严格模式下函数调用的 this 并不会默认成为全局对象. 使用 func.call(this) 确保函数 ...
- Android实现固定头部信息,挤压动画(相似通讯录)
半年前,那时候我还是个大四的学生,每天都在找工作度过,想去北京体验一下蚁族生活,奋然离开了济南,哎...在济南我们学校还是数得着的好学校,去了北京就什么都不是了,一切的辛酸仅仅有自己知道,那时候的我仅 ...
- mac 下vim 配置文件
" Configuration file for vim set modelines=0 " CVE-2007-2438 " Normally we use vim-ex ...