Prince
Prince

Reputation: 1290

Datatables Search Option

I am using datatables for table .I want to search based on the name column only but by default it search based on all column.I want to search based on name only any help should be appreciated.enter image description here

Js-code

$('#table-filter').dataTable({
"bDestroy": true,
"bPaginate": true,
"bProcessing": false,
 "bStateSave": false,
 "aLengthMenu": [[5, 10, 20, 50, 100 , -1], [5, 10, 20, 50, 100, "All"]],
 "iDisplayLength" : 5,
 "sPaginationType": "full_numbers",

 "aoColumnDefs": [
  { 'bSortable': false, 'aTargets': [ 0,1,7,8 ] }
        ],
"oLanguage": {
                 "sUrl": baseUrl+"/media/language/dt/"+lang_code+".txt",
             }
  })

Upvotes: 1

Views: 5940

Answers (4)

Al Gallardo
Al Gallardo

Reputation: 71

You can also create your own input search.

1.- Input Search html:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 dataTables_filter">
				<div class="dataTables_filter">
					<label style="float:right;">
						<fmt:message key="provider.search.name"/>
						<input id="colNameSearch_filter" type="text" class="form-control input-sm">
					</label>
				</div>
			</div>

After write in the input html thrown a function.

$('#colNameSearch_filter').on( 'keyup click', function () {
        filterColumn(1);
    } );

And that is the function that we call.

function filterColumn ( i ) {
    $('#tableResponse').DataTable().column( i ).search(
        $('#colNameSearch_filter').val()
    ).draw();
}

Upvotes: 0

Daniel
Daniel

Reputation: 37051

Another solution could be to use the Yet Another DataTables Column Filter - (yadcf) (I wrote it)

You can use the autocomplete filter type and you can place it anywhere you want in your page, code sample:

$('#table-filter').dataTable({...}).yadcf(
    [
        {
          column_number : 2, 
          filter_type: "auto_complete",
          filter_container_id: "external_filter_container"
        }
    ]);

where external_filter_container is an id of div/span that you want to place the filter

Upvotes: 0

super
super

Reputation: 2328

Try this, I hope this will help you:

$('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": true, "aTargets": [ 0 ] },
      { "bSearchable": false, "aTargets": [ 1] },
      { "bSearchable": false, "aTargets": [ 2] },
      { "bSearchable": false, "aTargets": [ 3] }
    ] } );

Example

Or

$('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": false, "aTargets": [ 1,2,3,4 ] }      

    ] } );

Example

here is the API Documentation for columns

Upvotes: 3

bhb
bhb

Reputation: 2561

According to Datatables document

// Using aoColumnDefs
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": false, "aTargets": [ 0 ] }
    ] } );
} );


// Using aoColumns
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumns": [
      { "bSearchable": false },
      null,
      null,
      null,
      null
    ] } );
} );

Upvotes: 1

Related Questions