DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

　　主要特点：

　　1.自动分页处理

　　2.即时表格数据过滤

　　3.数据排序以及数据类型自动检测

　　4.自动处理列宽度

　　5.可通过CSS定制样式

　　6.支持隐藏列

　　7.易用

　　8.可扩展性和灵活性

　　9.国际化

　　10.动态创建表格

　　11.免费的

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="css/jquery.dataTables.css" type="text/css" rel="stylesheet">

    <title>管理员查看供应商信息</title>

</head>

<body>

    <table id="supplier-info" class="display" cellspacing="0"  width="100%">

       <thead>

          <tr>

             <th>编号</th>

             <th>全称</th>

             <th>简称</th>

             <th>类型</th>

             <th>联系人</th>

             <th>手机号码</th>

             <th>联系电话</th>

             <th>传真</th>

             <th>邮编</th>

             <th>地址</th>

             <th>备注</th>

             <th>操作</th>

          </tr>

       </thead>

        <tfoot>

        <tr>

            <th>编号</th>

            <th>全称</th>

            <th>简称</th>

            <th>类型</th>

            <th>联系人</th>

            <th>手机号码</th>

            <th>联系电话</th>

            <th>传真</th>

            <th>邮编</th>

            <th>地址</th>

            <th>备注</th>

            <th>操作</th>

        </tr>

        </tfoot>

       <tbody>

          <tr>

              <td>001</td>

              <td>上海真彩文具店</td>

              <td>真彩</td>

              <td>文具</td>

              <th>吴杰</th>

              <th>18223456789</th>

              <th>22896789</th>

              <th>010-12345678</th>

              <th>350108</th>

              <th>上海宝山</th>

              <th>—</th>

              <td>[编辑][设为无效]</td>

          </tr>

          <tr>

              <td>002</td>

              <td>上海真彩文具店</td>

              <td>真彩</td>

              <td>文具</td>

              <th>吴杰</th>

              <th>18223456789</th>

              <th>22896789</th>

              <th>010-12345678</th>

              <th>350108</th>

              <th>上海宝山</th>

              <th>—</th>

              <td>[编辑][设为无效]</td>

          </tr>

          <tr>

              <td>003</td>

              <td>上海真彩文具店</td>

              <td>真彩</td>

              <td>文具</td>

              <th>吴杰</th>

              <th>18223456789</th>

              <th>22896789</th>

              <th>010-12345678</th>

              <th>350108</th>

              <th>上海宝山</th>

              <th>—</th>

              <td>[编辑][设为无效]</td>

          </tr>

       </tbody>

    </table>

CSS：

需要引入：jquery.dataTables.css

JavaScript:

除了引入以下两个插件以外，还需要编写下代码

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.dataTables.js"></script>

<script type="text/javascript">

        $(document).ready(function() {

            $('#supplier-info').dataTable( {

                initComplete: function () {

                    this.api().columns().every( function () {

                        var column = this;

                        var select = $('<select><option value=""></option></select>')

                                .appendTo( $(column.footer()).empty() )

                                .on( 'change', function () {

                                    var val = $.fn.dataTable.util.escapeRegex(

                                            $(this).val()

                                    );

                                    column

                                            .search( val ? '^'+val+'$' : '', true, false )

                                            .draw();

                                } );

                        column.data().unique().sort().each( function ( d, j ) {

                            select.append( '<option value="'+d+'">'+d+'</option>' )

                        } );

                    } );

                }

            } );

        } );

    </script>

结果如下所示：

附：

jquery.js
jquery.dataTables.js
jquery.dataTables.css

资源地址：http://pan.baidu.com/s/1pLemHLL

 

jQuery DataTables的简单实现的更多相关文章

  1. Jquery DataTables warning : Requested unknown from the data source for row 0

    昨天在做 Jquery DataTables 的时候,遇到的一个问题,我使用MVC,在tables上加入了一个actionlink的href.但是在运行起来的时候,报错: DataTables war ...

  2. JQuery Datatables(一)

    最近项目中用了Bootstrap的样式风格,控件用了JQuery Datatables,主要有几下几点目标: 实现BootStrap风格的table,使用Ajax获取数据,并有勾选项 可以实现全选,单 ...

  3. JQuery DataTables Editor---页面内容修改&&数据库信息修改 （2）

    接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...

  4. JQuery DataTables Editor---页面内容修改&&数据库信息修改 （1）

    我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...

  5. jquery datatables api （转）

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  6. 最全的jquery datatables api 使用详解

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. jquery datatables api

    原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...

  8. jquery.dataTables的用法

    写页面前端时,使用表格的插件可以快速漂亮的排版.本例子中使用jquery.dataTables来处理table.直接来点干货 html代码如下 <table cellpadding=" ...

  9. jquery datatables 学习笔记

    最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...

随机推荐

  1. u-boot支持yaffs映像烧写的补丁

    u-boot的nand flash驱动有两个版本,似乎是以u-boot1..5为分界点的,之前的版本使用的是自己写的nand flash驱动,而后面的版本使用的是linux内核中nand flash的 ...

  2. Hashing图像检索源码及数据库总结

    下面的这份哈希算法小结来源于本周的周报,原本并没有打算要贴出来的,不过,考虑到这些资源属于关注利用哈希算法进行大规模图像搜索的各位看官应该很有用,所以好东西本小子就不私藏了.本资源汇总最主要的收录原则 ...

  3. 使用自由软件Icarus Verilog Simulator进行仿真

    Icarus Verilog Simulator(http://iverilog.icarus.com/home)使用iverilog作为源代码编译器,编译生成vvp程序文本,使用vvp作为运行时引擎 ...

  4. 数学图形(1.2)Sin曲线

    相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 Sin曲线 vertices = x = *PI) to (*PI) y = ...

  5. Javascript 中“靠”的使用

    Javascript中call的使用自己感觉蛮纠结的,根据文档很好理解,其实很难确定你是否真正的理解. call 方法应用于:Function 对象调用一个对象的一个方法,以另一个对象替换当前对象.c ...

  6. 眼前一亮！十八款新潮而又独特的网站Header设计

    一个网站最重要的一个部分就是标题.这将是访问者的第一印象,设计出一个吸引眼球并且功能清晰导航还是比较容易的,但想出一个独特的header却总是困难的,这就是为什么我决定把那些对我有最影响的导航列出来了 ...

  7. 两条Find指令

    # 列出所有包括a@b.c内容的xml文件 find / -type f -name "*.xml" | xargs grep "a@b.c" # 列出/opt ...

  8. BIOS和Bootloader的对比

    桌面电脑刚加电时,一个叫做BIOS的软件程序立刻获得了处理器的控制权.(历史上,BIOS是Basic Input/Output Software的缩写,但现在这个单词已经有了自身的含义,因为其完成的功 ...

  9. 队列实例程序（C语言）

    /* queue.h */ #ifndef _QUEUE_H #define _QUEUE_H struct queue_record; typedef struct queue_record *qu ...

  10. TQ2440烧写方法总结

    USB烧写 接线:需要连接串口线.USB下载线和电源线. 软件:USB转串口驱动(因为现在的笔记本上一般都没有串口).USB下载驱动和DNW. 网络烧写 接线:需要连接串口线.网线和电源线. 软件:T ...