Question

我刚开始学习淘汰赛而且我被困住了。我需要从服务器加载数据并使用DataTables显示它，并且每个单元格都与敲除绑定。

该表应具有基本功能：搜索，排序，分页。
每个项目都必须包含一些列，其中包含以下操作：编辑，删除，链接。
必须在模态窗口中进行编辑

我找到了一个类似的例子，几乎满足了我的所有需求并稍作改动：http://jsfiddle.net/bq5f7fcc/11/

这是自定义KO绑定：

ko.bindingHandlers.dataTablesForEach = {
page: 0,
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  var options = ko.unwrap(valueAccessor());
  ko.unwrap(options.data);
  if(options.dataTableOptions.paging){
    valueAccessor().data.subscribe(function (changes) {
        var table = $(element).closest('table').DataTable();
        ko.bindingHandlers.dataTablesForEach.page = table.page();
        table.destroy();
    }, null, 'arrayChange');          
  }
    var nodes = Array.prototype.slice.call(element.childNodes, 0);
    ko.utils.arrayForEach(nodes, function (node) {
        if (node && node.nodeType !== 1) {
            node.parentNode.removeChild(node);  
        }
    });
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {        
    var options = ko.unwrap(valueAccessor()),
        key = 'DataTablesForEach_Initialized';
    ko.unwrap(options.data);
    var table;
    if(!options.dataTableOptions.paging){
      table = $(element).closest('table').DataTable();
        table.destroy();
    }
    ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
    table = $(element).closest('table').DataTable(options.dataTableOptions);
    if (options.dataTableOptions.paging) {
       if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
           table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);                
       else 
           table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);                
    }        
    if (!ko.utils.domData.get(element, key) && (options.data || options.length))
        ko.utils.domData.set(element, key, true);
    return { controlsDescendantBindings: true };
}

};

如何从DataTables添加SEARCH字段？

P.S。表将包含大量数据（3-7k行）。

使用DataTables进行淘汰（编辑模式，分页，搜索和排序）

0 个答案: