This article aims to solve how to pass data to DataTables through HTML form to achieve dynamic data filtering. We will introduce how to use jQuery to listen to the form submission event and send the form data to the server as part of the AJAX request, ultimately updating the display content of DataTables. Through this article, you will master the key technologies of dynamic data loading and filtering in DataTables.

Front-end implementation: jQuery and DataTables integration

First, we need to create a form containing a element in HTML and initialize a table using DataTables. The key is how to pass the form values ??to the AJAX request for DataTables and use these values ??for data filtering on the server side.

HTML structure (index.php):

jQuery code:

The following is the key code to use jQuery to listen to the form submission event and reload the AJAX data of DataTables.

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

Code explanation:

1. var table = $('#place-table').DataTable({...}) : Initialize DataTables and assign the DataTables object to the variable table for subsequent operations.
2. "data": function(d) {...} : In the AJAX request, define the data function to dynamically construct the data to be sent to the server. $('#frm').serializeArray() serializes the form data into an array, then loops through the array, adding the value of each field to the DataTables' AJAX request parameters. Note that you need to use #frm to select the form through the ID selector.
3. $("#frm").submit(function(e) {...}) : Listen to the form submission event. e.preventDefault() prevents the form's default submission behavior, and table.ajax.reload() reloads the AJAX data of DataTables to update the table content. Note that you need to use #frm to select the form through the ID selector.

Backend implementation: PHP data filtering (json.php)

On the server side, we need to receive AJAX requests from DataTables and query the database using the form data as the WHERE clause.

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

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

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

  $selectedplace = $_POST['selectplace']; // Get the value of selectplace $sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // Use prepared statements to prevent SQL injection $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();
?>

Code explanation:

1. $selectedplace = $_POST['selectplace']; : Get the value of selectplace sent through POST request.
2. * `$sql = "SELECT FROM placestable WHERE place_name = '$selectedplace'";**: Construct a SQL query statement and use the value of $selectedplace as the condition of the WHERE` clause. Important: To protect against SQL injection attacks, you should use prepared statements to build SQL queries. For example:

    $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); : Encode the query results into JSON format and send it back to the client.

Notes and Summary

• Security: Always use prepared statements to prevent SQL injection attacks, especially when using user-supplied input to build SQL queries.
• Error handling: Add an error handling mechanism on the server side so that when an error occurs, it can correctly handle and return error information to the client.
• Performance optimization: If the amount of data is large, consider using server-side paging to improve performance.
• Form validation: Form validation is performed on both the client and server sides to ensure data validity and integrity.
• ID selector : Make sure to use the ID selector #frm when selecting the form in jQuery. This will select the target form element more accurately.

Through this article, you learned how to integrate HTML forms with DataTables to implement dynamic data filtering. Mastering these technologies will enable you to build more flexible and interactive Web applications.

The above is the detailed content of Pass form data for dynamic data filtering using jQuery and DataTables. For more information, please follow other related articles on the PHP Chinese website!