jQuery Datatables不能正常工作 [英] jQuery Datatables not working properly

问题描述

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

 < table id =myTasks-tableclass =table table-bordered table-striped request-table> 
< thead> 
< tr> 
< th>请求ID< / th> 
< th> Type< / th> 
< th>跟进< / 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（）
}; 
 
函数MyTasksViewModel（）{
 var self = this; 
 self.tasks = ko.observableArray（[]）; 
 $ .ajax（{
'async'：false，
'url'：'/ api / customerservice / ServiceRequestListView / GetByEmployee /'+ userId，
'dataType'文本json'，
'type'：'GET'，
'success'：function（json）{
 if（json！== null）{
 self.tasks json）; 
 table = $（'。request-table'）。dataTable（dtOptions）; 
} 
} 
}）; 
} 
  

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

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

解决方案

关于datable：你正在描述一个datatable的行为，它已经被初始化了一行空），并没有意识到新的更改。

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

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

另一种可能性是销毁和重新创建每个更新的数据表：

  $（'。request-table'）。dataTable（）。fnDestroy（） ; 
 $（'。request-table'）。dataTable（dtOptions）; 
  

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.

解决方案

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不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！