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的简单实现的更多相关文章

  1. Jquery DataTables warning : Requested unknown from the data source for row 0

    昨天在做 Jquery DataTables 的时候,遇到的一个问题,我使用MVC,在tables上加入了一个actionlink的href.但是在运行起来的时候,报错: DataTables war ...

  2. JQuery Datatables(一)

    最近项目中用了Bootstrap的样式风格,控件用了JQuery Datatables,主要有几下几点目标: 实现BootStrap风格的table,使用Ajax获取数据,并有勾选项 可以实现全选,单 ...

  3. JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)

    接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...

  4. JQuery DataTables Editor---页面内容修改&&数据库信息修改 (1)

    我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...

  5. jquery datatables api (转)

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  6. 最全的jquery datatables api 使用详解

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. jquery datatables api

    原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...

  8. jquery.dataTables的用法

    写页面前端时,使用表格的插件可以快速漂亮的排版.本例子中使用jquery.dataTables来处理table.直接来点干货 html代码如下 <table cellpadding=" ...

  9. jquery datatables 学习笔记

    最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...

随机推荐

  1. JS 中div内容的显示和隐藏

    1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...

  2. NLP国内研究方向机构导师

    基础研究 词法与句法分析:李正华.陈文亮.张民(苏州大学) 语义分析:周国栋.李军辉(苏州大学) 篇章分析:王厚峰.李素建(北京大学) 语言认知模型:王少楠,宗成庆(中科院自动化研究所) 语言表示与深 ...

  3. Hadoop Hive sql 语法详解

    Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询 ...

  4. Java使用jxl.jar包写Excel文件的最适合列宽问题基本实现

    以前用jxl.jar包,读写过Excel文件.也没有注意最适合列宽的问题,但是jxl.jar没有提供最适合列宽的功能,上次用到写了一下,可以基本实现最适合列宽. 注意,这个只是基本可以实现,基本针对中 ...

  5. C#操作AD及Exchange Server总结(一)

    这篇博客的目的:根据亲身项目经历,总结对AD及Exchange Server的操作,包括新建AD用户,设置密码,为AD用户创建邮箱等. 本文完全原创,转载请说明出处,希望对大家有用. 文档目录: 测试 ...

  6. Word Break leetcode java

    题目: Given a string s and a dictionary of words dict, determine if s can be segmented into a space-se ...

  7. input框设置onInput事件只能输入数字,能兼容火狐IE9

    使用onInput()事件 onInput()是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通 ...

  8. 图解Eclipse或者SpringSource Tool Suite 创建模块化Maven项目

    第一步:Package Explorer里选择右键,新建Maven项目,如果没有在Other里找,还没有确认一下是否安装了Maven插件 第二步:在Wizards向导里可以通过搜索,找到Maven P ...

  9. 怎样在Ubuntu中修改默认程序

    这个新手指南会向你展示如何在 Ubuntu Linux 中修改默认程序.对于我来说,安装 VLC 多媒体播放器是安装完 Ubuntu 16.04 该做的事中最先做的几件事之一.为了能够使我双击一个视频 ...

  10. 微博推荐算法学习(Weibo Recommend Algolrithm)

    原文:http://hijiangtao.github.io/2014/10/06/WeiboRecommendAlgorithm/ 基础及关联算法 作用:为微博推荐挖掘必要的基础资源.解决推荐时的通 ...