How to rerender table when somebody clicks a select field in html

Chrom

I want somebody to be able to make a choice of a select field (with some preloaded categories which will match some column in the table) and then filter the table based on that choice.

Bascially its the same as search panes. But I dont like the styling of the searchpane and it seems to uncollapse when a language file is included. (btw is there a good way to style the searchpane? I was struggling a lot with it).

I thought about a jquery call which reloads the database with the desired values when somebody clicks the select field.

How can I reload the datatable with new values? or make a filtering command?

kthorngren

When using ajax you can use ajax.data as a function to send parameters to the server. See this example. Use ajax.reload() to cause Datatables to refresh the table via ajax.

is there a good way to style the searchpane?

Is this the same question you have in this thread? Please don't ask duplicate questions.

Kevin

Chrom

hmmm... i am not sure if it works in client side processing. could I let the table refresh with a result of a filter on categories?

I mean is there a command for filtering? Without the searchpane UI?

Because I am struggling with the search pane UI I try to do it with a command on client side processing, not server side (too complicated to implement everything)

kthorngren

am not sure if it works in client side processing. could I let the table refresh with a result of a filter on categories?

Using the above assumes your server script will read the parameters you send to filter the response data. It will work whether using server side or client side processing as long as you are using the ajax option to load the data.

is there a command for filtering?

There is search() and column().search().

If you want all your data client side then checkout these examples:
https://datatables.net/examples/api/multi_filter.html
https://datatables.net/examples/api/multi_filter_select.html

Kevin

Chrom

Thank you a lot! The search was the thing I was looking for!!!

I am struggling to rewrite the code for a single column e.g. colum 2.

Can you help me so it is working for one column? I am struggling with replacing the .every and this....

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

kthorngren

The column-selector is used to choose the columns. You can use an array or a classname, something like this:

this.api().columns( [2] ).every( function () {

Kevin

Chrom

ahhh so easy!!! Thank you very much!!!! ;-)

btw is there a way to place the column differently? I tried display: table-header-group but is has no effect. I need it beside the search input.

and do you know a way to remove the empty fields which show in the search list? It shows me two empty fields.

kthorngren

is there a way to place the column differently? I tried display: table-header-group but is has no effect. I need it beside the search input.

Are you trying to place the search input in the header? If so see this thread among many others with this question.

and do you know a way to remove the empty fields which show in the search list? It shows me two empty fields.

This code builds the select options:

        column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );

You can add a conditional to only append the options you want in the list.

Kevin

Chrom

cool thank you! What means +d+. I am not sure what is the meaning of the two +. and what is the j (some jQuery object passed down the function?) Can I make a == like with a string?

I think I will try to append the filter box to the search input field.

Is there any good way to place an element next to another with jQuery? Is it append or do you recommend something else (I think append makes it a child element only?). Beginner questions ;-)

Chrom

I tried

         var select = jQuery('<select><option value=""></option></select>')
              .after('#tableAZ_filter')
              .on( 'change', function () {
                  var val = jQuery.fn.dataTable.util.escapeRegex(
                      jQuery(this).val()
                  );

But its not working. Is anything wrong with that code?

colin

What means +d+

It's a string - so:

var a = "fred";
console.log("hello " + a + ", how are you?");

will print "hello fred, how are you?".

That's basic JavaScript so it would be worth reading up on that.

and what is the j

The index, see the reference page for each()

Regarding the "not working", 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

Chrom

ahhh yeah of course. what confused me with the +d+ was the " ' it looked strange and didnt realize its just for the building of the string ;-)

to answer my question about my code before,

.after('#tableAZ_filter') needs to be .after(jQuery('#tableAZ_filter') )