DataTable shows all rows
DataTable shows all rows
smader
Posts: 21Questions: 6Answers: 0
My DataTable shows all rows- not sure what I am doing wrong. I would appreciate any assistance!
Debug available here: http://debug.datatables.net/arecok
The simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Ajax sourced data</title>
<link href="jslib/DataTables-1.10.13/media/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="jslib/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="jslib/DataTables-1.10.13/media/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="test" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>rowID</th>
<th>Name</th>
<th>userName</th>
<th>Start UTC</th>
<th>Project</th>
<th>Location</th>
<th>Certification</th>
</tr>
</thead>
</table>
<script>
$('#test').DataTable( {
"ajax": "./data.txt",
"columns": [
{ title: "rowID", visible: false, searchable: false },
{ title: "Name" },
{ title: "userName", visible: false, searchable: false },
{ title: "Start UTC" },
{ title: "Project" },
{ title: "Location" },
{ title: "Certification" }
],
"createdRow": function( row, data, dataIndex ) {
if ( data[6] == "INVALID" ) {
$(row).addClass( 'bg-danger' );
$('td:eq(4)', row).html('<button class="btn btn-primary btn-sm">VALIDATE</button>');
} else {
$(row).addClass( 'bg-success' );
}
},
"processing": true,
"serverSide": true,
});
$('#test tbody').on( 'click', 'button', function () {
var data = $("#test").DataTable().row( $(this).parents('tr') ).data();
alert( data[0] );
});
</script>
</body>
</html>
Data file:
{
"draw": 1,
"recordsTotal": 82,
"recordsFiltered": 82,
"data": [
[12, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[13, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[14, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[15, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[16, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[17, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[18, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[19, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Office", "VALID"],
[20, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[21, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[22, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Office", "VALID"],
[23, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[24, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[25, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[26, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[27, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[28, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[29, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[30, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[31, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[32, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[33, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[34, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[41, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[42, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[43, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[44, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[45, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[47, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[48, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[49, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[50, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[52, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[53, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[54, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[55, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[56, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[57, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[58, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[59, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[60, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[61, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[62, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[63, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[64, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[65, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[66, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[67, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[68, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[69, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[70, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[71, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[72, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[73, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[74, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[75, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[76, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
[97, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[98, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[99, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[105, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
[106, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
[107, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[108, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[109, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[110, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[111, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[112, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[113, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
[114, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Other", "VALID"],
[115, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[116, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[118, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[119, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[120, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
[128, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[135, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
[136, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"]
]
}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The data comes from a Java servlet. The data format passes on jsonlint.com. The "response" as seen from the server in FireFox's Network tab looks fine to me.
Params: draw: 1, start: 0, length:10
When I click on the pagination buttons, the info panel updates correctly, its just all rows are displayed.
I should also say I'm using bootstrap3- maybe the table class therein is causing issues with the rendering??
So I removed bootstrap and just used jQuery = jQuery 1.x, Styling = DataTables and DataTables = DataTables from the builder, but the problem persists, so not a bootstrap effect.
Table creation:
The JSON response from the server:
Okay, so serverSide needs to be false for my application
Yes - the problem was that you had server-side processing enabled, but the server-side wasn't actually doing what is required. Instead it was just returning all rows, hence the issue.
Server-side processing is only useful when you start to get into tens of thousands of rows.
Allan