《前端》dataTables--2020年4月2日 -- 我还没学

最新推荐文章于 2021-08-05 11:57:03 发布

bellediao

最新推荐文章于 2021-08-05 11:57:03 发布

阅读量193

点赞数

分类专栏： #jQuery 前端例子

本文链接：https://blog.csdn.net/bellediao/article/details/105278970

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

例子

18 篇文章 0 订阅

订阅专栏

#jQuery

12 篇文章 0 订阅

订阅专栏

我无意间发现一个好玩的东西-dataTables

Datatables 中文网 http://datatables.club/

http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

DataTables | Table plug-in for jQuery https://datatables.net/

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

Datatables是什么？

是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

特点：

分页，即时搜索和排序。
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理。
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。

简单使用

使用Datatables，只需要引用三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件。

处理模式(Processing modes)

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。
每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。

数据源类型(Data source types)

DataTables 使用的数据源必须是一个数组，数组里的每一项将显示在你定义的行上面，DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源：

数组(Arrays [])、实例(new myclass())、实例(new myclass())。

第一种数组：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
 
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var data = [
                    [
                        "Tiger Nixon",
                        "System Architect",
                        "Edinburgh",
                        "5421",
                        "2011/04/25",
                        "$3,120"
                    ],
                    [
                        "Garrett Winters",
                        "Director",
                        "Edinburgh",
                        "8422",
                        "2011/07/25",
                        "$5,300"
                    ]
                ];
                //$('#table_id_example').DataTable();
                //然后 DataTables 这样初始化：
                $('#table_id_example').DataTable({
                    data: data
                });
            });
        });
    </script>
</head>
<body>
 
<button type="button">修改内容</button>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>Nmae</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
 
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
 
    </tr>
    </tbody>
</table>
</body>
</html>

第二种：对象(objects {})

对象看起来很直观，使用起来和数组略有不同。如果你已经参考了 API ，你可以知道通过对象获得特定的数据非常简单，你只需要使用一个属性的名字，而不是记住这个数组的索引，比如data.name，而不是data[0]。

var data = [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "Garrett Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        }
    ];
        //object可以如下初始化表格
    $('#example').DataTable( {
        data: data,
        //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
        //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
        columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'salary' },
            { data: 'office' }
        ]
    } );

第三种：

实例(new myclass())

DataTables 从实例中获取数据显示是非常有用的，这些实例可以定义成抽象的方法来更新数据。
注意,name,salary,position 是属性而office是一个方法，DataTables 允许这样使用，他会自动识别，详细见手册 columns.dataOption

以上为实例作为数据源的实例，效果如下：

function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;
 
        this.office = function () {
            return this._office;
        }
    };
 
    $('#example').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office()' },
            { data: 'position' }
        ]
    } );

给行绑定选中事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
 
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            var data = [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "salary":     "$3,120",
                    "start_date": "2011/04/25",
                    "office":     "Edinburgh",
                    "extn":       "5421"
                },
                {
                    "name":       "Garrett Winters",
                    "position":   "Director",
                    "salary":     "$5,300",
                    "start_date": "2011/07/25",
                    "office":     "Edinburgh",
                    "extn":       "8422"
                }
            ];
            var table = $('#table_id_example').DataTable({
                data: data,
                //这样配置后，即可用DT的API来访问表格数据
                columns: [
                    {data: "name"},
                    {data: "position"}
                ]
            });
            //给行绑定选中事件
            $('#table_id_example tbody').on( 'click', 'tr', function () {
                console.log("给行绑定选中事件");
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            } );
            //给按钮绑定点击事件
            $("#table_id_example_button").click(function () {
                console.log("给按钮绑定点击事件");
                var column1 = table.row('.selected').data().name;
                var column2 = table.row('.selected').data().position;
                alert("第一列内容："+column1 + "；第二列内容： " + column2);
            });
            $("#button2").click(function () {
                console.log("button2");
 
            });
        });
    </script>
</head>
<body>
 
<button type="button" id="button2">修改内容</button>
<button type="button" id="table_id_example_button">给按钮绑定点击事件</button>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>Nmae</th>
        <th>Position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
    </tr>
    </tbody>
</table>
</body>
</html>

Ajax

前两种数据源的处理模式都是客户端处理，显然这不能满足大多数时候对于表格的要求。还好DT提供了一种可以通过Ajax与后端服务交互的方法，可以直接将后端提供的数据直接展示到表格上，分页和排序也很方便。后面的篇幅会侧重说DT如何通过Ajax如何与服务端完成数据交互。

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

Da-tatables是一款jquery表格插件_JavaScript_dianziagen的博客-CSDN博客 https://blog.csdn.net/dianziagen/article/details/79818311

DataTables使用入门 - 就是一块小饼干 - 博客园 https://www.cnblogs.com/tenny-peng/p/11540746.html

Jquery Datatables的使用详解_jquery_脚本之家 https://www.jb51.net/article/179213.htm

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》dataTables--2020年4月2日 -- 我还没学

我无意间发现一个好玩的东西-dataTablesDatatables 中文网 http://datatables.club/http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.jshttp://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.cssDataT...
复制链接

扫一扫