jQuery Datatables not working properly

Question

I have a table that gets filled via Knockout.js and uses jQuery Datatables 1.9.x over the table for sorting and paging.

<table id="myTasks-table" class="table table-bordered table-striped request-table">
                <thead>
                    <tr>
                        <th>Request Id</th>
                        <th>Type</th>
                        <th>Follow up</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: MyTasksVM.tasks">
                    <tr>
                        <td>
                            <!-- ko if: RequestSource == "I" -->
                            <a data-bind="attr: { href: '/HelpDesk/ticket/detail/' + ServiceRequestID }"><span data-bind="    text: ServiceRequestID"></span></a>
                            <!-- /ko -->
                            <!-- ko if: RequestSource != "I" -->
                            <a data-bind="attr: { href: '/CustomerService/servicerequest/detail/' + ServiceRequestID }"><span data-bind="    text: ServiceRequestID"></span></a>
                            <!-- /ko -->
                        </td>
                        <td data-bind="text: RequestType"></td>
                        <td data-bind="text: OutputDate(FollowUpDate)"></td>
                    </tr>
                </tbody>
            </table>

Here is the JS used to fill the table:

var dtOptions = {
    "sDom": "<'row'<'span6'<'dt_actions'>l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "iDisplayLength": 10
};

var viewModel = {
    MyTasksVM: new MyTasksViewModel()
};

function MyTasksViewModel() {
    var self = this;
    self.tasks = ko.observableArray([]);
    $.ajax({
        'async': false,
        'url': '/api/customerservice/ServiceRequestListView/GetByEmployee/' + userId,
        'dataType': 'text json',
        'type': 'GET',
        'success': function (json) {
            if (json !== null) {
                self.tasks(json);
                table = $('.request-table').dataTable(dtOptions);
            }
        }
    });
}

The interesting thing about this is that when the total # of rows are listed at the bottom of the page, it shows 1 of 1, however the list contains at least 30 items in the list. Search doesn't work either. When I start typing, everything disappears. This same way of creating the tables is used in many other areas in the application without issue. What might be going wrong on this page? I have a feeling it is something stupid that I am not seeing.

Update: I tried upgrading to 1.10 and am still having the issue.

Have you tried `async: true` or `dataType: "json"`, just for troubleshooting? Could you provide a fiddle? It would be a lot helpful! — falsarella, Jul 30 '14 at 00:25
To add to @falsarella 's answer add "processing": true,1 "serverSide": true while initializing the datatable and it should work. Take a look at https://www.datatables.net/examples/data_sources/server_side.html — Rajarshi Goswami, Aug 04 '14 at 13:20

score 2 · Answer 1 · answered Aug 01 '14 at 08:11

Regarding the datable : you are describing the behaviour of a datatable, which has been initialized with an initial set of rows (possibly empty), and hasn't been made aware of new changes.

If you want to modify the content of an existing datatble, you need to pass the new data using the API functions fnAddData / fnUpdate / fnDeleteRow (1.9 API, check the official docs if you are using the new 1.10 version ...).

Modifying the <table> node won't work.

Another possibility is to destroy and recreate the datatable on each update :

$('.request-table').dataTable().fnDestroy();
$('.request-table').dataTable(dtOptions);

jQuery Datatables not working properly

1 Answers1

Linked