jQuery+datatables插件实现ajax加载数据与增删改查功能示例

为了更好地让您了解“jQuery+datatables插件实现ajax加载数据与增删改查功能”的完整攻略，我将会按一定的顺序进行讲解。

1. 简介

首先，了解一下相关工具的情况。jQuery 是一套非常流行的 JavaScript 库，相信大家都比较熟悉了，它的特点是使用十分方便快捷。Datatables 是一个非常方便的表格插件，它可以实现较复杂的表格功能，例如：分页、过滤、排序等。而作为一种快速创建数据表格的工具，Datatables 经常会和 jQuery 搭配使用。

2. 示例说明

下面通过两个示例来分别讲解如何通过 jQuery+datatables 插件实现 ajax 加载数据以及实现表格的增删改查功能。

2.1 示例一：ajax 加载数据

通过 ajax 加载数据，我们可以使用 $.ajax() 方法从服务器端获取数据。下面是一个简单的例子。我们创建一个表格，从服务器端获取数据并在表格中显示数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例 1</title>
  <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/datatables/1.10.0/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.0/css/jquery.dataTables.min.css">
  <script>
      $(document).ready(function() {
          $('#example').DataTable({
              "ajax": "data.json",
              "columns":[
                  {"data":"id"},
                  {"data":"name"},
                  {"data":"age"},
                  {"data":"gender"},
                  {"data":"email"},
                  {"data":"phone"},
                  {"data":"salary"}
              ]
          });
      });
  </script>
</head>
<body>
<div>
  <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
      <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>邮箱</th>
          <th>联系方式</th>
          <th>薪资</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>邮箱</th>
          <th>联系方式</th>
          <th>薪资</th>
      </tr>
      </tfoot>
  </table>
</div>
</body>
</html>

使用 datatables 插件的 ajax 功能，我们可以通过传入一个 URL（或者绝对路径）来获取服务器端的数据，这个数据可以是 JSON 格式的，也可以是 XML 格式的数据。此外还需要传入一个对象，这个对象中包含一个 columns 数组，这个数组是用来描述表格中每一列数据源的。在这里，我们定义了第一列的数据源为 id，第二列的数据源为 name，并以此类推。

2.2 示例二：增删改查功能

接下来，我们将实现对表格数据的增删改查功能。这里我们同样借助了 datatables 插件及其相关的 API，这些 API 能够帮助我们实现对表格数据的操作。由于操作比较复杂，我会在下面详细解释。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例 2</title>
  <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/datatables/1.10.0/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.0/css/jquery.dataTables.min.css">
  <script>
      $(document).ready(function() {
          var table = $('#example').DataTable();

          $('#example').on('click', 'tbody td:not(:first-child)', function() {
              var curTR = $(this).parent();
              var value = curTR.find('td:eq(1)').text();
              curTR.find('td:eq(1)').html("<input value='"+ value +"'/>");
              curTR.find('td:last-child').html('<a class="btn-save" href="#">保存</a>&nbsp;&nbsp;<a class="btn-cancel" href="#">取消</a>');
          });

          $('#example').on('click', '.btn-save', function() {
              var curTR = $(this).parent().parent();
              var params = {
                  id: curTR.find('td:eq(0)').text(),
                  name: curTR.find('input').val(),
                  age: curTR.find('td:eq(2)').text(),
                  gender: curTR.find('td:eq(3)').text(),
                  email: curTR.find('td:eq(4)').text(),
                  phone: curTR.find('td:eq(5)').text(),
                  salary: curTR.find('td:eq(6)').text()
              };
              console.log(params);
              //异步请求服务器保存更改的数据，并在成功时调用如下回调函数
              table.row(curTR).data(params).draw(true);
          });

          $('#example').on('click', '.btn-cancel', function() {
              var curTR = $(this).parent().parent();
              table.row(curTR).invalidate().draw(false);
          });


          $('#example tbody').on('click', '.btn-delete', function() {
              var curTR = $(this).parent().parent();
              //异步请求服务器删除数据，并在成功时执行回调函数
              table.row(curTR).remove().draw(false);
          });

          $('#btnAddRow').click(function() {
              var params = {
                  'id': '',
                  'name': '',
                  'age': '',
                  'gender': '',
                  'email': '',
                  'phone': '',
                  'salary': ''
              };
              table.row.add(params).draw(true);
          });

      });
  </script>
</head>
<body>
<div>
  <button id="btnAddRow">新增</button>
  <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
      <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>邮箱</th>
          <th>联系方式</th>
          <th>薪资</th>
          <th>操作</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>邮箱</th>
          <th>联系方式</th>
          <th>薪资</th>
          <th>操作</th>
      </tr>
      </tfoot>
  </table>
</div>
</body>
</html>

以上代码中，我们为表格添加了一个新增按钮，当我们点击这个按钮时，将会在表格中添加一行新数据。同时，我们还为表格中每一行的操作列添加了编辑和删除按钮。当我们点击编辑按钮时，将会在表格的当前行替换姓名列为一个 input 框和保存、取消按钮，这样用户便可以对表格中的数据进行编辑。当用户点击删除按钮时，表格中的对应行将会被删除。当用户点击保存按钮时，我们将会从表格中获取修改后的数据，并且遍历这些数据，依次进行 ajax 操作向服务器端提交数据保存。

3 结语

综上所述，通过使用 jQuery+datatables 插件我们可以进行表格数据的操作。在实现过程中，我们先通过 ajax 加载数据，然后利用 Datatables 插件提供的方法进行表格内数据的编辑、新增、删除等操作。这个过程中， datatables 插件提供了非常好用的 API，能够帮助我们实现复杂表格功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+datatables插件实现ajax加载数据与增删改查功能示例 - Python技术站