本文旨在解決如何通過 HTML 表單向 DataTables 傳遞數(shù)據，從而實現(xiàn)動態(tài)數(shù)據過濾。我們將介紹如何利用 jQuery 監(jiān)聽表單提交事件，并將表單數(shù)據作為 AJAX 請求的一部分發(fā)送到服務器端，最終更新 DataTables 的顯示內容。通過本文，你將掌握 DataTables 動態(tài)數(shù)據加載和過濾的關鍵技術。

前端實現(xiàn)：jQuery 與 DataTables 的集成

首先，我們需要在 HTML 中創(chuàng)建一個包含 元素的表單，并使用 DataTables 初始化一個表格。關鍵在于如何將表單的值傳遞給 DataTables 的 AJAX 請求，并在服務器端利用這些值進行數(shù)據過濾。

HTML 結構 (index.php):

jQuery 代碼：

以下是使用 jQuery 監(jiān)聽表單提交事件，并重新加載 DataTables 的 AJAX 數(shù)據的關鍵代碼。

$(document).ready(function() {
  var table = $('#place-table').DataTable({
    "ajax": {
      url: "json.php",
      "dataSrc": "",
      "data": function(d) {
        var frm_data = $('#frm').serializeArray(); // 使用 ID 選擇器
        $.each(frm_data, function(key, val) {
          d[val.name] = val.value;
        });
      }
    },
    columns: [{
      data: 'place_id'
    }, {
      data: 'place_name'
    }, {
      data: 'total_visitor'
    }]
  });

  $("#frm").submit(function(e) { // 使用 ID 選擇器
    e.preventDefault();
    table.ajax.reload();
  });
});

代碼解釋:

1. var table = $('#place-table').DataTable({...}): 初始化 DataTables，并將 DataTables 對象賦值給變量 table，以便后續(xù)操作。
2. "data": function(d) {...}: 在 AJAX 請求中，定義 data 函數(shù)，用于動態(tài)構建要發(fā)送到服務器的數(shù)據。$('#frm').serializeArray() 將表單數(shù)據序列化為數(shù)組，然后循環(huán)遍歷該數(shù)組，將每個字段的值添加到 DataTables 的 AJAX 請求參數(shù)中。 注意這里需要使用 #frm 通過ID選擇器來選擇表單
3. $("#frm").submit(function(e) {...}): 監(jiān)聽表單的提交事件。e.preventDefault() 阻止表單的默認提交行為，table.ajax.reload() 重新加載 DataTables 的 AJAX 數(shù)據，從而更新表格內容。 注意這里需要使用 #frm 通過ID選擇器來選擇表單

后端實現(xiàn)：PHP 數(shù)據過濾 (json.php)

在服務器端，我們需要接收來自 DataTables 的 AJAX 請求，并使用表單數(shù)據作為 WHERE 子句來查詢數(shù)據庫。

<?php $servername = "localhost";
  $username = "your_username";
  $password = "your_password";
  $dbname = "your_database";

  // 創(chuàng)建連接
  $conn = new mysqli($servername, $username, $password, $dbname);

  // 檢測連接
  if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
  }

  $selectedplace = $_POST['selectplace']; // 獲取selectplace的值
  $sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // 使用預處理語句防止SQL注入

  $result = $conn->query($sql);

  $data = array();
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      $data[] = array(
        "place_id"=>$row['id'],
        "place_name"=> $row['place_name'],
        "total_visitor"=> $row['total_visitor']
      );
    }
  }

  echo json_encode($data);
  $conn->close();
?>

代碼解釋:

1. $selectedplace = $_POST['selectplace'];: 獲取通過 POST 請求發(fā)送的 selectplace 的值。
2. *`$sql = "SELECT FROM placestable WHERE place_name = '$selectedplace'";**: 構造 SQL 查詢語句，使用$selectedplace的值作為WHERE` 子句的條件。重要提示：為了防止 SQL 注入攻擊，應該使用預處理語句來構建 SQL 查詢。 例如：

   $stmt = $conn->prepare("SELECT * FROM placestable WHERE place_name = ?");
   $stmt->bind_param("s", $selectedplace);
   $stmt->execute();
   $result = $stmt->get_result();

3. echo json_encode($data);: 將查詢結果編碼為 JSON 格式，并將其發(fā)送回客戶端。

注意事項和總結

• 安全性： 始終使用預處理語句來防止 SQL 注入攻擊，特別是當使用用戶提供的輸入來構建 SQL 查詢時。
• 錯誤處理： 在服務器端添加錯誤處理機制，以便在發(fā)生錯誤時能夠正確地處理并返回錯誤信息給客戶端。
• 性能優(yōu)化： 如果數(shù)據量很大，可以考慮使用服務器端分頁來提高性能。
• 表單驗證： 在客戶端和服務器端都進行表單驗證，以確保數(shù)據的有效性和完整性。
• ID選擇器: 確保在jQuery選擇表單的時候使用ID選擇器 #frm，這可以更準確地選擇到目標表單元素。

通過本文，你學習了如何將 HTML 表單與 DataTables 集成，從而實現(xiàn)動態(tài)數(shù)據過濾。 掌握這些技術將使你能夠構建更加靈活和交互性更強的 Web 應用程序。

以上是使用 jQuery 和 DataTables 傳遞表單數(shù)據進行動態(tài)數(shù)據過濾的詳細內容。更多信息請關注PHP中文網其他相關文章！