木子屋
 

标题: 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">
$(document).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 0.618 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.618 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.618 ms