2015-10-14 99 views
3

我正在使用jQuery數據表和ColdFusion。我試圖讓搜索字段僅搜索第一列(ITEM ID),因此,當您開始輸入ITEM ID時,它只會搜索ITEM ID部分的表格,而不是自due_date和QTY以後的所有列都將具有相似的數字。jQuery Datatables只搜索一列

jQuery的

var oTable = $('#processing').DataTable({ 
$('#ItemID').on('keyup', function() { 
     oTable.search($(this).val()).draw() ; 
    }); 

HTML - CF

<div class="col-xs-8"> 
    <label for="ItemID">ITEM ID</label> 
     <div class="input-group"> 
      <input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"> <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" id="Search">SEARCH</button> 
     </span> 

     </div> 
</div> 

    <table id="processing" class="table table-hover"> 
      <thead> 
        <th><b>ITEM ID</b></th> 
        <th><b>DUE DATE</b></th> 
        <th><b>STATUS</b></th> 
        <th><b>QTY</b></th> 
      </thead> 
    <tbody> 
    <cfoutput query="processTable"> 
     <cfif #Date_Complete# EQ ""> 
     <tr> 
      <td class="LAlign">#id#</td> 
      <td>#dateFormat(processTable.Date_Due, 'mm/dd/yyyy')#</td> 
      <td>PROCESSING</td> 
      <td>#Item_Count#</td> 
     </tr> 
    </cfif> 
    </cfoutput> 
</tbody> 
</table> 

CFC

<cffunction name="displayTable" access="public" returntype="query"> 
    <cfset var processTable = ''> 
    <cfquery name="processTable"> 
     SELECT id, Date_Due, Date_Complete, Item_Count 
     FROM dbo.Dealer_Track_Work  
    </cfquery> 
    <cfreturn processTable> 
</cffunction> 

我試過(以及許多其他組合):

"aoColumnDefs": [ 
      { "bSearchable": true}, 
      { "bSearchable": false}, 
      { "bSearchable": false}, 
      { "bSearchable": false} 
     ], 

所以基本上我只想搜索唯一的ID列。任何幫助,將不勝感激!

回答

10

您可以使用外部搜索控制和column().search() API方法。

$('#ItemID').on('keyup change', function() { 
    oTable.column(0).search($(this).val()).draw(); 
}); 

然而,這將是更簡單的指示數據表,使所有列,除了第一個與columnDefs.searchable選項不可搜索,並利用內部搜索控制。

var oTable = $('#processing').DataTable({ 
    "columnDefs": [ 
     { "targets": [1,2,3], "searchable": false } 
    ] 
}); 
+0

任何方式來重置此過濾器? – CGR

+0

真的很容易oTable.column(0).search('')。draw(); – CGR