jquery.dataTables插件使用例子详解

效果图

 


代码

 代码如下 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery.dataTables插件</title>
    <link rel="stylesheet" href="bootstrap3/dist/css/bootstrap.min.css" />
    <script src="plugins/jquery/jquery-1.10.1.min.js"></script>
    <script src="plugins/DataTables/jquery.dataTables.js"></script>
    <script src="plugins/DataTables/DT_bootstrap.js"></script>
<script>
$(function(){
         
 
//      $("#sample_1").dataTable({
//                 "bPaginate": true, //开关，是否显示分页器
//                 "bInfo": true, //开关，是否显示表格的一些信息
//   //              "bFilter": true, //开关，是否启用客户端过滤器
//   //              "sDom": "<>lfrtip<>",
//   //              "bAutoWith": false,
//  //               "bDeferRender": false,
//   //              "bJQueryUI": false, //开关，是否启用JQueryUI风格
//   //              "bLengthChange": true, //开关，是否显示每页大小的下拉框
//  //               "bProcessing": true,
//   //              "bScrollInfinite": false,
//  //               "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
//  //               "bSort": true, //开关，是否启用各列具有按列排序的功能
//  //               "bSortClasses": true,
// //                "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，
// //打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的-  ------当值为true时aoColumnDefs不能隐藏列
// //                "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
//  //               "aaSorting": [[0, "asc"]],
//  //               "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}],//隐藏列
// //                "sDom": '<"H"if>t<"F"if>',
// //                "bAutoWidth": false, //自适应宽度
// //                "aaSorting": [[1, "asc"]],
//  //               "sPaginationType": "full_numbers",
//                 "oLanguage": {
//                     "sProcessing": "正在加载中......",
//                     "sLengthMenu": "每页显示 _MENU_ 条记录",
//                     "sZeroRecords": "对不起，查询不到相关数据！",
//                     "sEmptyTable": "表中无数据存在！",
//                     "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
//                     "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
//                     "sSearch": "搜索",
//                     "oPaginate": {
//                         "sFirst": "首页",
//                         "sPrevious": "上一页",
//                         "sNext": "下一页",
//                         "sLast": "末页"
//                     }
//                 } //多语言配置
//             });
 
 
 
 
 
var TableData = function () {
    //function to initiate DataTable
    //DataTable is a highly flexible tool, based upon the foundations of progressive enhancement,
    //which will add advanced interaction controls to any HTML table
    //For more information, please visit https://datatables.net/
    var runDataTable = function () {
            var oTable = $('#sample_1').dataTable({
                "aoColumnDefs": [{
                    "aTargets": [0]
                }],
                "aaSorting": [
                    [1, 'asc']
                ],
                "aLengthMenu": [
                    [5, 10, 15, 20, -1],
                    [5, 10, 15, 20, "All"] // change per page values here
                ],
                // 设置默认显示多少条信息
                "iDisplayLength": 10,
                "oLanguage": {
                     "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                     "sZeroRecords": "对不起，查询不到相关数据！",
                     "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                     "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                     "sSearch": "搜索",
                     "oPaginate": {
                        "sFirst": "首页",
                         "sPrevious": "上一页",
                         "sNext": "下一页",
                         "sLast": "末页"
                    }
                 } //多语言配置
            });
            $('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
            // modify table search input
            $('#sample_1_wrapper .dataTables_length select').addClass("m-wrap small");
            // modify table per page dropdown
            //$('#sample_1_wrapper .dataTables_length select').select2();
            // initialzie select2 dropdown
            $('#sample_1_column_toggler input[type="checkbox"]').change(function () {
                /* Get the DataTables object again - this is not a recreation, just a get of the object */
                var iCol = parseInt($(this).attr("data-column"));
                var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
                oTable.fnSetColumnVis(iCol, (bVis ? false : true));
            });
        };
        return {
            //main function to initiate template pages
            init: function () {
                runDataTable();
            }
        };
    }();
 
    TableData.init();//执行
 
})
</script>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
            <thead>
                <tr>
                    <th>Browser</th>
                    <th class="hidden-xs">Creator</th>
                    <th>Cost (
                    USD)</th>
                    <th class="hidden-xs"> Software license</th>
                    <th>Current
                    layout engine</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Amaya</td>
                    <td class="hidden-xs">W3C,
                    INRIA</td>
                    <td>Free</td>
                    <td class="hidden-xs">W3C</td>
                    <td>Amaya</td>
                </tr>
                <tr>
                    <td>AOL Explorer</td>
                    <td class="hidden-xs">America Online, Inc</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Trident</td>
                </tr>
                <tr>
                    <td>Arora</td>
                    <td class="hidden-xs">Benjamin C. Meyer</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Avant</td>
                    <td class="hidden-xs">Avant Force</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Tri-engine</td>
                </tr>
                <tr>
                    <td>Camino</td>
                    <td class="hidden-xs">The Camino Project</td>
                    <td>Free</td>
                    <td class="hidden-xs">tri-license</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Chromium</td>
                    <td class="hidden-xs">Google</td>
                    <td>Free</td>
                    <td class="hidden-xs">BSD</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Dillo</td>
                    <td class="hidden-xs">The Dillo team</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>Dillo</td>
                </tr>
                <tr>
                    <td>Dooble</td>
                    <td class="hidden-xs">Dooble Team</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>ELinks</td>
                    <td class="hidden-xs">Baudis, Fonseca, <i>et al.</i></td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>built-in</td>
                </tr>
                <tr>
                    <td>Web</td>
                    <td class="hidden-xs">Marco Pesenti Gritti</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Flock</td>
                    <td class="hidden-xs">Flock Inc</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Galeon</td>
                    <td class="hidden-xs">Marco Pesenti Gritti</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Google Chrome</td>
                    <td class="hidden-xs">Google</td>
                    <td>Free</td>
                    <td class="hidden-xs">Google Chrome Terms of Service</td>
                    <td>Blink</td>
                </tr>
                <tr>
                    <td>GNU IceCat</td>
                    <td class="hidden-xs">GNU</td>
                    <td>Free</td>
                    <td class="hidden-xs">MPL</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>iCab</td>
                    <td class="hidden-xs">Alexander Clauss</td>
                    <td>$20 (Pro)</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Internet Explorer</td>
                    <td class="hidden-xs">Microsoft,
                    <br>
                    Spyglass</td>
                    <td>comes with Windows</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Trident</td>
                </tr>
                <tr>
                    <td>Internet Explorer for Mac (terminated)</td>
                    <td class="hidden-xs">Microsoft</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Tasman</td>
                </tr>
                <tr>
                    <td>K-Meleon</td>
                    <td class="hidden-xs">Dorian, KKO, <i>et al.</i></td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Konqueror</td>
                    <td class="hidden-xs">KDE</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>KHTML</td>
                </tr>
                <tr>
                    <td>Links</td>
                    <td class="hidden-xs">Patocka, <i>et al.</i></td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>built-in</td>
                </tr>
                <tr>
                    <td>Lunascape</td>
                    <td class="hidden-xs">Lunascape Corporation</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Tri-engine</td>
                </tr>
                <tr>
                    <td>Lynx</td>
                    <td class="hidden-xs">Montulli, Grobe, Rezac, <i>et al.</i></td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>built-in</td>
                </tr>
                <tr>
                    <td>Maxthon</td>
                    <td class="hidden-xs">Maxthon International Limited</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Trident</td>
                </tr>
                <tr>
                    <td>Midori</td>
                    <td class="hidden-xs">Christian Dywan, et al.</td>
                    <td>Free</td>
                    <td class="hidden-xs">LGPL</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Mosaic</td>
                    <td class="hidden-xs">Marc Andreessen and
                    Eric Bina,
                    NCSA</td>
                    <td>non-commercial use</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>built-in</td>
                </tr>
                <tr>
                    <td>Mozilla Application Suite</td>
                    <td class="hidden-xs">Mozilla Foundation</td>
                    <td>Free</td>
                    <td class="hidden-xs">tri-license</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Mozilla Firefox</td>
                    <td class="hidden-xs">Mozilla Foundation</td>
                    <td>Free</td>
                    <td class="hidden-xs">MPL</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Netscape (v.6-7) </td>
                    <td class="hidden-xs">Netscape Communications Corporation,
                    AOL</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Netscape Browser (v.8)[note 2]</td>
                    <td class="hidden-xs">Mercurial Communications for
                    AOL</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Gecko, Trident</td>
                </tr>
                <tr>
                    <td>Netscape Communicator (v.4)[note 2]</td>
                    <td class="hidden-xs">Netscape Communications</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Mosaic</td>
                </tr>
                <tr>
                    <td>Netscape Navigator (v.1-4)[note 2]</td>
                    <td class="hidden-xs">Netscape Communications</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Mosaic</td>
                </tr>
                <tr>
                    <td>Netscape Navigator 9[note 2]</td>
                    <td class="hidden-xs">Netscape Communications
                    <br>
                    (division of AOL)</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>NetSurf</td>
                    <td class="hidden-xs">The NetSurf Developers</td>
                    <td>Free</td>
                    <td class="hidden-xs">GPL</td>
                    <td>NetSurf built-in</td>
                </tr>
                <tr>
                    <td>OmniWeb</td>
                    <td class="hidden-xs">The Omni Group</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Opera</td>
                    <td class="hidden-xs">Opera Software</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Presto</td>
                </tr>
                <tr>
                    <td>Opera Mobile</td>
                    <td class="hidden-xs">Opera Software</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Presto</td>
                </tr>
                <tr>
                    <td>Origyn Web Browser</td>
                    <td class="hidden-xs">Sand-labs</td>
                    <td>Free</td>
                    <td class="hidden-xs">BSD</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>QupZilla</td>
                    <td class="hidden-xs">David Rosca</td>
                    <td>Free</td>
                    <td class="hidden-xs">GNU GPLv3</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Safari</td>
                    <td class="hidden-xs">Apple Inc.</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>SeaMonkey</td>
                    <td class="hidden-xs">SeaMonkey Council</td>
                    <td>Free</td>
                    <td class="hidden-xs">tri-license</td>
                    <td>Gecko</td>
                </tr>
                <tr>
                    <td>Shiira</td>
                    <td class="hidden-xs">Happy Macintosh Developing Team</td>
                    <td>Free</td>
                    <td class="hidden-xs">BSD</td>
                    <td>WebKit</td>
                </tr>
                <tr>
                    <td>Sleipnir</td>
                    <td class="hidden-xs">Fenrir Inc.</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Trident</td>
                </tr>
                <tr>
                    <td>Torch Browser</td>
                    <td class="hidden-xs">Torch Media</td>
                    <td>Free</td>
                    <td class="hidden-xs">Proprietary</td>
                    <td>Webkit</td>
                </tr>
                <tr>
                    <td>Uzbl</td>
                    <td class="hidden-xs">Dieter Plaetinck</td>
                    <td>Free</td>
                    <td class="hidden-xs">GNU GPLv3</td>
                    <td>Webkit</td>
                </tr>
                <tr>
                    <td>WorldWideWeb (Later renamed Nexus)</td>
                    <td class="hidden-xs">Tim Berners-Lee</td>
                    <td>Free</td>
                    <td class="hidden-xs">Public domain</td>
                    <td>NeXTSTEP built-in</td>
                </tr>
                <tr>
                    <td>w3m</td>
                    <td class="hidden-xs">Akinori Ito</td>
                    <td>Free</td>
                    <td class="hidden-xs">MIT</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
 
</body>
</html>
时间： 2024-09-11 07:13:26

jquery.dataTables插件使用例子详解的相关文章

jQuery旋转插件jqueryrotate用法详解_jquery

本文实例讲述了jQuery旋转插件jqueryrotate用法.分享给大家供大家参考,具体如下: CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件--jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本

jQuery提示插件PoshyTip使用详解

Demo中提供了三种使用的例子,页面代码如下:  代码如下 复制代码 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="src/jquery.poshytip.js"></script> <link rel="stylesh

jQuery日历插件datepicker用法详解_jquery

 jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入

jQuery插件制作方法详解

    jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一 个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.     jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的

javascript截图 jQuery插件imgAreaSelect使用详解_jquery

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq

Bootstrap 折叠（Collapse）插件用法实例详解_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst

jquery 实现轮播图详解及实例代码_jquery

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

jQuery EasyUI菜单与按钮详解_jquery

EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 代码如下: <html> <head> <meta http-equiv="Content

jQuery AJAX timeout 超时问题详解_jquery

先给大家分析下超时原因: 1.网络不通畅. 2.后台运行比较慢(服务器第一次运行时,容易出现) 超时结果:JQ中 timeout设置请求超时时间. 如果服务器响应时间超过了 设置的时间,则进入 ERROR (错误处理) 超时解决方案: 1.默认的timeout为0,代表永不超时 2.尽量把timeout设置的大一点.坏处:使数据的加载变慢(貌似.呵呵). 3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如,可以在超时的情况下再次调用取数据函数. -------------------