基于jQuery Datatables的前端表格增删改查实现

最新推荐文章于 2022-09-01 17:26:53 发布

鲤之牵绊

最新推荐文章于 2022-09-01 17:26:53 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签：前端 Datatables jquery

本文链接：https://blog.youkuaiyun.com/csdn_xiaoliyu/article/details/88908177

这篇博客介绍了jQuery插件Datatables，它为HTML表格提供了分页、搜索和排序等高级交互功能。内容包括Datatables的优势，如支持多种数据源、主题、扩展和国际化，以及如何简单引入和使用Datatables。此外，还详细展示了如何利用Datatables实现前端表格的增删改查功能。

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

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

有着怎样的优势

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（ MIT license ）！商业支持

如何使用

使用DataTables很简单，只需要引入两个文件，一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>

页面中插入代码

<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 3</td>
            <td>Row 2 Data 4</td>
        </tr>
         <tr>
            <td>Row 3 Data 5</td>
            <td>Row 3 Data 6</td>
        </tr>
    </tbody>
</table>

页面下方再引入脚本

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

便大功告成了！
来看效果
在这里插入图片描述
非常简单粗暴。

通过Datatables实现增删改查

来看完整示例

<html>

<head>
  <meta charset="gbk">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>DataTable</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
  <style>
    .content {
      margin: 50px auto;
      border: 1px solid #ccc;
    }
    .operation {
      margin: 10px;
    }
    .operation>button {
      margin: 10px;
    }
    #books_length {
      float: left;
      margin-left: 20px;
    }
    #books_filter {
      float: right;