The use of checkboxes to filter a table

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, I don’t know a solution to this, sorry. Using the Row Filter Extension will not really work here, as that is done on the server side. You’ll want client-side filtering, e.g. using the API functions of the DataTables JS library from https://www.datatables.net/

Regards,
Tobias

Hi Tobias,
Thank you for your answer. That has helped me a lot!!
Now I have the code that provides me the functionality to solve the problem. Unfortunately, I have another problem at this point. I can’t figure out how to integrate this with the tablepress table.

Could you help me out here, please?

$(document).ready( function () {
  var table = $('#example').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );

Viele Grü?e nach Magdeburg
Niklas

• This reply was modified 6 years, 5 months ago by nklsbrn.

Hi Niklas,

nice, looks good!

Instead of using '#example' as the selector, you’ll have to use something like '#tablepress-123' there (with 123 being the table ID, just check the source of the page).

In addition, I recommend to turn off the “Use DataTables” checkbox on the table’s “Edit” screen, to prevent interference. You’ll then have full flexibility in loading and using DataTables.

Regards,
Tobias

Hello Tobias,

that you so much for the quick help.

This is what i already did. I changed the selector to ‘#tablepress-2’ and pasted the code into the “Custom Commands”-field. After that i created a new page, added the checkboxes and the table shortcut.

This is the page content:

<input type="checkbox" name="1">Feature 1         
<input type="checkbox" name="2">Feature 2    
<input type="checkbox" name="3">Feature 3    
<input type="checkbox" name="4">Feature 4    

[table id=2 /]

But somehow it doesn’t work. Is there something I might have missed out? ??
At live.datatables it is working perfectly.

Regards,
Niklas

• This reply was modified 6 years, 5 months ago by nklsbrn.
• This reply was modified 6 years, 5 months ago by nklsbrn.
• This reply was modified 6 years, 5 months ago by nklsbrn.

Hi,

then, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias,

https://brownsbest.de/table-test/

That is the link of the site. Thank you so much!

Best Regards,
Niklas

Hi Niklas,

thanks for the link! It seems that you put this code into the “Custom Commands” text field on the table’s “Edit” screen. This will not work. You will have to put it in its own HTML <script> tag.

Regards,
Tobias

Good morning Tobias,

thank you so much again!

Okay, i’ve deleted the js out of the “Custom Commands” text field and put the javascript in text field of the wordpress site.

Somehow it still doesn’t work. Is it the worng way to put it in the “Own HTML <script> tag”?

That is the content of the site:

<script type="text/javascript">
$(document).ready( function () {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Best Regards,
Niklas

• This reply was modified 6 years, 5 months ago by nklsbrn.
• This reply was modified 6 years, 5 months ago by nklsbrn.
• This reply was modified 6 years, 5 months ago by nklsbrn.

Hi Niklas,

here, it’s important to not have line breaks in the JS, as WordPress otherwise adds HTML tags. In addition, you need to load the DataTables JS library.

Therefore:
1) Uncheck the “Use DataTables” checkbox on the table’s “Edit” screen.
2) Try again with this:

<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Regards,
Tobias

Hello Tobias,

thank you so much! It’s working now!!

One really last thing:

I’am tring now to add the previous tablepress datatables settings. I can’t figure out how and where to add it in the html inline javascript. That sould be the code:

$('#tablepress-3').dataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Best regards
Niklas

Hi,

these need to go into the line

var table = $('#tablepress-2').DataTable();

of your code, i.e.

var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Regards,
Tobias

Hi Tobias,

thank you so much for your help. I’ve put the code now into the line. The formatting is correct but the checkbox filtering doen’t work anymore.

<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

Hi,

ah, we need to remove the language part, as this is not loaded anymore. Please remove the "language":DataTables_language["de_DE"], part.

Regards,
Tobias

Hi Tobias,

the language part is removed but its still the same. The filtering is not working

<script type='text/javascript' src='https://brownsbest.de/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

Regards
Niklas

Hi,

ah, we turned off searching… Please also remove
,"searching":false
Regards,
Tobias