首页
/ 正文

jquery datatables（超详细）

更新时间: 2025-03-25 15:27:44

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

在现代 Web 开发中，数据展示与交互是核心需求之一。当需要将大量数据以表格形式呈现时，手动编写分页、排序、搜索等功能不仅耗时，而且容易出错。jQuery DataTables 作为一款轻量级且功能强大的插件，完美解决了这一痛点。它通过简洁的 API 和丰富的配置选项，让开发者能够快速构建动态、交互友好的表格。本文将从基础到进阶，结合实际案例，深入讲解如何高效使用 jQuery DataTables，帮助开发者快速上手并掌握其核心功能。

一、什么是 jQuery DataTables？

jQuery DataTables 是一个基于 JavaScript 的开源插件，主要用于增强 HTML 表格的交互能力。它将静态表格转化为动态组件，支持分页、排序、搜索、列筛选、数据导出等功能。其核心优势在于：

简化开发流程：通过一行代码即可初始化表格，无需手动编写复杂逻辑。
高度可定制化：提供超过 200 个配置参数，满足个性化需求。
跨浏览器兼容性：支持主流浏览器，包括 Chrome、Firefox、Safari 等。

比喻：可以将 jQuery DataTables 想象为“表格装修工具包”——它为原始 HTML 表格“刷上油漆”（添加样式）、“安装家具”（增加功能），最终将其打造成一个美观且实用的“数据客厅”。

二、快速入门：初始化与基本配置

1. 引入依赖

使用 jQuery DataTables 前，需先引入以下资源：

jQuery（版本 1.7+ 以上）
DataTables CSS 和 JavaScript 文件

<!-- 引入 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>

2. 基础 HTML 表格结构

创建一个标准的 HTML 表格，需包含 <thead> 和 <tbody> 标签：

<table id="example-table" class="display">  
  <thead>  
    <tr>  
      <th>姓名</th>  
      <th>年龄</th>  
      <th>城市</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>张三</td>  
      <td>28</td>  
      <td>北京</td>  
    </tr>  
    <!-- 其他行数据 -->  
  </tbody>  
</table>

3. 初始化 DataTables

通过 JavaScript 初始化表格：

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

执行上述代码后，原始表格将自动升级为支持分页、排序和搜索的动态表格。

三、核心功能详解与配置

1. 分页（Pagination）

默认情况下，DataTables 会自动启用分页功能，每页显示 10 条数据。可以通过 pageLength 参数自定义每页数量：

$('#example-table').DataTable({  
  pageLength: 5  // 每页显示5条  
});

2. 排序（Sorting）

点击表头即可触发列排序，默认支持升序和降序。若需禁用某一列的排序功能，可设置 orderable: false：

<!-- 在表头列中添加 class="no-sort" -->  
<th class="no-sort">操作</th>

并在初始化时配置：

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

3. 搜索（Search）

顶部的搜索框支持全局关键词匹配，默认区分大小写。若需禁用大小写敏感，可配置 caseInsensitve: true：

$('#example-table').DataTable({  
  search: {  
    caseInsensitive: true  
  }  
});

四、进阶功能与案例演示

1. 列筛选（Column Filtering）

通过 columns.search() 方法可为特定列添加独立搜索框：

// 为第三列（城市）添加筛选  
var table = $('#example-table').DataTable();  
table.columns(2).every(function() {  
  var that = this;  
  $('<input type="text" placeholder="搜索城市">' )  
    .appendTo( $(this.footer()) )  
    .on('keyup', function() {  
      that.search(this.value).draw();  
    });  
});

2. 服务器端处理（Server-Side Processing）

当数据量超过万级时，建议使用服务器端分页。通过 serverSide: true 开启功能，并定义 ajax 请求：

$('#example-table').DataTable({  
  serverSide: true,  
  ajax: {  
    url: '/api/data',  
    data: function(d) {  
      // 自定义发送参数（如分页信息）  
      d.start = d.start;  
      d.length = d.length;  
    }  
  },  
  columns: [  
    { data: 'name' },  
    { data: 'age' },  
    { data: 'city' }  
  ]  
});

3. 数据导出（Export）

集成导出功能需额外引入 Buttons 插件：

<!-- 引入 Buttons 插件 -->  
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">  
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.min.js"></script>  
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

在初始化时配置：

$('#example-table').DataTable({  
  dom: 'Bfrtip',  
  buttons: ['copy', 'csv', 'excel', 'pdf', 'print']  
});

五、常见问题与解决方案

1. 表格未渲染

原因：未正确引入依赖文件或 HTML 表格缺少 id。
解决：检查 CDN 链接有效性，并确保表格的 id 与 JavaScript 选择器一致。

2. 列宽不自适应

原因：默认情况下，DataTables 会根据内容自动调整列宽，但复杂布局可能导致溢出。
解决：使用 autoWidth: false 并手动设置列宽：

$('#example-table').DataTable({  
  autoWidth: false,  
  columns: [  
    { width: '30%' },  
    { width: '20%' },  
    { width: '50%' }  
  ]  
});

3. 服务器端分页数据格式错误

原因：后端返回的数据格式不符合 DataTables 的期望结构。
解决：确保返回 JSON 包含 draw、recordsTotal、recordsFiltered 和 data 四个字段。

六、实战案例：用户管理系统

1. 需求场景

构建一个包含以下功能的用户管理表格：

显示用户姓名、年龄、注册时间、操作按钮
支持按姓名搜索
每页显示 10 条
允许导出为 Excel 文件

2. HTML 结构

<table id="user-table" class="display">  
  <thead>  
    <tr>  
      <th>姓名</th>  
      <th>年龄</th>  
      <th>注册时间</th>  
      <th>操作</th>  
    </tr>  
  </thead>  
  <tbody>  
    <!-- 数据由后端动态填充 -->  
  </tbody>  
</table>

3. JavaScript 配置

$(document).ready(function() {  
  $('#user-table').DataTable({  
    dom: 'Bfrtip',  
    buttons: ['excel'],  
    pageLength: 10,  
    columnDefs: [  
      {  
        targets: 3,  
        orderable: false,  
        render: function(data, type, row) {  
          return `<button>Edit</button> <button>Delete</button>`;  
        }  
      }  
    ]  
  });  
});

七、性能优化与扩展

1. 减少 DOM 操作

通过 deferRender: true 延迟渲染未显示的行，提升加载速度。

2. 插件生态

DataTables 提供丰富的插件，例如：

FixedColumns：冻结表格列
Responsive：响应式布局
Select：行/列选择功能

八、结论

jQuery DataTables 凭借其易用性与灵活性，已成为现代 Web 开发中表格交互的首选方案。从基础配置到复杂场景，它提供了完整的解决方案，同时通过插件生态持续扩展功能边界。对于开发者而言，掌握 DataTables 不仅能提升开发效率，更能为用户带来流畅、直观的数据交互体验。

建议读者通过官方文档（https://datatables.net）持续学习高级用法，并结合实际项目实践，逐步挖掘其全部潜力。