使用服务器端处理显示表中的数据答案

【问题标题】：Display data in the table by using Server-side processing使用服务器端处理显示表中的数据
【发布时间】：2021-10-11 09:50:51
【问题描述】：

目标：
*使用与服务器端处理相关的数据表。如果您更改排序顺序、页码、应用搜索功能等。将向后端发送请求以检索 1000 行（而不是总共 30 000 行）。
*在表格中显示数据。

问题：
代码不起作用，为了显示数据的内容，我缺少源代码的哪一部分？

Jsbin:
https://jsbin.com/gohuwenese/edit?html,js,output

信息：
*这是一个简单的示例。
*实际上，总行数约为 30 000 行，您无法同时显示所有数据。
您只能显示一个页码（每个页码包含大约 1000 行）。
*https://datatables.net/examples/server_side/simple.html

谢谢！

<!DOCTYPE html>
<html>
    <head>
        
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<meta name="description" content="Search Button Handler">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    </head>
    <body>

        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>


            </table>
        </div>
    </body>
</html>

  $('#example').DataTable( {
    
        "processing": true, 
        "serverSide": true,
        "ajax":{
            url:"https://jsonplaceholder.typicode.com/comments",
            dataType:"json"
        },
        "columns": [
            { "data": "postId" },
            { "data": "id" },
            { "data": "name" },
            { "data": "email" },
            { "data": "body" }
        ]
    
});

【问题讨论】：

您是否检查过为什么您的浏览器网络工具会出现脚本错误？

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

错误 TypeError: Cannot read property 'length' of undefined 通常表示 jQuery DataTables 在 Ajax 请求的响应中找不到数据。

使用默认格式或使用 ajax.dataSrc 选项在 Ajax 响应中定义包含表数据的数据属性（默认为数据）。

从您的dataSrc 中删除“json”，您的表将加载数据！

var table = $('#example').DataTable( {
    
        "processing": true, 
        "serverSide": true,
        "ajax":{
            url:"https://jsonplaceholder.typicode.com/comments",
            dataSrc: ""
        },
        "columns": [
            { data: "postId" },
            { data: "id" },
            { data: "name" },
            { data: "email" },
            { data: "body" }
        ]
    
});

<!DOCTYPE html>
<html>
    <head>
        
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<meta name="description" content="Search Button Handler">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    </head>
    <body>

        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>postId</th>
                        <th>id</th>
                        <th>Name</th>
                        <th>Email</th>
            <th>Body</th>
                    </tr>
                </thead>


            </table>
        </div>
    </body>
</html>

【讨论】：

如果这个答案有帮助，请不要忘记投票/接受:)