テーブルの初期化時にjQuery Datatablesフィルタ

Question

私はサーバ側の処理でDatatablesプラグインを使用しています。私のテーブルは、ボタンを押すと開始されます。私は実際に初期化されたときにテーブルの列のカップルにフィルタを適用したいです。私はsearchColsを使ってみましたが、結果はありませんでした。次のように私のコードです：

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()を使用しています。どんな助けもありがとう！

Answer 1

私のテーブル定義は、以下に示すように、複数のタブの複数のテーブルで使用される関数に配置されています。より無関係なコードの一部が削除されました。

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

これは私のイベントハンドラです。これは、選択ボックスからの2つの値が有効であることを確認します。そうであれば、データ可能なロードがトリガーされます。

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

Answer 2

役立つかもしれないあなたは、ボタンのハンドラ内で行うことができます一つの他の事があります：

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

})