1. Python技术站首页
  2. 其他
  3. JavaScript

jQuery表格插件datatables用法详解

• JavaScript
yizhihongxing

jQuery表格插件datatables用法详解

简介

datatables是一款非常流行的jQuery表格插件，它具有高度的灵活性和扩展性，可以帮助开发者方便地生成丰富交互性的数据表格。datatables支持多种数据源和接口，可以与各种服务器端语言如PHP、Java、.Net等进行交互。datatables还拥有众多强大的扩展插件，可用于实现排序、过滤、分页、搜索等功能。

以下为使用datatables生成数据表格的详细步骤：

安装

datatables可以在官网 https://datatables.net/ 下载，主要有两种部署方式：

  • 直接使用datatables官方提供的JS和CSS文件；
  • 使用npm进行包管理，使用时候再import。

HTML结构

在HTML代码中，需要设置一个table元素并添加thead和tbody，如下所示：

<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>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

初始化DataTable

在调用datatables之前，需要先引入datatables的JS文件和CSS文件，并在JS代码中进行初始化设置。

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>

此时，我们已经成功地实现了一个最基本的datatable表格。

配置选择器

在datatables中，可以通过选择器选取一个或多个table元素，并对它们进行不同的设置。选择器可以是一个CSS类名或者一个ID名。

$('.my-table').DataTable();

$('#example1, #example2').DataTable();

设置列的排序和搜索功能

在默认情况下，datatables会自动为列设置排序和搜索功能。如果想要针对某一列禁用排序和搜索功能，可以在datatable中进行设置。

$('#example').DataTable( {
    "columnDefs": [
        { "orderable": false, "targets": 1 }
    ]
} );

上述代码将禁用第二列的排序和搜索功能。

配置数据源

在默认情况下，datatables中的数据源可以是一个HTML table或者一个Javascript的二维数组。如果需要从服务器获取数据，可以通过ajax向服务器发送请求获取数据。

$('#example').DataTable( {
    "ajax": "/data/data.json"
} );

上述代码将从服务器加载一个名为"data.json"的JSON数据文件，文件中包含所需的数据。加载成功后，datatables将自动将数据插入数据表格中。

配置自定义分页

在datatables中，可以使用默认的分页功能，也可以对分页进行自定义操作。可以使用插件自定义分页效果，或是通过回调函数定制自己的分页操作。

$('#example').DataTable( {
    "pagingType": "full_numbers",
    "pageLength": 5
} );

上述代码将使用full_numbers类型的分页效果，每页显示5行数据。

示例1

以下示例将演示如何使用datatables从服务器加载json数据。

<!DOCTYPE html>
<html>

<head>
    <title>DataTable Demo</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
</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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "ajax": {
                    "url": "/data/data.json",
                    "dataSrc": ""
                },
                "columns": [{
                        "data": "name"
                    },
                    {
                        "data": "position"
                    },
                    {
                        "data": "office"
                    },
                    {
                        "data": "age"
                    },
                    {
                        "data": "start_date"
                    },
                    {
                        "data": "salary"
                    }
                ]
            });
        });
    </script>
</body>

</html>

上述代码演示了如何使用datatables从服务器上加载json数据。通过配置ajax选项，datatables会向指定的地址发送请求获取数据，并自动将数据渲染在数据表格中。

示例2

以下示例演示如何使用datatables生成可编辑表格。

<!DOCTYPE html>
<html>

<head>
<title>DataTables Editable Cells using jEditable</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jeditable/2.7.1/jquery.jeditable.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // initialize DataTable
    var oTable = $("#example").DataTable({
        "bRetrieve": true,
        "bPaginate": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "aoColumns": [
            {"sWidth": "200px"},
            {"sWidth": "100%"},
            {"sWidth": "50px"}
        ],
        "fnDrawCallback": function() {
            $('td.editable', this).editable(function(value, settings) {
                return value;
            }, {
                indicator: '正在保存数据...',
                cancel: '取消',
                submit: '保存',
                tooltip: '点击可编辑',
                sHeight: "30px",
                cssclass: "form-control"
            });
        }
    });

    // click handler for delete button
    $('#example tbody').on('click', 'td.delete', function () {
        if (confirm("确定删除该条记录吗?")) {
            var nRow = $(this).parents('tr')[0];
            oTable.fnDeleteRow( nRow );
        }
    });

    // click handler for add button
    $('#example tbody').on('click', 'input.btnAdd', function () {
        oTable.fnAddData([
            '',
            '',
            '<td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>'
        ]);
        $('td.editable', oTable.fnGetNodes()).editable(function(value, settings) {
            return value;
        }, {
            indicator: '正在保存数据...',
            cancel: '取消',
            submit: '保存',
            tooltip: '点击可编辑',
            sHeight: "30px",
            cssclass: "form-control"
        });
    });
});

