脚本语言 订阅所有【脚本语言】的日志

jQuery插件：DataTables简单示例

编辑:dnawo 日期:2012-10-21

字体大小: 小 中 大
DataTables插件零配置使用示例：

HTML代码


[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"
        }
    }
});


上一篇: Android模拟器ANDROID_ID修改示例
下一篇: jQuery插件：DataTables分页取数据示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 6241
发表评论
请登录后再发表评论！