1. Python技术站首页
  2. css

jQuery表格插件datatables用法总结

• css
yizhihongxing

jQuery表格插件Datatables用法总结

什么是Datatables?

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

如何使用Datatables？

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

  1. 下载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>
  1. 在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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

    让我来详细讲解一下如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度的攻略。 问题描述 在HTML中，pre元素和textarea元素都是常用于显示文本的元素。但是，它们在默认情况下都会出现滚动条，如果文本内容过长会导致页面布局不够美观。所以，我们需要去掉它们的滚动条，并让它们自动换行、自适应文本内容高度。 解决方法 去掉滚动条…

    css 2023年6月10日
    00

  • 单/多行文本添加省略号方法详解

    单行文本添加省略号 如果你需要在页面中显示一段过长的单行文本，而空间有限，这时你可以使用省略号来代替部分文字，使得整个文本能够正常显示。在Markdown中，我们可以通过以下两种方法实现单行文本添加省略号。 使用CSS 通过以下代码，我们可以使用CSS的text-overflow属性来为单行文本添加省略号。 .ellipsis { text-overflow…

    css 2023年6月10日
    00

  • CSS3中Animation动画属性用法详解

    针对“CSS3中Animation动画属性用法详解”，我将给出以下内容： CSS3中Animation动画属性用法详解 介绍 CSS3中的Animation动画属性可以帮助我们实现更加生动的页面动效。 Animation动画属性包含了很多可用的子属性，如 Timing Function、Iteration Count、Direction、Delay、Dura…

    css 2023年6月9日
    00

  • html中的div、td 、p 等容器内强制换行和不换行的实现

    在HTML中，我们可以使用CSS样式来控制容器内的强制换行和不换行。 强制换行 我们可以使用CSS的white-space属性来实现容器内的强制换行，其中white-space属性有以下几个取值： normal：默认值，合并自然的空白符序列，该序列被换成单个空格符。 nowrap：连续的空白符会被合并成一个空格符，文本在容器内不会换行。 pre：保留所有空白…

    css 2023年6月9日
    00

  • 仅使用CSS做到完全居中的超级攻略

    仅使用CSS做到完全居中的超级攻略 在Web开发中，居中是一个非常常见的需求，本攻略将详细讲解如何仅使用CSS做到完全居中，包括水平居中和垂直居中的实现方法，以及两个示例说明。 1. 水平居中的实现方法 1.1. 行内元素的水平居中 对于行内元素，可以使用text-align属性来实现水平居中。例如： div { text-align: center; } …

    css 2023年5月18日
    00

  • 基于jQuery实现的无刷新表格分页实例

    下面就是“基于jQuery实现的无刷新表格分页实例”的完整攻略： 1. 实现原理 1.1 分页原理 在实现无刷新表格分页前，我们需要了解分页原理。分页是指将一个数据集按照固定大小分成若干页的过程，每页显示一定行数的数据。分页常用于数据量较大的情况下，可以降低页面加载时间和服务器压力，提高用户体验。在实现分页时，我们需要知道当前页码和每页显示的数据条数，从而计…

    css 2023年6月10日
    00

  • 使用HTML5 Canvas绘制直线或折线等线条的方法讲解

    让我来详细地讲解一下如何使用HTML5 Canvas绘制直线或折线等线条。 首先，我们需要明确Canvas是HTML5提供的一个绘图API，可以用来绘制各种图形。其中绘制直线或折线的方法主要包括以下步骤： 获取canvas对象：我们可以使用HTML的标签创建一个canvas对象，也可以使用JavaScript的document.getElementById(…

    css 2023年6月9日
    00

  • 关于Spring的统一功能处理(拦截器)实现

    关于Spring的统一功能处理(拦截器)实现的攻略如下： 什么是拦截器 拦截器是一种AOP技术，可以在方法被调用前后、抛出异常时等不同的时刻执行特定的逻辑，可以用于处理日志、权限验证、异常处理等统一的功能，提高开发效率和代码的可维护性。 如何实现拦截器 Spring框架提供了两种方式实现拦截器： 1. 实现HandlerInterceptor接口 在Spri…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部