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

jQuery表格插件datatables用法详解

• JavaScript

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日

相关文章

  • javascript面向对象之定义成员方法实例分析

    JavaScript面向对象之定义成员方法实例分析 在JavaScript中，可以使用面向对象的思想来编写代码，其中定义成员方法是非常常见的操作。本文将详细讲解如何定义成员方法以及如何使用。 什么是成员方法 成员方法是一种在类或对象中定义的函数。它们可以访问类或对象的数据和其他方法，并能够执行特定的操作。 如何定义成员方法 在JavaScript中，可以通过…

    JavaScript 2023年5月27日
    00

  • JavaScript+HTML5实现的日期比较功能示例

    这篇攻略将向您介绍如何使用JavaScript和HTML5技术实现日期比较功能。我们会分别针对两种不同的日期比较场景，提供详细的示例说明。 1. 场景一：比较两个日期之间的天数差 在许多场景下，需要计算两个日期之间相隔的天数差，比如在开发借还书管理系统时，需要计算借书日期到还书日期之间的天数差。下面的示例代码将演示如何实现这一功能。 1.1 HTML代码 &…

    JavaScript 2023年5月27日
    00

  • js中的时间转换—毫秒转换成日期时间的示例代码

    下面是“js中的时间转换—毫秒转换成日期时间”的完整攻略。 原理 在Javascript中，可以通过 Date 对象来进行时间的转换，其中 Date 对象提供了一些方法用于获取和设置时间。其中，我们可以通过 getTime() 方法来获取当前时间对应的毫秒数，然后再通过 new Date() 方法将其转化为日期时间。 示例代码 下面是将毫秒数转换为日期时间的…

    JavaScript 2023年5月27日
    00

  • javascript获取dom的下一个节点方法

    当我们需要获取一个DOM元素的下一个兄弟节点时，有以下两个方法： 方法一：使用nextSibling属性 DOM节点对象拥有一个nextSibling属性，该属性用于获取当前节点的下一个兄弟节点。需要注意的是，这个属性获取到的兄弟节点可能是文本节点、注释节点等。 // 获取 id 为 "test" 的元素的下一个兄弟节点 var test…

    JavaScript 2023年6月10日
    00

  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API是HTML5标准中新增加的一个API，主要用来处理浏览器的历史记录和URL。同时，它也提供了许多操作浏览器历史记录的方法，其中的一个重要的方法就是pushState()。pushState()方法能够把state对象和修改后的URL添加到浏览器的历史记录中，而且并不会刷新页面。 通过使用pushState()方法，…

    JavaScript 2023年6月11日
    00

  • JavaScript遍历Json串浏览器输出的结果不统一问题

    问题描述： 在JavaScript中遍历Json字符串时，不同的浏览器会输出不同的结果，导致开发者难以准确依赖其输出结果，进而对程序的正确性进行判断。 问题原因： 不同浏览器对Json字符串的处理方式存在一些细微的差异，如浏览器可能会为Json对象的属性添加双引号或单引号，不同的浏览器可能会针对Json字符串采用不同的解析方式，未能完全遵循标准的Json格式…

    JavaScript 2023年5月27日
    00

  • JavaScript canvas实现文字时钟

    JavaScript的Canvas是一个非常强大的图像处理工具，它可以用来创建各种各样的特效，比如实现文字时钟。下面我将提供完整的实现攻略，希望能够对你有所帮助。 准备工作 在开始实现之前，需要准备以下工作： 在HTML中创建一个canvas标签，并指定合适的宽度和高度。 在JavaScript中获取该canvas标签，并获取其上下文。 设定需要显示的时间格…

    JavaScript 2023年5月27日
    00

  • js COL能很好的控制表格的列

    JS COL指的是JavaScript中的HTML DOM元素中的col对象，通过JS代码操作col对象可以对表格中某一列的特征进行修改。 下面是操作表格中某一列时常用的一些属性： align：水平方向上的对齐方式。 width：设置该列的宽度，比如设置width为”100″，则表示该列的宽度为100个像素。 span：设置该列跨几列，比如设置span为”2…

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