jQuery Datatables过滤器初始化表

我正在使用Datatables插件进行服务器端处理。我的桌子是按下按钮启动的。当它实际初始化时，我想将过滤器应用于表上的几列。我尝试使用searchCols，但没有结果。我的代码如下：jQuery Datatables过滤器初始化表

var table = dataTables.create("#projectTable", parameters, { 
         ajax: { 
          url: 'project/search.do', 
          data: function(d) { 
           d.numberOfColumns = 6 
           d.startDate = jQuery("#start").val(), 
           d.endDate = jQuery("#end").val()        
          }, 
          dataSrc: "rows", 
          type: 'GET' 
         }, 
         columns: getColumns(), 
         "columnDefs": getColumnDefs(),       
         searchCols: [ 
             null, 
             { sSearch: jQuery("#selectBox1").val() },          
             { sSearch: jQuery("#selectBox2").val() }, 
             null, 
             null, 
             null 
            ] 
        }); 
       }

现在，我使用的是使表中的column.search.draw()再次加载毁了我的应用程序的性能。任何帮助表示赞赏！

来源

2017-02-14 rav

也许它应该是'搜索'而不是'sSearch'？除非这是一个旧版本或什么 –

感谢您的答复A.刘。我先试着搜索。后来发现这个：https://datatables.net/forums/discussion/21087/using-searchcols-for-server-side-processing-on-1-10 – rav

我有一个表，我初始化空然后等待用户点击一个按钮来获取搜索条件并进行ajax调用。我使用deferLoading属性来执行此操作。 – Bindrid

我的表定义放置在多个选项卡中的多个表上使用的函数中，如下所示。一些更不相关的代码已被删除。

ClientInterface.getDataTableDefinition = function (me) { 


     var wspath = getBasePath("ws/wsClient.asmx/GetClientInterfaceLabels"); 

     var options = { 

      sorting: false, 
      paging: false, 
      searching: false, 
      language:{emptyTable: 'Select a Fiscal year and Activity then click "Go"'}, 
      columnDefs: [{ 
       targets: [1, 2], render: function (data, type, full, meta) { 
        // Make the html table editable 
        return "<div contenteditable='true'>" + data + "</div>" 
       } 
      }], 

      select: false, 
      dom: 'lfrtB', 
      columns: [{ 'data': 'DefaultLabel' }, 
       { 'data': 'AssignedLabel' }, 
       { 'data': 'ToolTip' }], 

      serverSide: true, 
      ajax: { 
       url: wspath, 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       data: function (ssp) { 
        // button click is used to verify something has been selected so it 
        // is blindly fetched here. 
        var actid = $("#ddlActivity").val(); 
        var fy = $("#ddlFiscalYear").val(); 
        me.lastLabelFetch = { ActId: actid, FiscalYear: fy }; 
        return JSON.stringify({ ActId: actid, FiscalYear: fy }); 
       }, 
       error: function (response) { onAjaxError(response) }, 
       dataFilter: function (data) { 

        // the web method returns the data in a wrapper 
        // so it has to be pulled out and put in the 
        // form that DataTables is expecting. 
        var p = JSON.parse(data); 
        // set tr id based on row id and tab number. 
        // $.map(p.d.data, function (val, i) { val.trid = prepend + val.rowId; }); 
        var d = JSON.parse(p.d); 
        // me._$tblMyDataTable.select.style(p.d.length > 0); 
        return JSON.stringify({ data: d }); 
       } 
      }, 
      // Data Table is not loaded until the user selects Activity and Fiscal Year. 
      deferLoading: 0, 

      initComplete: function() { 

      } 

     } 
     return options; 
    };

这是我的事件处理程序。它确保选择框中的两个值是有效的。如果是，则触发可数据加载。

ClientInterfaceLabels.prototype.onBtnGoClicked = function() { 

     var me = this; 
     var activityId = $("#ddlActivity").val(); 
     var fiscalYear = $("#ddlFiscalYear").val(); 


     var msg = ""; 
     // validate inputs and show modal message if missing 

     if (activityId == "0") { msg += "<h3>Activity.</h3>"; }; 
     if (fiscalYear == "0") { msg += "<h3>Fiscal year.</h3>"; }; 

     if (msg.length > 0) { 
      msg = "<h2>Please provide the following:</h2>" + msg; 
      clientBased.alert({ message: msg }); 
      return; 
     } 
     this._$tblDataTableLables.ajax.reload(); 

    };

和实际表，按钮和选择框初始化：

ClientInterfaceLabels.prototype.initialize= function() { 

     var me = this; 

     $("#ButtonGo").button().click(function() { me.onBtnGoClicked(); }); 
     $("#ddlFiscalYear").select2(); 
     $("#ddlActivity").select2(); 

     this._$tblHtmlLabels = $("#tblLabels"); 
     this._$tblDataTableLables = this._$tblHtmlLabels.DataTable(ClientInterfaceLabels.getDataTableDefinition(me)); 
    }

来源

2017-02-15 16:10:49 Bindrid

注意deferLoading，只是在那里，ajax被推迟到用户点击go按钮。如果打开了分页，则整数用于计算分页。（在我的情况下，它不是我把它设置为0） – Bindrid

非常感谢你@Bindrid。这解决了我的问题 – rav

当我第二次尝试按下按钮时，它给了我一个无法重新初始化的错误。你有什么想法，为什么？ – rav

还有就是你可以在你的按钮处理程序做一两件事，可能有助于：

$("#btnGo").on("click", function() { 
    if($.fn.dataTable.isDataTable("#tbl")) { 
     $("#tbl").DataTable().ajax.reload(); 
    } 
    else { 
      $("#tbl").DataTable(tableDef); 
    } 

})

来源

2017-02-15 19:03:38 Bindrid

jQuery Datatables过滤器初始化表

回答

相关问题