时间戳

首页 > 解决方案 > 使用从 AJAX 请求返回的 Db 记录更新数据表

php - 使用从 AJAX 请求返回的 Db 记录更新数据表

问题描述

我有一个非常基本的 HTML 表格。数据来自数据库。我现在已经设置了一个带有按钮的日期选择器，一旦单击该按钮，我就会执行 AJAX 请求以获取特定日期的特定数据。（为了更容易，我的查询只是以 id=1 为例）。我现在想返回数据并更新数据表，但不幸的是数据返回了，但没有显示。

data    […]
0   {…}
 id 1
 category_id    1
 title  Technology Post One

以上就是返回的内容。我在上面的格式中犯了错误还是如何更新数据表？我收到以下错误：

DataTables 警告：表 id=example - 请求第 0 行第 0 列的未知参数“0”

  <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "api_db";


if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
  && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) 
  && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
   die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM posts WHERE id = 1";
result = $conn->query($sql);

if ($result->num_rows > 0) {

  while($row = $result->fetch_assoc()) {
    $rows[] = $row;
  }
  } else {
    echo "0 results";
  }
  $conn->close();


$msg = ["data" => $rows];
// handle request as AJAX
echo json_encode($msg); 
exit;
} 
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Practise</title>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20 js/jquery.dataTables.js"></script>
    </head>
    <body>
     <?php
    $sql = "SELECT * FROM posts";
    $result = $conn->query($sql);

    while($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }

    $conn->close();

 ?>
    <table id="example" border="1"><thead>
    <th>id</th>
    <th>title</th> 
 <th>created at
     <p>Date: <input type="text" id="datepicker"><button>Click</button> </p>
 </th>
 </thead>

<?php
foreach ($rows as $value){
  echo '<tr>';
  echo '<td>'.$value['id'].'</td>';
  echo '<td>'.$value['title'].'</td>';
  echo '<td>'.$value['created_at'].'</td>';
  echo '</tr>';
}
echo '</table>'
?> 
 </body>

<script>
$(document).ready(function() {

      $('#example').DataTable({

             "columns": [
                    {"data": "id"},
                    {"data": "author"},
                    {"data": "created_at"}
                ],           
            },            
    );       


    $( "#datepicker" ).datepicker();

    $("button").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",

            data: { 
                created_at: $("#datepicker").val() 
            },
            success: function(data) {
                $('#example').DataTable().ajax.reload(); 
            },
            error: function(result) {
                alert('error');
            }
        });
    });
} );

标签： phpjquerydatatables

解决方案

您可以更新 js 脚本并为 ajax 调用创建一个新的 php 文件，该文件将返回新的数据表。试试这个代码它会工作 -

<script>
  var created_at = ''; 
$(document).ready(function() {

  var datatable = $('#example').DataTable({
        'processing': true,
        'scrollX': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching' : true,
        'ajax': {
            url:'new-file.php',     
            data: function(data){
                    data.created_at = created_at;
                }
        },
        "columns": [
                {"data": "id"},
                {"data": "author"},
                {"data": "created_at"}
            ],           
  });       


$( "#datepicker" ).datepicker();

$("button").click(function(e) {
    e.preventDefault();
    created_at = $("#datepicker").val();
    datatable.draw();
});
} );
</script>

推荐阅读