jQuery 数据表无法正常工作答案

【问题标题】：jQuery Datatables not working properlyjQuery 数据表无法正常工作
【发布时间】：2014-07-24 21:08:41
【问题描述】：

我有一个通过 Knockout.js 填充的表格，并在表格上使用 jQuery Datatables 1.9.x 进行排序和分页。

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

这里是用来填表的JS：

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

有趣的是，当页面底部列出总行数时，它显示 1 of 1，但列表中至少包含 30 个项目。搜索也不起作用。当我开始打字时，一切都消失了。这种创建表的相同方式在应用程序的许多其他区域中使用，没有问题。此页面可能出了什么问题？我有一种我没有看到的愚蠢的感觉。

更新：我尝试升级到 1.10，但问题仍然存在。

【问题讨论】：

您是否尝试过async: true 或dataType: "json"，只是为了排除故障？你能提供一个小提琴吗？这会很有帮助！
要添加到@falsarella 的答案中，在初始化数据表时添加 "processing": true,1 "serverSide": true 并且它应该可以工作。看看datatables.net/examples/data_sources/server_side.html

标签： jquery jquery-datatables

【解决方案1】：

关于数据表：您正在描述数据表的行为，该数据表已使用一组初始行（可能为空）进行了初始化，并且尚未意识到新的更改。

如果要修改现有数据表的内容，则需要使用 API 函数fnAddData / fnUpdate / fnDeleteRow 传递新数据（1.9 API，如果您使用的是新的 1.10 版本，请查看官方文档...）。

修改<table> 节点将不起作用。

另一种可能性是在每次更新时销毁并重新创建数据表：

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

【讨论】：