DataTables 使用小结

最新推荐文章于 2025-07-10 16:19:40 发布

Skylrk

最新推荐文章于 2025-07-10 16:19:40 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： DataTables

本文链接：https://blog.csdn.net/u011510678/article/details/82927539

前端专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨DataTables插件的使用技巧，涵盖引入方法、基本配置、服务器分页及搜索功能，适合希望优化表格展示效果的前端开发者。

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

DataTables 使用小结

使用过一段时间的DataTables , 非常强大的一个table插件。一直在不停的更新。
官网： https://datatables.net/

引入

一个简单的demo

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
 <table id="myTable" 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>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
</body>

DataTables 提供了各种皮肤，根据需要引入。

基本配置

演示了比较常用的设置

<script>
 $('#myTable').DataTable({
                "language": {
                    "lengthMenu": "显示 _MENU_ 条",
                    "zeroRecords": "没有数据",
                    "paginate": { "first": "第一页", "last": "最后一页", "next": "下一页", "previous": "上一页" }
                },
                'dom': '<"top">rt<"bottom"p><"clear">',  // 布局
                'processing': true, // 显示加载提醒
                'serverSide': true, // 服务器分页
                'paging': true,  // 是否分页
                "ordering": false, // 是否排序
                "info": false, // 显示显示info
                'searching': true,  // 是否使用搜索api
                'searchDelay': 350, // 搜索延迟
                'ajax': { 'url': '/api/news/page', 'type': 'post' }, // 请求路径和方式
                "columns": [ // 绑定列
                    // 不绑定值
                    { "data": null }, 
                    // 绑定值，并自定义渲染方式
                    {
                        "data": "image",
                        render: (data, type, full) => {
                            return '<img src="' + getImageUrl(data) + '" width=150 />';
                        }
                    },
                    { "data": "title" },
                    { "data": "intro" },
                    {
                        "data": "status",
                        render: (data, type, full) => {
                            return publishStatus(data);
                        }
                    },
                    {
                        "data": "createDate",
                        render: (data, type, full) => {
                            return dateFormat(data)
                        }
                    },
                    {
                        "data": "publishDate",
                        render: (data, type, full) => {
                            return dateFormat(data)
                        }
                    },
                    {
                        "data": "updateDate",
                        render: (data, type, full) => {
                            return dateFormat(data)
                        }
                    },
                    // 最后一列 操作列-绑定到id,方便操作
                    {
                        "data": "id",
                        render: (data, type, full) => {
                            return createButton(data);
                        }
                    },
                ],
                // 请求后的回调函数
                "fnDrawCallback": function (oSettings) {
                    // 获得 response
                    var json = $.parseJSON(oSettings.jqXHR.responseText);
	                // 设置序号
                    this.api().column(0).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }
            });
            function dateFormat(date) {
                if (!$.isEmptyObject(date) || date == '' || date == null) {
                    return '空';
                }
                return moment(date).format('YYYY-MM-DD HH:mm');
            }
            function createButton(id) {
                return `<div>
                      <button type="button" class="btn btn-success btn-sm" onclick="publishById(` + id + `)">发布</button>
                      <button type="button" class="btn btn-info btn-sm" onclick="editById(` + id + `)">编辑</button>
                      <button type="button" class="btn btn-danger btn-sm" onclick="deleteById(` + id + `)">删除</button>
               </div>`
            };
</script>

服务器分页

前端传递的主要数据： draw ，start， length

draw 第几次请求
start 从哪里开始，注意这里不是页码
length 一页长度

页码要自己计算

服务器返回的json格式

{
    "draw": 1,
    "recordsTotal": 3, 
    "recordsFiltered": 3,
    "data": [
        {
            "id": 1,
            "title": "xxxxxxxx",
            "content": "yyyyyyy"
        }
        // ....
    ]
}