Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022 edited February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022 edited February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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 Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  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 Posts: 44Questions: 15Answers: 1

  February 2022 edited February 2022

  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') )