首页
/ 正文

jquery datatable（长文讲解）

更新时间: 2025-03-25 10:59:37

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言：为什么选择 jQuery DataTable？

在前端开发中，表格（Table）是最常见的数据展示形式之一。但原生的 HTML 表格功能有限，当数据量较大或需要交互时（如分页、排序、搜索），开发者往往需要额外编写大量代码。jQuery DataTable 正是为了解决这一痛点而诞生的开源插件。它基于 jQuery 构建，通过简洁的配置即可为普通表格添加丰富的交互功能，堪称“表格增强的瑞士军刀”。

对于编程初学者，它降低了复杂功能的实现门槛；对于中级开发者，它提供了灵活的扩展接口。本文将从零开始讲解其核心功能，并通过实战案例展示如何快速上手。

一、快速入门：安装与基本初始化

1.1 安装与依赖关系

使用 jQuery DataTable 需要先引入以下资源：

jQuery：基础库（版本需 1.7+ 或 3.0+）
DataTables 核心文件：包含 CSS、JS 和图片资源
可选的 Bootstrap 集成：若需与 Bootstrap 主题兼容

安装步骤：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 DataTables 核心文件 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

1.2 第一个 DataTable

创建一个基础 HTML 表格，然后通过 JavaScript 初始化：

<table id="example-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

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

效果：表格会自动添加分页、搜索框和排序功能。就像给普通表格“穿上了一件智能外套”——无需一行代码，即可获得专业级交互体验。

二、核心功能详解：分页、排序、搜索

2.1 分页（Pagination）

分页是处理大数据量的核心功能。jQuery DataTable 默认每页显示 10 行，并提供导航按钮切换页面。

配置示例：

$('#example-table').DataTable({
  "pageLength": 5,  // 每页显示5条
  "lengthMenu": [[5, 10, 25, 50], [5, 10, 25, 50]] // 可选每页条数
});

原理比喻：分页就像图书馆的书架分层，用户无需翻阅所有书籍，只需通过“第1层、第2层”快速定位。

2.2 排序（Sorting）

点击表头即可对列数据进行升序/降序排序。若数据包含特殊格式（如日期、货币），需配置排序规则：

$('#example-table').DataTable({
  "columnDefs": [
    {
      "targets": 1,  // 第2列（年龄）
      "orderDataType": "numeric"  // 强制按数字排序
    }
  ]
});

2.3 全局搜索（Search）

顶部的搜索框支持模糊匹配，输入内容后会过滤表格数据。支持正则表达式和自定义搜索逻辑：

// 自定义搜索：忽略大小写
$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    return data[0].toLowerCase().includes('张'); // 过滤姓张的行
  }
);

三、进阶功能：定制列与数据源

3.1 定制列渲染（Column Rendering）

默认列显示的是 HTML 内容，但可通过 render 函数动态生成内容。例如：

$('#example-table').DataTable({
  "columns": [
    { "data": "name" },  // 直接显示name字段
    {
      "data": "status",
      "render": function(data, type, row) {
        return data === 'active' ? '<span class="badge bg-success">启用</span>' : '<span class="badge bg-danger">禁用</span>';
      }
    }
  ]
});

比喻：render 函数如同“翻译官”，将原始数据翻译成用户可读的格式（如状态标签、进度条）。

3.2 动态数据加载（AJAX）

当数据量极大或需要实时更新时，可通过 AJAX 从服务器获取数据：

$('#example-table').DataTable({
  "ajax": {
    "url": "/api/data",
    "dataSrc": ""  // 返回数据不嵌套时使用
  },
  "columns": [
    { "data": "name" },
    { "data": "age" }
  ]
});

服务器响应示例：

[
  {"name": "李四", "age": 32},
  {"name": "王五", "age": 25}
]

四、事件与插件：扩展功能边界

4.1 事件监听（Event Handling）

通过监听 DataTable 的事件，可实现自定义逻辑。例如，在表格绘制完成后加载地图：

var table = $('#example-table').DataTable();
table.on('draw', function() {
  // 绘制完成后执行
  initializeMap(); // 假设该函数渲染地图
});

4.2 插件扩展（Plug-ins）

官方提供了大量插件，如 Buttons（导出功能）、Responsive（响应式布局）。安装后可通过配置启用：

// 引入 Buttons 插件
<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>

// 配置导出按钮
$('#example-table').DataTable({
  "buttons": ['copy', 'csv', 'excel']
});

五、实战案例：构建电商订单管理系统

5.1 需求分析

假设需展示订单列表，要求：

分页显示（每页10条）
按订单金额排序
搜索订单号或用户
显示状态标签（如“已发货”“待支付”）

5.2 HTML 结构

<table id="orders-table">
  <thead>
    <tr>
      <th>订单号</th>
      <th>用户</th>
      <th>金额（元）</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据由后端填充 -->
  </tbody>
</table>

5.3 JavaScript 配置

$(document).ready(function() {
  $('#orders-table').DataTable({
    "ajax": "/api/orders",
    "columns": [
      { "data": "order_id" },
      { "data": "user" },
      {
        "data": "amount",
        "render": function(data) {
          return '¥' + data.toFixed(2); // 格式化金额
        }
      },
      {
        "data": "status",
        "render": function(data) {
          const statusMap = {
            'paid': 'success',
            'pending': 'warning',
            'shipped': 'info'
          };
          return `<span class="badge bg-${statusMap[data]}">${data}</span>`;
        }
      }
    ],
    "order": [[2, 'desc']], // 默认按金额降序排列
    "lengthMenu": [10, 25, 50]
  });
});

5.4 效果预览

分页导航与搜索框自动生效
点击“金额”列可快速筛选高价值订单
状态列显示不同颜色的标签（如绿色表示已支付）

六、高级技巧与最佳实践

6.1 多语言支持（i18n）

通过 language 配置项切换界面语言：

"language": {
  "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/zh-Hans.json" // 中文
}

6.2 性能优化

延迟加载：deferRender 减少 DOM 渲染时间
服务器分页：通过 serverSide: true 让后端处理大数据
冻结列：fixedColumns 插件固定左侧列，适合宽表格

6.3 主题定制

通过覆盖 CSS 类或使用 Bootstrap DataTables 插件，可快速适配项目风格：

<!-- 引入 Bootstrap 风格 -->
<link rel="stylesheet" href="https://cdn.datatables.net/bootstrap/4.1.1/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/bootstrap/4.1.1/js/dataTables.bootstrap4.min.js"></script>

<script>
$('#example').DataTable({
  "dom": 'Bfrtip', // 使用 Bootstrap 样式按钮
  "buttons": ['copy', 'print']
});
</script>

结论：让数据展示更优雅

jQuery DataTable 通过极简的 API 封装了复杂的表格交互逻辑，帮助开发者快速构建专业级数据展示界面。无论是初学者还是进阶开发者，都能从中受益：

新手：通过简单配置即可获得完整的表格功能
进阶开发者：可深度定制渲染逻辑、集成第三方插件

建议在项目中结合以下资源进一步学习：

官方文档：DataTables 官网
社区插件库：探索 DataTables Plug-ins
实战案例：GitHub 上的开源项目（如电商系统、CRM 界面）

通过本文的讲解与案例，相信你已掌握了 jQuery DataTable 的核心用法。接下来，不妨尝试将其应用到你的项目中，让数据展示更直观、更高效！