jQuery Datetable

最新推荐文章于 2023-03-02 09:29:47 发布

40kuai

最新推荐文章于 2023-03-02 09:29:47 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/u012881331/article/details/82881055

版权

先来个官网可以直接看官网 https://www.datatables.net/manual/data/

安装

DataTables是一个功能强大的Javascript库，用于为HTML表格添加交互功能，而简单性作为整个项目的核心设计原则，开始看起来相当艰巨。但是，采取这些步骤并获取DataTables在您的网站上运行实际上是非常简单的，因为您只需要在页面中添加两个文件：

DataTables JavaScript文件
DataTables CSS文件

还有其他的文件可用，例如添加编辑功能的编辑器，以及其他插件，可用于扩展DataTables的功能集，但基本上，只需要包含这两个文件即可启动并运行！

要求

在我们开始之前，我们需要考虑数据表的要求以便操作。

依赖

DataTables只有一个库依赖项（依赖它的工作所依赖的其他软件） - jQuery。作为一个jQuery插件，DataTables利用jQuery提供的许多优秀特性，并像所有其他jQuery插件一样挂载到jQuery插件系统中。jQuery 1.7或更高版本将与DataTables一起使用，但通常您会希望使用最新版本。DataTables包括它需要操作的一切。

HTML

为了DataTable能够增强HTML表格，表格必须是有效的，格式良好的HTML，带有header（thead）和单个主体（tbody）。可选的页脚（tfoot）也可以使用。

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

如果您使用服务器端程序（如PHP脚本，Ruby脚本，C＃程序或其他任何东西）生成HTML文档，则只需要输出您的表格即可。这正是你正常的HTML表格，尽管有时你可能需要添加thead和tbody标签，因为这些并不总是被使用（它们允许DataTables知道应该使用什么列标题和点击顺序控制）。

请注意，如果您正在使用Ajax源数据，DataTables实际上可以为您生成thead和tbody为您，以及表的所有行和单元格，但目前我们将专注于纯HTML。有关DataTables可以使用的不同数据源的更多信息，请参阅本手册的数据源部分。

安装Javascript / CSS

链接跳转...

初始化DataTables

$(document).ready( function () {
    $('#table_id').DataTable();
} );

DataTables会默认添加排序，搜索，分页和信息到您的表格，使最终用户能够尽快找到他们想要的信息。

如果要定制DataTable，可以通过在传递给DataTable()函数的对象中指定配置参数来完成。有关如何使用这些配置参数的信息，请参阅选项手册页。

数据

DataTables如何处理数据有三个核心概念：

处理模式
数据类型
数据源

处理模式

Data Tables 有两种不同的数据处理方式（排序，搜索等）：

客户端处理: 完整的数据集预先加载，数据处理在浏览器中完成
服务器端处理：为每个表格重绘一个Ajax请求，只返回每个显示所需的数据。数据处理在服务器上执行。

每种方法都有各自的优点和缺点，但您应该选择哪种模式的关键指标是基于表中的行数。作为一个经验法则，如果使用的行少于10,000行，则使用客户端处理，超过100,000行使用服务器端处理。中间是一个灰色地带，您需要根据您的应用程序的性质和您希望显示的数据做出决定！

请注意，这两种处理模式是相互排斥的 - 不能同时使用，也不能从一种模式动态转换到另一种模式。

客户端处理

客户端处理是DataTables的默认操作模式，因为它易于使用，不需要编写额外的代码。在客户端处理模式中，DataTables本身在浏览器中完成表中数据的排序，搜索，分页以及DataTables执行的所有其他数据处理操作。

服务器端处理

每页数据（称为绘图在数据表术语中）涉及向服务器发出Ajax请求。虽然每个Ajax请求可能需要几分之一秒才能完成，但是这种方法可能比所有数据加载时的大量等待前沿更可取。

服务器端处理由serverSide选项启用，服务器端处理如何运行的完整文档可在本手册的部分中找到。

