Display data in the table by using Server-side processing
Display data in the table by using Server-side processing
jt4000
Posts: 7Questions: 4Answers: 0
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" }
]
});
This discussion has been closed.
Answers
Server side processing requires a server side script that follows the server side processing protocol. Are you suing server side processing scripts supplied by Datatables or your own custom scripts?
Kevin
I have improved my quesiton and also provided a concrete example
https://datatables.net/forums/discussion/69375/how-to-update-the-content-from-table-using-backend-and-pagenumber#latest
In future it would be worth just posting back in the original thread rather than creating a new one for a continuing discussion.
I've closed this one for now though.
Allan