我想向使用ajax编程的现有表添加分页。

我已经尝试了多种分页解决方案,但它们似乎都与我现有的现有表不兼容

index.php中的表

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
    <th width="5%"></th>
    <th width="10%">Serial No.</th>
    <th width="20%">Equipment Type</th>
    <th width="15%">Document Remarks</th>
    <th width="10%">Supplier</th>
    <th width="10%">Date In</th>
    <th width="10%">Customer</th>
    <th width="10%">Date Out</th>
    </thead>
    <tbody></tbody>
 </table>
</div>


用于在index.php中显示表的脚本

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

        function fetch_data()
        {
            $.ajax({
                url: "select.php",
                method: "POST",
                dataType: "json",
                success: function (data)
                {
                    var html = '';
                    for (var count = 0; count < data.length; count++)
                    {
                        html += '<tr>';
                        html += '<td><input type="checkbox" value="' +
data[count].id + '" id="' + data[count].id + '" data-serial_number="' +
data[count].serial_number + '" data-equipment_type="' +
data[count].equipment_type + '" data-document_remarks="' +
data[count].document_remarks + '" data-supplier="' + data[count].supplier +
'" data-date_scan="' + data[count].date_scan + '" data-customer="' +
data[count].customer + '" data-date_out="' + data[count].date_out + '"
class="check_box"  /></td>';
                        html += '<td>' + data[count].serial_number + '</td>';
                        html += '<td>' + data[count].equipment_type + '</td>';
                        html += '<td>' + data[count].document_remarks + '</td>';
                        html += '<td>' + data[count].supplier + '</td>';
                        html += '<td>' + data[count].date_scan + '</td>';
                        html += '<td>' + data[count].customer + '</td>';
                        html += '<td>' + data[count].date_out + '</td></tr>';
                    }
                $('tbody').html(html);
            }
        });
    }

    fetch_data();
 }
</script>


select.php
    

include('database_connection.php');

$query = "SELECT * FROM inventory ORDER BY id DESC";

$statement = $connect->prepare($query);

if ($statement->execute()) {
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }

    echo json_encode($data);
}
?>

最佳答案

在您的fetch_data()函数中,您需要在POST请求中包括页面数据:


limit应该是每页可见的项目数
offset应该用limit乘以页码(从0开始)


例如下面将请求结果的第二页(每页10个结果)

$.ajax({
  url: "select.php",
  method: "POST",
  dataType: "json",
  data: {limit: 10, offset: 10},
  // etc.


在您的PHP脚本中,您将需要读取这些变量并将其添加到查询中:

$limit = $_POST['limit'];
$offset= $_POST['offset'];

$query = "SELECT * FROM inventory ORDER BY id DESC LIMIT = ? OFFSET= ?";
$statement = $connect->prepare($query);

if ($statement->execute([$limit, $offset])) {
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }

    echo json_encode($data);
}

09-11 14:15
查看更多