Search form

Hi,

To add a button like the one in the example, you need to add your own search item and javascript. The search item is just plain HTML. The javascript would look like this:

jQuery('#<your table id>').on('keyup click', function() {
    table.search(jQuery('#<field name>').val()).draw();
});

To find <your table id> open the inspector and search for “wpda-datatable datatable”. The table id starts with “wpda_”. The <field name> refers to a field your have to add to your page manually.

After that you need to hide your the default search box. Add the following JSON code to the table options (advanced) column in the Data Publisher:

{"dom": "lrtip"}

This will only hide the search box. The example hides the pagination interface as well. I would not advice to do that as a user will not be able to access those rows.

Good luck! Let me know if this helps…

Best regards,
Peter

Thank you Peter. I tried your suggestion. I get a “TypeError: $ is not a function” error. See https://www.einhunter.com/?page_id=36

I see your making progress! ??

Change this:
var table = $('#datatables_demo2').DataTable();

Into this:
var table = jQuery('#datatables_demo2').DataTable();

WordPress does not use the $ symbol. Make sure you always replace the $ with jQuery in your WordPress environment.

Best regards,
Peter

Thanks Peter. I made the change but Im still getting the same error. https://www.einhunter.com/?page_id=36

Yes, you’re still getting an error, but this is another error… ?? The error indicates that the DataTable is not found. You need to run this code after loading the DataTable. Try this:

jQuery(document).ready(function() {
	var table = jQuery('#datatables_demo2').DataTable();
	jQuery('#datatables_demo2').on('keyup click', function() {
		table.search(jQuery('#mySearchText').val()).draw();
	});
});

Hope this help,
Peter

Peter, that worked. Thank you! I’ve gotten rid of all my errors.
But the actual search feature is not working i.e. when I search for say “tiger”, it returns all the records in the database.

Hi,

You might need to perform a client side search instead of a server side search (which is the default). To check if this is the problem you can set serverSide to false in table options (advanced):
{"serverSide":false}

This will load your whole database table into the browser on initialization. Loading your whole table into the browser at ones is not a good idea if you have a large table. Since your table has 57 rows this might speed up your searches.

Can you please check if this solves the issue?

Thanks,
Peter

Hi,

What is the status of your topic? Did you make any progress?

Thanks,
Peter

Peter,
Changing the server side options did what I wanted. Thank you for your help.

Great! ??