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: ...
随机推荐
- 【BZOJ】【2127】happiness
网络流/最小割 Orz Hzwer. 这题他题解说的比较简略……我手画了个图才明白过来…… 嗯对于每个人选文or理的单独收益大家应该很好理解……连S->i 权值为选文的喜悦值,i->T权值 ...
- go语言基础之随机数的使用
1.随机数的使用 示例1: 如果种子参数一样,每次运行程序产生的随机数都一样 package main //必须有个main包 import "fmt" import &quo ...
- JSON学习资料整理
1.什么是JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使 ...
- 【转】Understanding the Angular Boot Process
原文: https://medium.com/@coderonfleek/understanding-the-angular-boot-process-9a338b06248c ----------- ...
- Immediately-Invoked Puzzler
The Poplar Puzzle-makers weren’t too impressed. They barely noticed your simple and beautiful array ...
- 【Nodejs】使用nimble串行化回调任务
nodejs的nimble模块可以使我们对回调任务进行串行化,它需要先安装 #npm install nimble 用法也方便,示例代码如下: //========================== ...
- (LeetCode 78)SubSets
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...
- Office PPT如何切换到返回幻灯片
1 如图所示,有"老师""同学""家人"三个板块,如果依次播放,将播放"老师1" "老师2" &qu ...
- 20个常用java代码段
下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric strin ...
- info.plist
更新了Xcode8 以及 iOS10,App访问用户的相机.相册.麦克风.通讯录的权限都需要重新进行相关的配置,不然在Xcode8中打开编译的话会直接crash. 需要在info.plist中添加Ap ...