jQuery Datatables Search only one column

Question

I am using jQuery datatables and ColdFusion. I am trying to have search field that will search only the first column (ITEM ID) so when you start typing into ITEM ID it will only search the table for the ITEM ID section and not all columns since due_date and QTY will also have similar numbers.

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>

What I tried (along with many other combinations):

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

So basically I just want to search only the ID column. Any help with this would be greatly appreciated!

Answer 1

You can use external search control and column().search() API method.

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

However, it would be much simple to instruct DataTables to make all columns except the first one not searchable with columnDefs.searchable option and utilize internal search control.

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