实现jQuery DataTables的PHP查找

二次查找的另一种方法是由前端生成请求。在这个示例中，我们将对前一个示例 “将二次查找嵌入到查询结果 “中介绍的二次查找代码稍作修改。在前面的示例中，即使视图逻辑在执行查找，所有的处理仍然在服务器上完成。然而，当使用jQuery DataTables时，二次查询实际上是由客户端直接执行的，以浏览器发出的异步JavaScript和XML（AJAX）请求的形式。

如何做…

1.首先，我们需要将二次查找逻辑（在上面的示例中讨论过）分拆到一个单独的PHP文件中。这个新脚本的目的是执行二次查找并返回一个JSON数组。

2.新的脚本我们将调用chap_05_jquery_datatables_php_lookups_ajax.php。注意到SELECT语句非常明确的规定了哪些列会被传递。你也会注意到获取模式已经改为PDO::FETCH_NUM。你可能还注意到最后一行会将结果分配给一个JSON编码的数组中的数据键。

{% hint style=”info” %} 在处理零配置的jQuery DataTables时，只返回与表头匹配的列数是极其重要的。 {% endhint %}

  1. $id  = $_GET['id'] ?? 0;
  2. sql = 'SELECT u.transaction,u.date, u.quantity,u.sale_price,r.title '
  3.    . 'FROM purchases AS u '
  4.    . 'JOIN products AS r '
  5.    . 'ON u.product_id = r.id '
  6.    . 'WHERE u.customer_id = :id';
  7. $stmt = $conn->pdo->prepare($sql);
  8. $stmt->execute(['id' => (int) $id]);
  9. $results = array();
  10. while ($row = $stmt->fetch(PDO::FETCH_NUM)) {
  11.   $results[] = $row;
  12. }
  13. echo json_encode(['data' => $results]);
  1. 接下来，我们需要修改按ID检索客户信息的函数，去掉之前示例中嵌入的二次查找。
  1. function findCustomerById($id, Connection $conn)
  2. {
  3.   $stmt = $conn->pdo->query(
  4.     'SELECT * FROM customer WHERE id = ' . (int) $id);
  5.   $results = $stmt->fetch(PDO::FETCH_ASSOC);
  6.   return $results;
  7. }
  1. 之后，在视图逻辑中，我们导入最低限度的jQuery、DataTables和样式表来实现零配置。至少，你需要jQuery本身（在本例中jquery-1.12.0.min.js）和DataTables（jquery.dataTables.js）。我们还添加了一个与DataTables相关的方便的样式表，jquery.dataTables.css。
  1. <!DOCTYPE html>
  2. <head>
  3.   <script src="https://code.jquery.com/jquery-1.12.0.min.js">
  4.   </script>
  5.     <script type="text/javascript" 
  6.       charset="utf8" 
  7.       src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js">
  8.     </script>
  9.   <link rel="stylesheet" 
  10.     type="text/css" 
  11.     href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  12. </head>

5.然后我们定义一个jQuery document ready函数，将一个表与DataTables关联起来。在这种情况下，我们给表元素分配一个id属性customerTable，它将被分配给DataTables。你还会注意到，我们将AJAX数据源指定为步骤1中定义的脚本，chap_05_jquery_datatables_php_lookups_ajax.php。由于我们有$id可用，这将被附加到数据源URL中。

  1. <script>
  2. $(document).ready(function() {
  3.   $('#customerTable').DataTable(
  4.     { "ajax": '/chap_05_jquery_datatables_php_lookups_ajax.php?id=<?= $id ?>' 
  5.   });
  6. } );
  7. </script>
  1. 在视图逻辑的主体中，我们定义了表，确保id属性与前面代码中指定的属性相匹配。我们还需要定义头部，以匹配响应AJAX请求时呈现的数据。
  1. <table id="customerTable" class="display" cellspacing="0" width="100%">
  2.   <thead>
  3.     <tr>
  4.       <th>Transaction</th>
  5.       <th>Date</th>
  6.       <th>Qty</th>
  7.       <th>Price</th>
  8.       <th>Product</th>
  9.     </tr>
  10.   </thead>
  11. </table>
  1. 现在，剩下要做的就是加载页面，选择客户ID（本例中是随机的），让jQuery进行二次查找的请求。

如何运行…

创建一个chap_05_jquery_datatables_php_lookups_ajax.php脚本，它将响应AJAX请求。在里面放置初始化自动加载的代码，并创建一个Connection实例。然后，你可以附加前面示例第2步中的代码。

  1. <?php
  2. define('DB_CONFIG_FILE', '/../config/db.config.php');
  3. include __DIR__ . '/../Application/Database/Connection.php';
  4. use Application\Database\Connection;
  5. $conn = new Connection(include __DIR__ . DB_CONFIG_FILE);

接下来，创建一个chap_05_jquery_datatables_php_lookups.php调用程序，随机提取客户的信息。添加前面代码第3步中描述的函数。

  1. <?php
  2. define('DB_CONFIG_FILE', '/../config/db.config.php');
  3. include __DIR__ . '/../Application/Database/Connection.php';
  4. use Application\Database\Connection;
  5. $conn = new Connection(include __DIR__ . DB_CONFIG_FILE);
  6. // 在这里添加 findCustomerById()
  7. $id     = random_int(1,79);
  8. $result = findCustomerById($id, $conn);
  9. ?>

调用程序还将包含导入最小JavaScript实现jQuery DataTables的视图逻辑。你可以添加前面代码第3步所示的代码。然后，添加步骤5和步骤6中所示的文档 ready 功能和显示逻辑。下面是输出结果。

实现jQuery DataTables的PHP查找 - 图1

更多

有关jQuery的更多信息，请访问他们的网站https://jquery.com/。要阅读关于jQuery的DataTables插件，请参考本文https://www.datatables.net/。零配置数据表的讨论，请访问https://datatables.net/examples/basic_init/zero_configuration.html。关于AJAX源数据的更多信息，请看https://datatables.net/examples/data_sources/ajax.html。