select search

princy · July 2021

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.

kthorngren · 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

princy · July 2021

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.

kthorngren · July 2021

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

princy · July 2021

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

kthorngren · July 2021

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

Kevin

princy · July 2021

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 ?

kthorngren · July 2021

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

princy · July 2021

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

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

kthorngren · July 2021

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

princy · July 2021

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 ?

colin · July 2021

You're putting it here:

.appendTo( $(column.footer()).empty() )

Change that to be

                .appendTo($('tfoot tr:eq(1) td:eq(' + column.index() + ')'))

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

princy · July 2021

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 ?

princy · July 2021

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 ?

colin · July 2021

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

select search

select search

Replies

Howdy, Stranger!

Categories

DataTables

select search

select search

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables