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!

Gyrocode.com · Accepted Answer · 2015-10-14 20:50:16Z

41

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

answered Oct 14, 2015 at 20:50

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CGR Over a year ago

Any way to reset this filter?

CGR Over a year ago

Really easy oTable.column(0).search('').draw();

Collectives™ on Stack Overflow

jQuery Datatables Search only one column

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related