jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明。
首先,需要到 dataTables 的网站 http://www.datatables.net/
下载这个脚本库,
目前的版本是 1.7.5,下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布,所以,这里使用最新的 jQuery 1.5.1 。
然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用。
对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明,如下所示,
<
table
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
class
=
"display"
id
=
"example"
>
<
thead
>
<
tr
>
<
th
>
Rendering engine
</
th
>
<
th
>
Browser
</
th
>
<
th
>
Platform(s)
</
th
>
<
th
>
Engine version
</
th
>
<
th
>
CSS grade
</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
class
=
"odd gradeX"
>
<
td
>
Trident
</
td
>
<
td
>
Internet Explorer 4.0
</
td
>
<
td
>
Win 95+
</
td
>
<
td
class
=
"center"
>
4
</
td
>
<
td
class
=
"center"
>
X
</
td
>
</
tr
>
|
如果没有 thead 将会报错。
最为简单的使用方式,就是零配置的方式。
$(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-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
挺好用的表格插件, 官网地址:http://www.datatables.net/
DataTables - jQuery表格插件
Laravel开发-laravel-datatables-oracle Laravel 4_5的jquery数据表API
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
datatables-editor-1.6.1 破解版
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip
jquery-datatables-rails 该gem打包了jQuery 插件,可轻松与Rails 3.1+资产pipleine一起使用。 它提供了所有基本的DataTables文件以及一些其他功能。 重要的 当前的gem已发布,没有更新的插件。 jQuery DataTables...
vue-datatables-net Vue jQuery DataTables.net包装器组件 该库是的Vue 2包装器。 这是一个很小的包装程序,不包含任何内容,甚至不包含datatables.net核心库。 注意:之所以找到该库,是因为您想在应用程序中使用...
1,如何使用? <!--第一步:引入Javascript / CSS (CDN)--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href=...
jquery-数据表-可编辑 从 code.google.com/p/jquery-datatables-editable 自动导出 完整文档位于 url
jquery-数据表-可编辑从 code.google.com/p/jquery-datatables-editable 自动导出 我们将很快更新此文件。
ASP.NET-Core-2-MVC-CRUD-datatables-jQuery-Plugin 首先实现ASP.NET Core 2 MVC CRUD数据表jQuery插件和EF Core代码的示例实现。你会学什么ASP.NET Core 2 使用ASP.NET Core 2的Web API 使用实体框架(EF)的CRUD ...
jquery dataTables两种版本 jquery两种版本 及相关css
git clone https://github.com/ansballard/jquery-datatables-editable.git editable cd editable npm update -g npm npm install npm install -g bower bower install grunt 要在本地查看示例页面,请在项目目录中...
Laravel DataTables...快速安装composer require yajra/laravel-datatables-buttons:^4.0 服务提供商(在Laravel 5.5上为可选) Yajra\DataTables\ButtonsServiceProvider::class 配置和资产(可选) $ php artisan
工作需要用到jquery dataTables。 网上找不到这样的例子,只好我自已整理一份了。 该demo包含8个可以运行的最简单的个例子。 希望能对大家有帮助。
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
jQuery Datatables服务器端处理 ASP NET组件,为著名的jQuery表插件添加了自动服务器端处理功能。 它使用IQueryable接口来构造查询表达式到您的数据集合,可以由诸如实体框架的ORM处理。 支持: 分页; 搜索; ...
#DataTables-CustomSearch jQuery插件DataTables 1.10的扩展( ),使您可以指定自定义搜索字段。 ##快速示例 $ ( 'table' ) . dataTable ( ) . customSearch ( ) ; ##选项### container可以是jQuery选择器字符串...