jQuery数据表只搜索一列

时间:2015-10-14 20:32:30

标签: jquery coldfusion datatables

我正在使用jQuery数据表和ColdFusion。我正在尝试搜索字段,只搜索第一列(ITEM ID),因此当您开始键入ITEM ID时,它只会在表中搜索ITEM ID部分而不是所有列,因为due_date和QTY也会有类似的数字

的jQuery

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

HTML - CF

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

CFC

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

我尝试过(以及许多其他组合):

{{1}}

所以基本上我只想搜索ID列。任何有关这方面的帮助将不胜感激!

1 个答案:

答案 0 :(得分:18)

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

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

但是,指示DataTables使除第一个列之外的所有列都无法使用columnDefs.searchable选项进行搜索并使用内部搜索控制将非常简单。

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