jQuery表格插件Datatables用法总结

什么是Datatables?

Datatables是一款非常强大的jQuery表格插件，它可以提供对表格中的数据进行高度可定制化的展示、排序、搜索、分页等功能。Datatables有非常完善的文档和示例，并且其API非常丰富，让使用者可以非常灵活地定制表格。

如何使用Datatables？

使用Datatables非常简单，您只需引入Datatables的js和css文件，并对您的表格进行初始化即可。具体步骤如下：

下载Datatables插件并引入js和css文件

你可以从Datatables官网或Github上下载Datatables插件。在你的html中引入Datatables的js和css文件，示例如下：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

在table添加Datatables初始化语句

在你的html文件中找到你想要使用Datatables的表格，为其加上一个唯一的id，如下所示：

<table id="example">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
            <td>jd0001</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Doe</td>
            <td>jd0002</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bob</td>
            <td>Smith</td>
            <td>bs0001</td>
        </tr>
    </tbody>
</table>

在你的javascript文件中，使用以下的代码对datatable进行初始化：

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

Datatables的常用功能

这里讲解了Datatables的一些常用功能。

排序

Datatables可以非常方便地进行按列排序。再次打开初始化部分的代码，在代码中加入如下的内容，即可启用排序功能：

$(document).ready(function() {
    $('#example').DataTable({
        "columnDefs": [{
            "targets": 'no-sort',
            "orderable": false,
        }]
    });
});

在你的html文件中，给你的表头元素加上data-sortable="false"属性并赋值为false。

<thead>
    <tr>
        <th data-sortable="false">#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
</thead>

搜索

Datatables也提供了快速搜索表格数据的功能。 Datatables的默认搜索功能可在表格中任意位置全局搜索。可以使用Datatables提供的搜索组件来更好的进行搜索操作。要启用搜索，我们只需要给Datatables增加一个配置项即可：

$(document).ready(function() {
    $('#example').DataTable({
        "searching": true,
        "lengthChange": false,
    });
});

这样，搜索框和搜索按钮会自动呈现在表格的右上角。

分页

Datatables还提供了分页功能，将数据拆分成逻辑“页”。支持多种样式的分页和自定义分页布局。你可以通过以下配置启用分页：

$(document).ready(function() {
    $('#example').DataTable({
        "paging": true,
        "pageLength": 10,
    });
});

其中，pageLength 用于设置每页要显示的数据条数。

示例1：服务器端数据表格

Datatables支持服务器端数据源，使得能够高效处理大型数据集并进行快速搜索和排序等操作。在这个示例中，我们将通过AJAX从服务器获取数据，并使用Datatables将其呈现到前端。

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable({
            "processing": true, // 加载数据时显示处理中的提示信息
            "serverSide": true, // 告诉DataTables通过AJAX从服务器端获取数据
            "ajax": {
                "url": "your_api_url",
                "type": "POST",
                "data": function(data) {
                    data.custom = "your_custom_data";
                    return data;
                }
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "start_date" },
                { "data": "salary" }
            ]
        });
    });
</script>

在这个示例中，我们使用了serverSide选项告诉Datatables从服务器端获取数据。在这里，我们将在服务器端API中处理数据，并将数据返回到前端，Datatables将以JSON格式接收数据。在Datatables的columns属性中，我们将每一列的数据映射到返回的JSON中的相应数据。

当您想自定义数据请求时，可以在ajax的data中添加自定义属性，如文中的custom字段。

示例2：可编辑的DataTables

Datatables还支持编辑数据的功能。使用Datables的内置Editor插件，我们可以方便地编辑表格中的数据。首先你需要引入Editor插件的js和css文件，函数体内使用editor。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Editable DataTables using Editor</title>  

    <!-- jQuery DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">

    <!-- DataTables Editor CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/editor/1.0.0/css/editor.dataTables.min.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script> 

    <!-- jQuery DataTables -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

    <!-- DataTables Editor -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/editor/1.0.0/js/dataTables.editor.min.js"></script>
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript" language="javascript" class="init">
        $(document).ready(function() {
            var editor = new $.fn.dataTable.Editor( {
                ajax: "your_api_url",
                table: "#example",
                fields: [ {
                        label: "Name:",
                        name: "name"
                    }, {
                        label: "Position:",
                        name: "position"
                    }, {
                        label: "Office:",
                        name: "office"
                    }, {
                        label: "Age:",
                        name: "age"
                    }, {
                        label: "Start date:",
                        name: "start_date",
                        type: "datetime"
                    }, {
                        label: "Salary:",
                        name: "salary"
                } ]
            } );

            $('#example').DataTable( {
                dom: "Bfrtip",
                ajax: "your_api_url",
                columns: [
                    { data: "name" },
                    { data: "position" },
                    { data: "office" },
                    { data: "age" },
                    { data: "start_date" },
                    { data: "salary" }
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit",   editor: editor },
                    { extend: "remove", editor: editor }
                ]
            } );
        } );
    </script>
</body>
</html>

在这个示例中，我们使用了Datatables内置的Editor插件，使用了简单的增删改数据的操作。 fields数组定义了表单的每个字段，然后使用ajax属性将表单数据提交到服务器端。这个示例使用的是DataTables编辑器的默认API，但你可以修改这个URL地址为你想使用的API。在Datatables的columns属性中，我们将每一列的数据映射到返回JSON中的相应数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery表格插件datatables用法总结 - Python技术站

jQuery表格插件datatables用法总结