How to style custom column search ?

uTrx

// this is css style to set footer on top
        .dataTables_scroll{position:relative}
        .dataTables_scrollHead{margin-bottom:45px;}
        .dataTables_scrollFoot{position:absolute; top:50px}


<tfoot>
<tr>
    <th> # </th>
    <th scope="col"> <b> First Name</b>  </th>
    <th scope="col"> <b> Last Name</b>  </th>
    <th scope="col"> <b> DT Created </b>  </th>
    <th scope="col"> <b> Y/N </b>  </th>
</tr>
</tfoot>

   $('#dataTable tfoot th').each( function () {
        var title = $(this).text();
    
        if (title = title.length === 15) {
            $(this).html( '<input type="date" class="p-0 w-100 m-0" placeholder="'+title+'" />' );
         // i use this to display date range on DT Created
        }
        else{
            $(this).html( '<input type="text" class="p-0 w-100 m-0" placeholder="Search" />' );
        }

    } );

So i have a datatable with some records and i display for each column a search box, what i want to do now is to costumize search box, i have done just one search from normal search to datapicker. How can i costumize other searches for example First name and Last Name i want to set as default just normally search, DT Created as i have done as date picker, and for Y/N colum to make a dropdown with valye yes and no:

colin

Sorry, but I'm not clear what you want help with. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

uTrx

this is the test case link
http://live.datatables.net/fuficeve/1/edit

Now what i want is do display:none search box on Name and Position column. And for Age column to display a dropdown with ages value, For Salary column to let search as it is by default searchbox

kthorngren

You can use a classname to distinguish between the th that have text inputs versus select inputs. See this example from this thread.

Kevin

uTrx

@kthorngren please can you do an example with my test case code

http://live.datatables.net/fuficeve/1/edit

I have try the code on your example but for me doesnt work

kthorngren

I added some classnames to the th in HTMl and updated the selector to include the class: $('#example tfoot th.text-search').

http://live.datatables.net/fuficeve/2/edit

Kevin

uTrx

@kthorngren But I need the Age column to be a dropdown with the column values. And all the other columns just like you did.

How should i add select option for age column?

kthorngren

But I need the Age column to be a dropdown with the column values

See this example. Change line 4 to loop only the columns with the classname select-search.

this.api().columns( '.select-search' ).every( function () {

See the column-selector docs for more details about choosing the desired columns.

Kevin

uTrx

@kthorngren now i get an error on Line 34: Missing semicolon.

http://live.datatables.net/fuficeve/4/edit

kthorngren

That error is not the problem. You are getting this error in the browser's console:

Uncaught TypeError: this.api is not a function

You haven't initialized Datatables like the example I linked to. So far your test case is not using Datatables.

Kevin

uTrx

If I do this all the search boxes go back to the dropdown selector, what I want is for only one column to be a dropdown selector, another to datapicker the first two columns to be displa: none. While the rest to be a normal search box

kthorngren

See this example:
http://live.datatables.net/fuficeve/6/edit

I mistakenly put the select-search in the footer. It needs to be in the header for the columns() API.

Kevin

uTrx

@kthorngren But now other searches dont work. Work just dropdown

colin

Yep, you'll need to add code for the other controls, as

            this.api().columns('.select-search').every( function () {

will only affect those select columns

Colin

uTrx

this.api().columns('.select-search').every( function () {

I have add this olumn and work jus .columns('.select-search') column with this class. How to make all searches to work? An example with my code please

kthorngren

You need to add the initComplete code from this example. As before you need to change line 12 to contain the appropriate classname, for example:

this.api().columns( '.text-search' ).every( function () {

Kevin

uTrx

So should i add 2 initComplete code

both this script

initComplete: function () {
            this.api().columns('.select-search').every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }

initComplete: function () {
            // Apply the search
            this.api().columns( '.text-search').every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }

kthorngren

No. Put both code snippet in one initComplete function.

Kevin