使用服务器端处理显示 table 中的数据

Question

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

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

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" }
        ]
    
});

Answer 1

错误TypeError: Cannot read 属性 'length' of undefined 通常意味着jQuery DataTables 无法在对Ajax 请求的响应中找到数据。

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

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

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>

使用服务器端处理显示 table 中的数据

Display data in the table by using Server-side processing

javascript

jquery

datatables

datatables-1.10