数据表服务器端Ajax分页答案

【问题标题】：Data table Server side Ajax Pagination数据表服务器端Ajax分页
【发布时间】：2019-04-16 02:23:02
【问题描述】：

我有一个包含近 14000 条记录的位置表，我需要对服务器端数据进行 ajax 分页。我使用了下面的代码但没有工作。

    <table class="table table-bordered table-striped table-hover dataTable js-exportable" id="htmltableID">
    <thead>
    <tr>

        <th>SNO</th>
        <th>Location</th>
        <th>City</th>
        <th>State</th>


    </tr>
    </thead>
    <tbody>

    <?php
    $i = 1;
    foreach ($data as $row) {
        echo "<tr>";
        echo "<td>" . $i . "</td>";
        echo "<td>" . $row->location . "</td>";
        echo "<td>" . $row->city . "</td>";
        echo "<td>" . $row->state . "</td>";
        echo "</tr>";
        $i++;
    }
    ?>
    </tbody>
</table>

<script>
    var oTable = "";
    $(document).ready(function () {
        oTable = $('#htmltableID').dataTable({
            "sPaginationType": "full_numbers",
            "bServerSide": true,
            "sAjaxSource": "location",
            "sServerMethod": "POST",
            "iDisplayLength": 5
        });
    });
</script>

通过使用此代码，我收到错误消息“DataTables 警告：table id=htmltableID - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅 http://datatables.net/tn/3”和“DataTables 警告：table id=htmltableID - 无效 JSON响应。有关此错误的更多信息，请参阅http://datatables.net/tn/1"

【问题讨论】：

http://datatables.net/tn/1 这可能是从您提供的 ajax 源 url 返回的数据location 未正确 json 编码的问题，请检查浏览器控制台中的响应是否响应是正确的 json 或不是
我认为上面的代码运行在同一个 url location 对吗？？
我已经更新了 json 返回数据“location/loadRecord”。现在我不知道如何在 tbody 标签中返回数据。如何在上面的 jquery 中做到这一点
@VaraPrasad 是的，代码在同一个 url 位置运行

标签： javascript php jquery ajax codeigniter

【解决方案1】：

您应该在主文件中有以下类型的代码。假设Maindata.php

<table class="table table-bordered table-striped table-hover dataTable js-exportable" id="htmltableID">
    <thead>
        <tr>
            <th>SNO</th>
            <th>Location</th>
            <th>City</th>
            <th>State</th>
        </tr>
    </thead>
</table>

<script>
    var oTable = "";
    $(document).ready(function () {
        oTable = $('#htmltableID').dataTable({
            "sPaginationType": "full_numbers",
            "bServerSide": true,
            "sAjaxSource": "location",
            "sServerMethod": "POST",
            "iDisplayLength": 5
        });
    });
</script>

数据（json）需要从其他文件中获取，比如说loadrecords.php（在你的情况下是location/loadRecord）

<?php
// $data is the list of records fetched from database

// No need to print the data since we need to provide json data to dataTable, so Below code not required
/*
$i = 1;
foreach ($data as $row) {
    echo "<tr>";
    echo "<td>" . $i . "</td>";
    echo "<td>" . $row->location . "</td>";
    echo "<td>" . $row->city . "</td>";
    echo "<td>" . $row->state . "</td>";
    echo "</tr>";
    $i++;
}
*/

// Data which you needs to send in 'location/loadRecord' should be like this (In my case it was `loadrecords.php`)
/*{
    "data": [
        ["1","Location 1","City 1","State 1"],
        ["2","Location 2","City 2","State 2"],
        .....
        .....
        ["N","Location N","City N","State N"]
    ]
}*/

// Loop the data records fetched from database and prepare array in below format
$json_arr = array(
    "data" => array(
        array("1","Location 1","City 1","State 1"),
        array("2","Location 2","City 2","State 2"),
        ...............
        ...............
        array("N","Location N","City N","State N"),
    )
);
echo json_encode($json_arr);

数据将有 N 行 4 列，因为您想在表中显示 4 列，因此需要在 json 中提供相关数据

【讨论】：