数据源类型

用于DataTable的主要数据源必须始终是一个数组（使用DOM源数据时会自动创建）。该数组中的每个项目都将定义一个要显示的行，DataTables可以使用三种基本的Javascript数据类型作为行的数据源：

Arrays [ ]
Objects { }
Instances new MyClass()

DataTables可以使用columns.data和columns.render选项从任何这些选项中使用数据。默认的操作模式是一个数组，但是对象和实例可能是有用的，因为在处理复杂的数据时它们通常更直观。

Arrays（数组）

在DataTable中，数组很容易处理，因为数组元素与列之间的映射只是通过读取该位置的数组元素值的列索引来执行的。例如，第一个表列映射到行的数据源的第一个数组元素等

因此，使用数组作为数据源时，每个数组中元素的数量必须等于表中的列数。例如，对于6列表，您可能有：

var data = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$3,120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        "$5,300"
    ]
]

表初始化：

$('#example').DataTable( {
    data: data
} );

Objects（对象）

使用对象的缺点是，您需要明确告诉DataTables应该从每个列的对象中使用哪个属性。这是使用columns.data和/或columns.render选项完成的。

基于对象的数据可能如下所示：

[
    {
        "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"
    }
]

表初始化：

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ]
} );

请注意，只定义了4列，每列中显示的数据很容易通过更改每个属性的使用位置来定义，而不需要像对数组数据源那样重新排序源对象

Instances（实例）

让DataTables显示来自Javascript对象实例的信息是非常有用的，因为这些实例定义了可用于更新数据的抽象方法。例如，你可能有一个Employee类，或一个Car类，等等，这取决于你正在建模的数据。实例可以在DataTables中以与对象几乎相同的方式使用 - 只需传入对象，并columns.data为每个列的数据提供方法或属性名称即可。

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' }
    ]
} );

请注意，这office是上面类的一个方法，而且name、position、salary是属性。DataTables会自动实现一个函数，执行它并使用单元格的返回值（注意你也可以使用语法office()来明确一个函数的使用 - 查看columns.data更多信息）。

像上面的基于对象的数据源方法一样，虽然在这种情况下，Position列的末尾显示的列表示可以按任意顺序读取属性

数据源

通过现在定义的处理模式和数据类型的概念，我们可以考虑DataTables实际上如何获取它所要操作的数据。DataTables将在表中显示的数据有三个基本来源：

DOM（即文档的纯HTML）
使用Javascript
Ajax来源的数据

DOM

当DataTables启动时，它会自动检查它正在操作的表是否已经存在于其中的数据，并将其用于表（注意，如果您使用数据传递data或ajax获取新数据，它将丢弃这些数据！）。这是使用DataTables最简单的方法 - 使用常规的HTML表格。

请注意，使用DOM源表时，默认情况下，DataTables将使用数组作为数据源（请参见上文），不过您可以使用该columns.data选项使其构造行数据的对象。

HTML5

DataTables还可以使用HTML5 data-*属性，这些属性可以为DataTables提供用于排序和搜索数据的附加信息。例如，您可能有格式为“2016年11月21日”的日期列。浏览器将很难排序，但是你可以提供一个data-order属性作为单元格的HTML的一部分，其中包含一个可以很容易地排序的时间戳。扩展这一点，可以使用提供的搜索数据data-search。例如：

<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
    21st November 2016
</td>

数据表将自动检测：

订购数据：data-order和data-sort属性
搜索数据：data-search和data-filter属性。

有关更多信息，请参阅手动输入正交数据。

使用Javascript

您可以指示DataTables使用data初始化选项使用给它的数据。这些数据可以是数组，对象或实例的形式（见上文），可以从任何你想要的地方获得！只要Javascript可以访问数据，你可以把它发送到DataTables（无论是从一个自定义的Ajax调用，一个WebSocket或只是一个老式的数据）。

