jQuery Datatables not working properly

问题

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.

回答1:

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);

来源：https://stackoverflow.com/questions/24944000/jquery-datatables-not-working-properly

标签

jquery

jquery-datatables