JQuery Datatables. Set default search value for a column when initializing a table

Question

I'm using datatable 1.10.15 with server side processing. I want to set value for a column search when table initializes. I tried this but without success:

$('#dataTable').DataTable({
    ...
    columns:[
        ....
        {name:'name', search:{value:'q'}}
        ....
    ]
});

According to the datatable documentation, you can use the "searchCols" parameter. See my answer below — NKSM
– NKSM, Commented Dec 5, 2019 at 21:01

Mayank Pandeyz · Accepted Answer · 2018-01-19 05:42:53Z

19

You can try:

$('#example').dataTable( {
  "search": {
    "search": "Fred"
  }
});

It will initialize the datatable with Fred in search column.

Working Fiddle

Reference

answered Jan 19, 2018 at 5:42

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

6 Comments

Andriy Lozynskiy Over a year ago

Thanks but it's a global search. i want to make search only for certain column

Mayank Pandeyz Over a year ago

Make your query accordingly

M H Over a year ago

@MayankPandeyzyes I see it filling the textbox, but the data is not filtered. I got it to work by creating the datatable with "deferLoading:true" and then setting the search box, then using DataTable.draw() to make the ajax call with the search param. Works great.

Mayank Pandeyz Over a year ago

You can create a function to render the server-side datatable and pass the initial value at the time of page load and write your query by considering this value.

Firnas Over a year ago

This is not the exact answer for the question, but it is what I was searching. Server side pagination also works. Thanks

|

NKSM · Accepted Answer · 2021-02-20 15:17:26Z

7

Here can be used SearchCols.

Basically the same as the search option, but in this case for individual columns, rather than the global filter, this option defined the filtering to apply to the table during initialisation.

The array must be of the same size as the number of columns, and each element be an object with the parameters search and escapeRegex (the latter is optional). 'null' is also accepted and the default will be used.

Example:

$('#example').dataTable( {
  "searchCols": [
    null,
    { "search": "My filter" },
    null,
    { "search": "^[0-9]", "escapeRegex": false }
  ]
} );

This is the only right solution when you can set a default search value when initializing a datatable. it's worth the datatable documentation.

More info: https://datatables.net/reference/option/searchCols

Working example: http://live.datatables.net/piqidoqo/603/edit

edited Feb 20, 2021 at 15:17

answered Oct 18, 2018 at 20:48

NKSM

5,8944 gold badges31 silver badges43 bronze badges

4 Comments

M H Over a year ago

I'm not sure what you mean by your comment on my answer. Mine sets the search on a specific column, not the global filter.

NKSM Over a year ago

That is not a global filter. You don't have to define a variable for data table. So can be defined "search value" by initialization of your datatable.

M H Over a year ago

Yeah still not sure what you're talking about regarding the global filter.

NKSM Over a year ago

I want to share my answer with other users, because searchCols in this case for individual columns, rather than the global filter, this option defined the filtering to apply to the table during initialisation. If you don’t understand what Global Filter is, then you should read the datatable documentation and don't set downvote.

M H · Accepted Answer · 2018-09-24 04:44:47Z

3

I had to do this same thing. I got it to work by creating the datatable with loading deferred, then fill the search text, and then make the ajax call with the search parameter.

var Datatable = DataTable({
 deferLoading:true
 ... other options
});

//set search text on specific column
DataTable.columns(columnIndex).search('default search text'); 

//make ajax to call server
DataTable.draw();

answered Sep 24, 2018 at 4:44

M H

2,19826 silver badges51 bronze badges

Comments

Kaushik C · Accepted Answer · 2018-01-19 05:21:08Z

0

This might work! But, here instead of name of that column you have to give position.

$( document ).ready(function() {
   var table = $('#dataTable').DataTable();
   table
        .columns( 3 )
        .search( "Your_Value" )
        .draw();
});

here 3 is just a example. Use your column position instead of 3 Reference Here

answered Jan 19, 2018 at 5:21

Kaushik C

1149 bronze badges

2 Comments

Andriy Lozynskiy Over a year ago

I tried this solution before and it works but i have some problem. I don't use pagination and it loads all data first and only then redraw table with filter. If i have many records it slow down the page. But for now it's the best solution i found

Kaushik C Over a year ago

If you don't want to load whole data at first, Change your SQL query. give that name filter in query itself.

Collectives™ on Stack Overflow

JQuery Datatables. Set default search value for a column when initializing a table

4 Answers 4

6 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related