Changing HTML/DOM table and need to redraw DataTable

BeachMick

Link: http://beachcarolina.com/event-tickets/

Your prior answer to another person's prior "similar question": What you would need to do is use fnClearTable() followed by fnAddData() - http://datatables.net/api - which would give you this effect and uses the public API methods.

This page (see Link above) is using your HTML/DOM example version with changes. The same PHP function builds BOTH the initial DOM table as well as the "New Search" DOM table in same [code]

<

div>[/code] tag. The initial version seems to work correctly as I build a PHP variable and place directly into the HTML source. This is in place when the [code]$(document).ready(function()[/code] takes over.

When the "New Search" button invokes the external javascript to call the PHP function for the rebuilding of the HTML/DOM table, the HTML build seems to flow correctly. My problem is HOW/WHERE to place code (Javascript?) to clear the current DataTable and/or replace with the new DataTable.

Your assistance IS MOST APPRECIATED! :-)

BeachMick

Ultimate Goal:

Source data: Originally from SOAP WSDL which I have no control over. I convert this to array and process via PHP functions.

My goal is to have:
1) initial call to the function with default values and display when page first accessed/loaded,
2) enable end-user to enter into a text input for whatever search terms to seek (could be SAME text input of example filter of DataTable) with the option to press a SUBMIT button to place a SECOND call to the PHP function with new search terms (e.g. different from the default).

I currently have Javascript on the page which places the call to the PHP function (as stated in comment #1. My problems are: Refreshing the DataTable with the new data after calling the PHP function, AND finding a BETTER approach regarding the Toolbar Buttons to invoke the javascript that calls the PHP function.

allan

Hi,

Thanks for the link. You are currently changing the HTML for the table using this line jQuery("#response_area").html(response_from_the_action_function);. That is where you would clear the table and add the new data, rather than just wholesale replacing the HTML.

Allan

BeachMick

Allan,

Thank you for the response. You are absolutely correct regarding that line of code being the jQuery call that is the transfer of the HTML table data back to the page. Based on your answer, this would seem to be the "WHERE" portion of my original question.

The "HOW" portion still leaves me quite confused.

Do I place "wrapper" type information to refresh the DataTable display and if so, what code and in what sequence? I have looked through your website and have become extremely confused as I see no similar examples.

allan

Two options.

1. Use the API as described in the manual to clear the table and then add the new data, rather than writing the HTML.
2. Nuke the old table as you are and then initialise a new one.

Allan

BeachMick

It may not be the prettiest solution in the world but, it does work.

Based on Allan's comment, I placed the JavaScript initialization code within my PHP call (e.g. echo command) exactly like in the HTML/DOM example (plus my aaSorting and columns tags which are for my specific customization) JUST AFTER the PHP call to build the HTML table.

STEPS:
1) Execute the search based on my external form text input field via JavaScript.
2) Pass that variable to PHP which processes it within my PHP function.
3) Return the results back to my JavaScript and place this result within my predetermined designated DIV tag on the page.
4) Execute the JavaScript initialization of the DataTable with same code as used for first initialization of the HTML/DOM example (with or without custom sorting, columns, etc. as desired).

BeachMick

THANKS ALLAN!!!

BeachMick

One more follow-up question if I may...

URL: http://beachcarolina.com/event-tickets/
My buttons seem to work correctly while on "Page 1" and do not when reaching "Page 2" and beyond (e.g. pagination buttons at bottom).

What am I doing wrong?