select search

select search

princyprincy Posts: 12Questions: 1Answers: 0

Link to test case: http://live.datatables.net/cehojibu/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

    I am trying to do the following inside the header

1) Input search

2) Select search

and facing the following two difficulties and unable to solve self

1) Select search shows the last column values on each column

2) There is one extra header row as well.

Any kind help from anybody ?

princy.

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2021

    I'm not seeing the select inputs in your test case. Please update the test case to show the issue or see if this example from this thread helps you.

    Kevin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

    From your reply

    "I'm not seeing the select inputs in your test case."

    After trying so many possibilities forget the original to update.

    "or see if this example from this thread helps you."

    Unable to sort out the unwanted stuffs.

    "update the test case to show the issue"

        The test case is at http://live.datatables.net/cehojibu/3/edit
    

    and facing the following two difficulties and unable to solve self

    1) Select search shows the last column values on each column

    2) There is one extra header row as well.

    Any kind help from anybody ?

    princy.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Unable to sort out the unwanted stuffs.

    I removed the extra code:
    http://live.datatables.net/zoxujusi/6/edit

    update the test case to show the issue

    I'm still not seeing the select header or the extra header rows in your test case, so I updated it with a second header in the HTML and made some changes which make it look the same as the exampleI linked to:
    http://live.datatables.net/cehojibu/5/edit

    Select search shows the last column values on each colum

    You have:

    .appendTo( $('#example thead tr:eq(2) th').empty() )
    

    This will apply to all th in the row. You need to also use .eq(column.index()) to narrow down to the specific column, for example:

    .appendTo( $('#example thead tr:eq(2) th').eq(column.index()).empty() )
    

    There is one extra header row as well.

    Guessing you are also starting with two header rows defined in your HTML you also need to clone only one header, as I mentioned in the other thread, with :eq(0, like this:

    $('#example thead tr:eq(0)').clone(true).appendTo( '#example thead' );
    

    Also use orderCellsTop to move the sorting functions to the top row, away from the search inputs.

    Kevin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

            Thanks for your reply with an understandable explanation.
    

    One more thing

    Is it possible to sort like for example

    select the value / data say Javascript Developer from column position then in columns named office and age pops only the content related to Javascript Developer ?

    http://live.datatables.net/cehojibu/6/edit

    I don't know whether it is possible or not

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2021

    This example from another thread shows how to have cascading select lists.

    Kevin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

           Thanks for the reply along with information.
    

    I tried within my limited knowledge and is available at

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

    But now the problem is both the searches the default and the created at header thead tr:eq(2) also not working.

    Any kind help ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    You have this:

            columnDefs: [
                {
                    searchable: false,
                    targets: [0, 4, 5]
                }
            ],
    

    That turns off searching for those columns. The example uses that to filter the columns to apply the select search. Instead you can use a class name to define the columns for the select search. See this updated example:
    http://live.datatables.net/kovukuhe/1/edit

    Kevin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

           Thanks for the solutions.
    

    I made the final attempt to use a button to clear the both input and select searches at

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

    The button is placed at

    <body>
    <div class="container">

      <button type="button" class="clear" id="table-search">Clear Filters</button>
    

    and the code is at the bottom of js

    $('#table-search').on('click', function(e){

    $('.selectSearch').val('').change(); // reset the value to empty

    $("select").selectOptions("");

    $('#example').DataTable();
    table
    .search( '' )
    .columns().search( '' )
    .draw();
    });

    but nothing function to clear the both input and select searches

    Any kind help ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Start by looking for errors in the browser's console. You are getting this error:

    Uncaught TypeError: $(...).selectOptions is not a function

    I'm not sure what selectOptions is. Commenting out this line results in this error:

    Uncaught ReferenceError: table is not defined

    Its a Javascript scoping issue. Move the event handler inside the document.ready() function.

    Now the search is being reset but the select element is not cleared. The class selectSearch is the td not the select element. You need to change your selector to find the select element, for example:

    $('.selectSearch select').val('').change();
    

    Updated example:
    http://live.datatables.net/kovukuhe/3/edit

    Kevin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

         Thanks for pointing out the issues and solved.
    

    I just add a line

    $("input:text").val("")

    will clear all the textbox value

    at

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

    Now working well.

    Again i add both select and search to the footer at

    http://live.datatables.net/kovukuhe/5/edit

    now the problem is

    1)

    the select search needs to appear on 2nd row of the footer

    but with the lack of knowledge i am unable to do so

    and as per the current script it appears on the 1st row.

    2)

    also i need the select search only to the same column as header like 2,3,and 4.

    Any kind help ?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    1. You're putting it here:
    .appendTo( $(column.footer()).empty() )
    

    Change that to be :smile:

                    .appendTo($('tfoot tr:eq(1) td:eq(' + column.index() + ')'))
    
    1. You've got:
                 this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
    

    Change columns() to be columns([2,3,4]) to limit it.

    See updated example here: http://live.datatables.net/kovukuhe/6/edit

    Colin

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

            Thanks for pointing the issues and solved.
    

    I made the sorting on the footer as well here at

    http://live.datatables.net/kovukuhe/7/edit

    But don't know how to make the select search at footer also cascading like the header.

    Any kind help ?

  • princyprincy Posts: 12Questions: 1Answers: 0

    Hi,

          Don't know how to make the select search at footer also cascading like the header.
    

    http://live.datatables.net/kovukuhe/7/edit

    Any kind help ?

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

    Other forum members may wish to help, but it's beyond the scope of the support we offer as it'll take time to understand/resolve. We do provide professional support services, the options are listed here. Hope that helps,

    Colin

Sign In or Register to comment.