前端控件JQuery Datatables使用——常用功能初始化

最新推荐文章于 2025-07-01 14:21:23 发布

机械键盘侠

最新推荐文章于 2025-07-01 14:21:23 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端插件

本文链接：https://blog.youkuaiyun.com/xuchen_wang/article/details/99735625

本文详述了如何初始化和扩展JQuery Datatables，包括Buttons功能（如打印、复制、导出）、Select（行选择）、ColReorder（列排序）和FixedColumns（固定列）。通过引入必要的JS和CSS文件，实现了如Excel导出、列可见性控制、全选取消等实用特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文用于自己记录，忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址

JQuery Datatables初始化

个人比较喜欢JQueryDatatables的Bootstrap4风格，所以文章以Bootstrap4风格为例。

JQueryDatatable的初始化很简单，按照官网的举例说明，只要如下几个JS和CSS文件即可：

1、jquery-3.3.1.min.js，当然高版本的JS也是可以的

2、jquery.dataTables.min.js

3、dataTables.bootstrap4.min.js

4、bootstrap.min.css

5、dataTables.bootstrap4.min.css

注意：JS文件的引用顺序很重要，JQuery必须放在第一位，然后dataTables.min.js是第二位，JQuery不能重复引用

既然使用了bootstrap.min.css，那我加入了bootstrap.min.js了，就用Bootstrap框架。忽略文件路径，代码如下图所示：

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/datatables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/datatables/dataTables.bootstrap4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>

再加入官网复制来的HTML代码(因为太长，所以这里只列举了一部分)，如下图所示：

<table id="example" class="table table-striped table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>$320,800</td>
            </tr>
            .............
        </tbody>
    </table>

再加入一段基本的JS代码，如下图所示：

<script type="text/javascript">
    var dtsLanguage = "/Scripts/datatables/datatables_zh-cn.txt"
    var mytable;

    $(document).ready(function () {

        mytable = $('#example').DataTable({
            pagingType: "full_numbers",
            language: {
                url: dtsLanguage
            }
        });

        mytable.on('order.dt search.dt', function () {
            mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();
    });
</script>

变量dtsLanguage存放了一个配置文件地址，配置文件用于更换默认英文的语言配置为中文配置，配置文件的内容如下：

{
    "buttons": {
		"pageLength": "显示 %d 行",
        "excel":"<i class='fa fa-file-excel-o'></i>&nbsp;导出Excel"
	},
    "decimal": "",
    "emptyTable": "表中数据为空",
    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
    "infoFiltered": "(由 _MAX_ 项结果过滤)",
    "InfoPostFix": "",
    "thousands": ",",
    "lengthMenu": "显示 _MENU_ 项结果",
    "loadingRecords": "载入中...",
    "proces