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過濾器初始化表

回答

相關問題