jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明。
首先,需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库,
目前的版本是 1.7.5,下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布,所以,这里使用最新的 jQuery 1.5.1 。
然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用。
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [2],"bInfo":false }
]
} );
} );
</script>
对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明,如下所示,
<div id="demo">
<table class="main_right_table02" style="margin-top:32px;" id="example">
<thead>
<tr class="title">
<td>银行名称</td>
<td>提现支出</td>
<td>转存收入</td>
<td>状态</td>
<td>对账结束</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>中国工商银行</td>
<td class="orange">100</td>
<td>200</td>
<td class="orange">已对</td>
<td>平</td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr class="con">
<td>中国建设银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国工商银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国工商银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国工商银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国工商银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国建设银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国建设银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国交通银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>中国建设银行</td>
<td class="orange">100</td>
<td>20</td>
<td class="orange">未对</td>
<td> </td>
<td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
</tr>
<tr>
<td>合计:</td>
<td class="orange">300</td>
<td>600</td>
<td class="orange"> </td>
<td> </td>
<td class="orange"> </td>
</tr>
</tbody>
</table>
</div>
最为简单的使用方式,就是零配置的方式。
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});
表格的效果
注意,红框表示了四个默认的设置效果,分别用来选择每页的行数,表格的过滤器,表格的信息和换页。
此时,使用了几个默认的参数设置。在 dataTables 中,参数名称的前缀用来说明参数的数据类型,很明显,b 表示布尔类型,i 表示整数类型,s 表示字符串类型。
-
bPaginate: 是否分页,默认为 true,分页
-
iDisplayLength : 每页的行数,每页默认数量:10
-
sPaginationType: 分页样式,支持两种内置方式,two_button 和 full_numbers, 默认使用 two_button。
-
bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
-
bFilter: 启用或禁止数据过滤,默认为 true。 注意,如果使用过滤功能,但是希望关闭默认的过滤输入框,应使用 sDom
- bInfo: 允许或者禁止表信息的显示,默认为 true,显示信息。
我们也可以通过传递一个初始化参数对象来改变这些设置。例如,下面的例子将每页的行数设置为 20 行。
$(function () {
$("#example").dataTable(
{
iDisplayLength: 20
}
);
});
分享到:
相关推荐
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
JQuery DataTables示例,包含分页、拖拽、导出,前端、后台分页都有,项目直接导入就可以使用,项目框架是struts2写Web项目。
官方下载 datatables所需包文件
jquery dataTables两种版本 jquery两种版本 及相关css
jQuery Datatables
eclipse里面运行的简单组件,通过读取TXT文件显示在页面上,加入bootstrap
使用JQuery.Datatables再也不用烦恼了,非常方便的集成插件,还是老外牛叉啊!
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
jquery1.6 datatables插件1.8 附带例子 API等 WEB页面显示列表,课排序 列过滤 隐藏列等功能
jquery datatables前后台数据交互分页实例。
仿jquery.dataTables的分页(查询+排序),jquery插件式开发简单示例。
Jquery dataTables插件 支持静态分页 排序 固定表头 ajax事件 等等 简单易上手
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,但是官网是PHP的例子,特意做...
避免由于session失效,引发DataTable向后台发送ajax请求时弹窗报错而不是重定向到指定页面,详情https://blog.csdn.net/xssl_CSDN/article/details/83660015
里面是jquery.dataTables的引用包。使用简单,只需要引用js和css的包在家一个html文件即可,使用方法笔记里面有。
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
在用jquery datatables开发,它的在线帮助打开很慢,很影响工作,就做了这个离线文档以便使用,特分享一下,随便挣几个工分下载时用
《jQuery DataTables使用手册(精简版)和中文API》 《jQuery Validation学习手册》 《jQuery Validation中文API》参考手册 《jQuery常见开发技巧》手册 《JQuery开发者必备组件》 《JQuery模拟Ajax请求和响应》参考...
挺好用的表格插件, 官网地址:http://www.datatables.net/