国产欧美久久一区二区三区,久久精品国产一区二区三区

使用 jQuery 和 DataTables 實現(xiàn)表單篩選數(shù)據(jù)

心靈之曲

發(fā)布： 2025-10-14 12:13:01

原創(chuàng)

868人瀏覽過

使用 jquery 和 datatables 實現(xiàn)表單篩選數(shù)據(jù)

本文旨在幫助開發(fā)者理解如何通過 jQuery 將表單數(shù)據(jù)傳遞給 DataTables，并利用這些數(shù)據(jù)作為篩選條件，從服務器端獲取動態(tài)數(shù)據(jù)，最終實現(xiàn)表格數(shù)據(jù)的實時更新。重點講解了如何使用 ajax.reload() 方法在表單提交后重新加載 DataTables，以及如何在 DataTables 的 ajax 配置中傳遞表單數(shù)據(jù)。

DataTables 是一款強大的 jQuery 表格插件，可以方便地實現(xiàn)表格的排序、分頁、篩選等功能。結(jié)合服務器端的數(shù)據(jù)接口，我們可以構(gòu)建動態(tài)更新的表格。本文將介紹如何通過一個 zuojiankuohaophpcnselect> 表單，將用戶選擇的條件傳遞給服務器端，并利用這些條件篩選 DataTables 顯示的數(shù)據(jù)。

前端實現(xiàn)：HTML 結(jié)構(gòu)和 JavaScript 代碼

首先，我們需要一個包含 <select> 元素的 HTML 表單，以及一個用于顯示數(shù)據(jù)的 DataTables 表格。以下是 index.php 的相關代碼片段：

<form method="POST" id="frm">
    <select name="selectplace">
        <option value="PLACE 1">PLACE 1</option>
        <option value="PLACE 2">PLACE 2</option>
        <option value="PLACE 3">PLACE 3</option>
    </select>
    <button type="submit" name="submitPlace">SUBMIT</button>
</form>

<div class="table-responsive">
    <table class="table table-bordered table-striped text-center" id="place-table">
        <thead>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </tfoot>
    </table>
</div>

登錄后復制

接下來，使用 jQuery 初始化 DataTables，并配置 ajax 選項，以便從服務器端獲取數(shù)據(jù)。關鍵在于如何將表單數(shù)據(jù)傳遞給服務器端。

$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                var frm_data = $('#frm').serializeArray(); // Corrected selector here
                $.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) {
        e.preventDefault();
        table.ajax.reload();
    });
});

登錄后復制

代碼解釋：

$('#frm').serializeArray()：將表單數(shù)據(jù)序列化為 JavaScript 對象數(shù)組，方便傳遞給服務器。
$.each(frm_data, function(key, val) { d[val.name] = val.value; });：遍歷表單數(shù)據(jù)，將每個字段的值添加到 DataTables 的 data 對象中。
$("#frm").submit(function(e) { ... });：監(jiān)聽表單的 submit 事件，阻止默認提交行為，并使用 table.ajax.reload() 重新加載 DataTables。table變量需要定義在$(document).ready函數(shù)作用域內(nèi)。
e.preventDefault(): 阻止表單的默認提交行為，防止頁面刷新。
table.ajax.reload(): 重新加載 DataTables 的數(shù)據(jù)，觸發(fā) ajax 配置中的 data 函數(shù)，從而將最新的表單數(shù)據(jù)傳遞給服務器。

后端實現(xiàn)：PHP 代碼

表單大師AI

一款基于自然語言處理技術的智能在線表單創(chuàng)建工具，可以幫助用戶快速、高效地生成各類專業(yè)表單。

查看詳情

服務器端 PHP 腳本 (json.php) 接收來自 DataTables 的數(shù)據(jù)，并根據(jù)這些數(shù)據(jù)查詢數(shù)據(jù)庫。

<?php
  $servername = "your_servername";
  $username = "your_username";
  $password = "your_password";
  $dbname = "your_dbname";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);

  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  $selectedplace = $_POST['selectplace']; // Corrected variable name here
  $sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // Improved SQL query for security

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

  $data = array();
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            "place_id"=>$row['place_id'], // Assuming 'place_id' exists in your table
            "place_name"=> $row['place_name'],
            "total_visitor"=> $row['total_visitor']
        );
    }
  }
  echo json_encode($data);

  $conn->close();
?>

登錄后復制

代碼解釋：

$_POST['selectplace']：從 $_POST 數(shù)組中獲取 selectplace 字段的值，該值由前端表單傳遞過來。 注意變量名需要與前端的name屬性一致。
$sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"：構(gòu)建 SQL 查詢語句，使用 WHERE 子句根據(jù) $selectedplace 的值篩選數(shù)據(jù)。務必注意SQL注入風險，這里只是示例，實際應用中請使用預處理語句或參數(shù)化查詢。
echo json_encode($data)：將查詢結(jié)果編碼為 JSON 格式，并輸出到客戶端。

注意事項：

安全性： 在實際應用中，務必對用戶輸入進行驗證和過濾，以防止 SQL 注入攻擊。建議使用預處理語句或參數(shù)化查詢來構(gòu)建 SQL 語句。
錯誤處理： 添加錯誤處理機制，例如檢查數(shù)據(jù)庫連接是否成功，查詢是否執(zhí)行成功等。
調(diào)試： 使用瀏覽器的開發(fā)者工具可以方便地調(diào)試 JavaScript 代碼和查看網(wǎng)絡請求。
變量名一致： 確保前端和后端代碼中使用的變量名一致，例如表單字段的 name 屬性和 PHP 腳本中 $_POST 數(shù)組的鍵名。
數(shù)據(jù)庫配置： 確保 PHP 腳本中的數(shù)據(jù)庫連接信息正確。

總結(jié)

通過以上步驟，我們可以實現(xiàn)通過表單篩選 DataTables 顯示的數(shù)據(jù)。關鍵在于使用 ajax.reload() 方法在表單提交后重新加載 DataTables，以及如何在 DataTables 的 ajax 配置中傳遞表單數(shù)據(jù)。同時，需要注意安全性和錯誤處理，以確保應用程序的穩(wěn)定性和安全性。通過理解和應用這些技術，開發(fā)者可以構(gòu)建更加動態(tài)和交互性強的 Web 應用。

以上就是使用 jQuery 和 DataTables 實現(xiàn)表單篩選數(shù)據(jù)的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！

相關標簽：