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.jsjquery.dataTables.css 资源地址：http://pan.baidu.com/s/1pLemHLL
时间： 2024-11-08 08:36:57