DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTable shows all rows

DataTable shows all rows

smadersmader Posts: 21Questions: 6Answers: 0
in Free community support

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

Answers

  • smadersmader Posts: 21Questions: 6Answers: 0

    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.

  • smadersmader Posts: 21Questions: 6Answers: 0

    I should also say I'm using bootstrap3- maybe the table class therein is causing issues with the rendering??

  • smadersmader Posts: 21Questions: 6Answers: 0

    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:

    $('#test').DataTable({
    "ajax": { "url": "/PORTAL/ObserverStatus?action=obsStatus", "dataType": "json" },
    "columns": [
            { data: "rowID", title: "rowID", visible: false, searchable: false },
            { data: "fullName", title: "Name" },
            { data: "userName", title: "userName", visible: false, searchable: false },
            { data: "start", title: "Start UTC" },
            { data: "project", title: "Project" },
            { data: "location", title: "Location" },
            { data: "certification", title: "Certification" }
        ],
     "processing": true,
     "serverSide": true,
});

    The JSON response from the server:

    {
        "draw":1,
        "recordsTotal": 128,
        "recordsFiltered": 128,
    "data": [
    {
        "rowID": 12,
        "fullName": "Stacy Mader",
        "userName": "abc123",
        "project": "Java",
        "start": "2017-02-09 11:22:07.0",
        "location": "Home",
        "certification": "VALID"
    }, {
.
.
.
  • smadersmader Posts: 21Questions: 6Answers: 0

    Okay, so serverSide needs to be false for my application :blush:

  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin
    Answer ✓

    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

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.