欢迎光临

木子屋

标题: jQuery插件：DataTables简单示例

作者: dnawo

日期: 2012-10-21 08:06 PM

分类: 脚本语言

内容: DataTables插件零配置使用示例：
HTML代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
DataTables示例 - Mzwu.COM
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">
.ready(function(){
$("#example").dataTable();
});

Id
Name
Url

1
木子屋
http://www.mzwu.com/

2
百度
http://www.baidu.com/

3
谷歌
http://www.google.com/

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
在上图可以看到，DataTables插件为table添加了额外的5个功能：每页记录数、搜索、排序、信息及分页。
一、5个功能基本设置
1.每页记录数
复制内容到剪贴板 程序代码$("#example").dataTable({
"bLengthChange": true,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"iDisplayLength": 10
});
说明：必须bPaginate=true时，bLengthChange=true才能显示。
2.搜索
复制内容到剪贴板 程序代码$("#example").dataTable({
"bFilter": true
});
3.排序
复制内容到剪贴板 程序代码$("#example").dataTable({
"bSort": true,
"aaSorting": [[0,'asc'], [1,'asc']]
});
4.信息
复制内容到剪贴板 程序代码$("#example").dataTable({
"bInfo": true
});
5.分页
复制内容到剪贴板 程序代码$("#example").dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers" //two_button (default) and full_numbers
});
二、5个功能全局设置
复制内容到剪贴板 程序代码$.extend($.fn.dataTable.defaults, {
"bLengthChange": false,
"bFilter": false,
"bSort": false
});
$("#example").dataTable();
三、5个功能位置调整
复制内容到剪贴板 程序代码$("#example").dataTable({
"sDom": 'iptlf'
});
sDom属性值具体含义：
·l - Length changing
·f - Filtering input
·t - The table!
·i - Information
·p - Pagination
·r - pRocessing
·< and > - div elements
·<"class" and > - div with a class
四、5个功能语言设置
复制内容到剪贴板 程序代码$("#example").dataTable({
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page",
"sZeroRecords": "Nothing found - sorry",
"sSearch": "Search all columns:",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
}
}
});

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.344 ms

返回

标题: jQuery插件：DataTables简单示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.344 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.422 ms

返回