How to style custom column search ?

How to style custom column search ?

uTrxuTrx Posts: 24Questions: 6Answers: 0
edited January 2022 in DataTables
// 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:

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

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

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    @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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022

    @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?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

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

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022

    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();
                        }
                    } );
                } );
            }
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    No. Put both code snippet in one initComplete function.

    Kevin

Sign In or Register to comment.