在广泛使用DataTables API时，此方法可能特别有用，特别是可以使用row.add()和row().remove()方法动态地从表中添加和删除数据，而不管您希望选择的来源。

阿贾克斯

Ajax来源的数据很像Javascript提供的数据，但是DataTables将会通过Ajax调用来获取数据。从特定的脚本中获取表格数据通常是非常有用的，从显示器中分离出检索数据的逻辑。DataTable中的源自Ajax的数据由ajax选项控制。以最简单的形式，将属性值设置为字符串，指向要从中加载数据的URL。

与Javascript源数据一样，Ajax提供的数据可以是对象或数组的形式（参见上文），但在这种情况下不能使用实例（因为它们不能用JSON表示）。

如上所述的服务器端处理是Ajax源数据的特殊形式，其中，仅当需要向用户显示该页面时，才通过Ajax请求来检索针对DataTable中的每个页面显示的数据。这使得服务器上的数据库引擎能够用于大型数据集。有关服务器端处理的更多信息以及如何实现，请参阅本手册中的文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="static/plugins/datatables/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="static/css/nifty.min.css">
    <script src="static/plugins/datatables/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
    <script src="static/plugins/datatables/datatables.min.js"></script>

</head>
<body>
    <div id="page-content">
        <div class="panel">
            <div class="panel-body">
                <table id="example" class="table table-striped table-bordered"  data-order='[[ 1, "asc" ]]' data-page-length='10' cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>入库时间</th>
                        <th>执行状态</th>
                        <th>输出内容</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
    <script>
    $(document).ready(function () {
            var data = [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 11",
                        "timestamp": "1303682400"
                    },
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 11",
                        "timestamp": "1303682400"
                    },
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 11",
                        "timestamp": "1303682400"
                    },
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 11",
                        "timestamp": "1303682400"
                    },
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 11",
                        "timestamp": "1303682400"
                    },
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": {
                        "display": "Mon 25th Apr 10",  // 用户方便读取的值
                        "timestamp": "1303682401"      // 时间戳
                    },
                    "office":     "Edinburgh"
                },
            ];
$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        {
            data: 'start_date',
            render: {
                _: 'display',  // 显示方便读取的值
                sort: 'timestamp' // 排序使用时间戳
            }
        },

    ]
} );
    })
</script>
</html>

正交数据中的预定义值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="static/plugins/datatables/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="static/css/nifty.min.css">
    <script src="static/plugins/datatables/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
    <script src="static/plugins/datatables/datatables.min.js"></script>

</head>
<body>
    <div id="page-content">
        <div class="panel">
            <div class="panel-body">
                <table id="example" class="table table-striped table-bordered"  data-order='[[ 1, "asc" ]]' data-page-length='10' cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>入库时间</th>
                        <th>执行状态</th>
                        <th>输出内容</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
    <script>
    $(document).ready(function () {
            var data = [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },{
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "start_date": "1303682400",
                    "office":     "Edinburgh"
                },
            ];
$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        {
            data: 'start_date',
            render: function (data, type, row) {
                // data : 该字段数据的值
                // type : display,filter
                // row ： 该行数据
                console.log(data, type, row,'123');
                // If display or filter data is requested, format the date
                if ( type === 'display' || type === 'filter' ) {
                    var d = new Date( data * 1000 );
                    return d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
                }

                // Otherwise the data type requested (`type`) is type detection or
                // sorting data, for which we want to use the integer, so just return
                // that, unaltered
                return data;
            }
        },

    ]
} );
    })
</script>
</html>

正交数据中的计算值

40kuai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Datetable

&#13; 先来个官网可以直接看官网 https://www.datatables.net/manual/data/安装DataTables是一个功能强大的Javascript库，用于为HTML表格添加交互功能，而简单性作为整个项目的核心设计原则，开始看起来相当艰巨。但是，采取这些步骤并获取DataTables在您的网站上运行实际上是非常简单的，因为您只需要在页面中添加...
复制链接

扫一扫