</script>

</head>

<body>
    <table id="example">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="editable">John</td>
                <td class="editable">Doe</td>
                <td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>
            </tr>
            <tr>
                <td class="editable">Jane</td>
                <td class="editable">Doe</td>
                <td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td><input type="button" class="btnAdd" value="添加" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

上述示例演示了如何使用datatables生成可编辑表格，以及使用jquery-jeditable插件实现in-place编辑效果。用户可以直接在表格中进行编辑操作，包括添加、删除、修改内容等操作。

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

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

相关文章

  • JS获取屏幕高度的简单实现代码

    当我们需要获取浏览器窗口可视区域的高度时，可以使用JavaScript代码来实现。下面是获取屏幕高度的简单实现代码攻略： 1.通过window对象获取屏幕高度 我们可以通过window对象来获取浏览器窗口的高度。这里有一个简单的例子： var height = window.innerHeight; 其中，window.innerHeight属性用于获取浏览…

    JavaScript 2023年6月11日
    00

  • jQuery 1.5.1 发布，全面支持IE9 修复大量bug

    jQuery 1.5.1 是一款流行的 JavaScript 库，它提供了便捷的 API 和强大的功能，可以让开发人员更加轻松地操作网页中的元素，处理事件等等。对于使用 jQuery 的开发人员来说，版本更新是必不可少的，因为每个版本都会修复一些 bug，增加新的功能。下面我来详细讲解一下“jQuery 1.5.1 发布，全面支持IE9 修复大量bug”的完…

    JavaScript 2023年6月11日
    00

  • js根据json数据中的某一个属性来给数据分组的方法

    实现 JS 根据 JSON 数据中的某一个属性来给数据分组的方法，可以使用 Array.prototype.reduce() 方法和 object[key] 或 Object.assign() 来处理分组数据。 以下是具体步骤： 首先，使用 Array.prototype.reduce() 方法来遍历 JSON 数据，并将其分组为一个对象。 在 reduce…

    JavaScript 2023年5月27日
    00

  • JS实现两周内自动登录功能

    实现两周内自动登录的功能需要涉及到一些技术点，下面是完整的攻略： 技术点 Cookie / LocalStorage：用于保存登录状态和用户信息，以及判断用户是否已登录。 路由拦截：在用户未登录的情况下，将其重定向至登录页面。可以通过 Vue Router 的全局前置守卫实现。 Token 认证：为了保证用户信息的安全性，一般需要在后台生成一个 Token，…

    JavaScript 2023年6月11日
    00

  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller都是函数对象的属性，它们可以完成一些特殊的功能。但是，它们的使用需要注意一些细节。接下来，我将为大家详细讲解callee和caller的区别和用法，并提供实例说明。 callee和caller的区别 callee是一个指向当前函数对象的指针，在函数内部可以使用arguments.callee来调用当前函数对象自…

    JavaScript 2023年6月10日
    00

  • 如何编写高质量JS代码

    当我们编写JavaScript代码时，我们应该注意一些最佳实践以确保代码的质量和可维护性。 以下是编写高质量JS代码的完整攻略： 1. 了解和遵循编码标准 良好的编码标准可以确保不同的人员在编写代码时都能够遵循相同的标准。这样可以使代码易于阅读和理解，也可以避免常见的错误。在JavaScript中，我们可以使用ESLint等工具来实现这一点。 示例说明： /…

    JavaScript 2023年5月27日
    00

  • 改变checkbox默认选中状态及取值的实现代码

    下面我将为你详细讲解如何改变checkbox默认选中状态及取值的实现代码。 修改checkbox默认选中状态 通过HTML的checked属性 checkbox的默认选中状态可以通过HTML的checked属性来设置。该属性值为true时，checkbox为选中状态；为false时，checkbox为未选中状态。如下所示为一个未选中的checkbox： &l…

    JavaScript 2023年6月11日
    00

  • js设置默认时间跨度过程详解

    JavaScript 设置默认时间跨度过程详解 在编写网站或应用程序时，常常需要对一些时间进行处理。如果存在时间跨度选择功能，通常也需要为其提供默认时间跨度。下面将讲解如何使用 JavaScript 设置默认时间跨度。 一、获取当前时间 在设置默认时间跨度之前，我们需要先获取当前时间。可以使用 JavaScript 中的Date对象来获取。 const no…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部