码迷,mamicode.com
首页 > 其他好文 > 详细

DataTables的简单实现

时间:2016-05-11 18:15:44      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:

  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

 

DataTables的简单实现

标签:

原文地址:http://www.cnblogs.com/shenxiaolin/p/5482577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!