JQuery表格插件之Datatables

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

  • 自动分页处理
  • 即时表格数据过滤
  • 数据排序以及数据类型自动检测
  • 自动处理列宽度
  • 可通过CSS定制样式
  • 支持隐藏列
  • 易用
  • 可扩展性和灵活性
  • 国际化
  • 动态创建表格
  • 免费的

JQuery表格插件之Datatables_第1张图片

学习Datatable准备:

下载插件包http://www.datatables.net/download/

开始

引入CSS文件和JS文件

--------------------------------------------------------------------------

<style type="text/css" title="currentStyle">
        @import "DataTables-1.8.1/media/css/demo_page.css";
        @import "DataTables-1.8.1/media/css/demo_table.css";
        @import "DataTables-1.8.1/media/css/demo_table_jui.css";
    </style>
    <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
 <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>

 --------------------------------------------------------------------------

其中的文件路径根据自己的项目而改变

下面就是正题了(个人的源码)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Datatables</title>
    <style type="text/css" title="currentStyle">
        @import "DataTables-1.8.1/media/css/demo_page.css";
        @import "DataTables-1.8.1/media/css/demo_table.css";
        @import "DataTables-1.8.1/media/css/demo_table_jui.css";
    </style>
    <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
 <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#example").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": "末页"
                    }
                } //多语言配置

            });
        });
    </script>
</head>
<body>
<div id="dt_example">
<div id="container" align="center">
    <div id="demo">
           <table cellpadding="0" border="2" cellspacing="0" border="0" id="example" class="display">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>产品价格</th>
                    <th>产品状态</th>
                </tr>
            </thead>
            <tbody>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
               
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeX">
                    <td>1</td>
                    <td>产品1</td>
                    <td class="center">100</td>
                    <td class="center">正常</td>
                </tr>
                <tr class="gradeA">
                    <td>2</td>
                    <td>产品2</td>
                    <td class="center">2000</td>
                    <td class="center">不正常</td>
                </tr>
                <tr class="gradeC">
                    <td>3</td>
                    <td>产品3</td>
                    <td class="center">3890</td>
                    <td class="center">正常</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html>

 希望对刚接触他的人有所帮助,更希望高手提出宝贵的意见和建议,呈让了

你可能感兴趣的:(JQuery表格插件之Datatables)