Display data in the table by using Server-side processing

Goal:
*Use Datatable in relation to server-side processing. If you CHANGE the sortorder, pagenumber, applying search function etc. a request will be sent to the backend in order to retrieve a 1000 row (instead of total 30 000 row).
*Display data in the table.

Problem:
The code doesn’t work and what part of the source code am I missing in order to display the content of the data?

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

Info:
*This is a simple sample.
*In reality, the total row is about 30 000 row and you cannot display all the data at the same time.
You can only show a pagenumber (each pagenumber contain about 1000 row).
*https://datatables.net/examples/server_side/simple.html

Thank you!

<!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

The errors TypeError: Cannot read property ‘length’ of undefined usually means that jQuery DataTables cannot find the data in the response to the Ajax request.

Use default format or use ajax.dataSrc option to define data property containing table data in Ajax response (data by default).

Remove “json” from your dataSrc and your table will load the data!

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>

Advertisement

Answer