Using POST on new loaded page

Selles

Hi Allan,

Long time not seen ;-). I dowloaded the latest version and it is great. TNX!!!

I have a question about the POST function.
I have 1 page (report_criteria.php) in which the user can select his search criteria with a form. This form posts the values to another page (report_results.php) on which the dataTable is. How can I use dataTable on such a way that it first shows the page with the empty dataTable, that it shows a loading message, and when all the data is given back by the data is injected in the table.

Hope you understand what I mean


Tnx

Grtzz

Wim

allan

Hi Wim,

Good to hear the latest version is going well!

So to check my understanding, the first page posts some data to the second one (and the second one is rendered by a server-side process, or is the data gathered by an XHR?) which then has the DataTable on it.

Will the bProcessing option do the trick for you, or you might use the oLanguage.sZeroRecords ( http://datatables.net/usage/i18n ) option to have DataTables put some text into an empty row (if you are using XHR) - just remember to reset the string once the initialisation has completed :-)

Regards,
Allan

Selles

Hi Allan,

Tnx for your reaction and sorry for my late reation. I tried to solve it in a different way with JSON:

[code]
oTable.fnAddData(rows);
[/code]

I got 1 little problem. In my basic situation, before new data is added, I have 2 columns that have style hidden. I have them hidden because 1 column has a mysql row id and the second has time on which is initially sorted.
When I add data through JSON, the hidden columns are inserted as shown, so the columns don't match.

When I use your bVisible, I also get the error. I also used your hidden trick, but that realsy hiddes the HTML so that I can't use the value from the first column that is hidden and contains the id from the mysql row sho I can show extra info.

Hope u understand what I mean.

Tnx in advance

Wim

allan

Hi Wim,

I've never really thought what would happen with having columns hidden before DataTables initialises... I can't see any reason why it wouldn't work though, as long as the elements remain in the DOM, then DataTables should read them no problem.

Would it be possible for you to post a couple of links, showing examples of the behaviour you describe in your previous post? For example, I'm not entirely clear what you mean by "so the columns don't match."

Thanks,
Allan

Selles

Hi Allan,

Tnx for your reaction. First of all.The forum works with mobile internet on my HTC Touch HD with Opera, I work for Tax here i the Netherlands and we do't have internet on our pc's ;-)

I think i can give you snipes of code because the application I'm working on is a secure one with production data, so I can't give you links.

Can I better mail you,otherwise this topic will have a lot of code?

tnx

Selles

Hi Allan,

As promised my reaction with some code. This is my table (without the data):

[code]






ID :
Klantnaam :
Merk :
Type :
Serienummer :
Storing :
Time :





 
 
 
 
 
 
 





ID :
Klantnaam :
Merk :
Type :
Serienummer :
Storing :
Time :






[/code]

The First cell and the last cell are always hidden (done with css display:none;). I need those rows in my table because the first cell is the id of the mysql record and the last cell to sort in the beginning.

With this code I activate the table

[code]
//------------------------------- For the error report for the dealers
oTable = $("#errors").dataTable({
"aaSorting": [[ 6, "desc" ]],
"bAutoWidth": false,
"aoData": [
/* id */ null,
/* cusname */ null,
/* brand */ null,
/* type */ null,
/* serial */ null,
/* error */ {"sType": "html"},
/* date */ null
]});
[/code]

When the table is generated I insert the data with this

[code]
$.post('user/service/get_data_for_table.php',{
t_id: t_id,
startDate: startDate,
endDate: endDate,
button: button,
customer: customer,
form_serial: form_serial
}, function addRows(rows){
// Clear excisting data from the table
oTable.fnClearTable( 0 );
var rows = rows.replace("\\n",'');
rows = $.evalJSON(rows);
oTable.fnAddData(rows);
[/code]

The data that is inserted looks like this:

[code]
[
["17","FourOaks","HP","Colorlaserjet 2840","wruchemusnafrusesnyd","Hij print nog steeds...","20090203185811"],
["16","FourOaks","HP","Colorlaserjet 2840","slagomeslarichukymuk","Hij print alleen maa...","20090203185401"],
["7","FourOaks","HP","Colorlaserjet 2840","trapuswyxykadedykoxo","Hij drukt zwart-wit ...","20090131204708"]
]
[/code]

When I insert the data, with JSON, the First and last cell are also shown in the table, like this:


|Klantnaam : |Merk : |Type : |Serienummer : |Storing : |Time :
|17 |FourOaks |HP |Colorlaserjet |2840 |nr1 |blablabl |2009/12/31|
|Klantnaam : |Merk : |Type : |Serienummer : |Storing :

When I do this:

[code]
//------------------------------- For the error report for the dealers
oTable = $("#errors").dataTable({
"aaSorting": [[ 6, "desc" ]],
"bAutoWidth": false,
"aoData": [
/* id */ {"bVisible": false },
/* cusname */ null,
/* brand */ null,
/* type */ null,
/* serial */ null,
/* error */ {"sType": "html"},
/* date */ {"bVisible": false }
]});
[/code]

The data of the First and the last cell isn’t inserted, at least, I can’t find it in firebug

I didn’t got the warning again, so I can't reproduce it for you.

Grtzz

Wim

allan

Hi Wim,

Thanks for the code - I think I understand what is happening. When you add the data without the bVisible:false option, DataTables doesn't know to hide the data, so it inserts it anyway. One option migth be to have sClass:hidden as an option on these columns - that would probably do it.

The bVisible:false method is different in that DataTables actually removed the elements from the DOM, rather than just setting them to display:none. As such, you would need to use fnGetData() in order to get your ID. The data is being inserted into the row, it's just not being displayed - which is intentional by the way this works. So fnGetData() would work fine if you want yo go this route.

Regards,
Allan

Selles

Hi Allan and all other users who read this topic,

I finally used an other solution for my question, but also used some code that Allan has given and answers that could be found on the forum.
I wanted the following:

1) Create a form with selectioncriteria
2) After clicking the search button, show a loader
3) Post the criteria to the table
4) When the data is loaded in the table, hide the loader

I first thought I could do it by posting the criteria from page1 to page2. Now I have found a solution to post the criteria to the current page and "refresh" the page without reloading it.
I used the following code beneath.

This may not be the best way to solve it, but it works fine for me.
I hope more people found this usefull.

And Allan, tnx for your quick answers to my questions and yes, it is the best tool I've found to use in combination with JQUERY!!

Grtzz

Wim

[code]
/* ------ HTML ------ */

<!-- This block contains the form -->



<!-- This block contains the table -->



/* ------ JQUERY ------ */
$("#search_button").click(generateTable);

function generateTable(){
// Show the modal-background
$("#background_modal").css("visibility","visible");
// Show the AJAX-loader image
$("#ajax_loader_modal").css("visibility","visible");

// This is the DIV that holds the criteria form, hide it
$('#report_criteria_block').hide();
// This is the DIV that holds the table, show it
$('#report_criteria_result').show();

// Define dataTable now because of autoWidth calculation
oTable = $("#myTable").dataTable({
"aaSorting": [[ 6, "desc" ]],
"oLanguage": {"sUrl": "include/nl_NL.txt"},
"aoData": [
/* id */ {"bVisible": false },
/* cusname */ null,
/* brand */ null,
/* type */ null,
/* serial */ { "sWidth": "250px" },
/* error */ {"sType": "html"},
/* date */ {"bVisible": false }
]});
$.post('user/get_data_for_table.php',{
t_id: t_id,
startDate: startDate,
endDate: endDate,
button: button,
customer: customer,
form_serial: form_serial
}, function addRows(rows){
// Clear excisting data from the table
oTable.fnClearTable( 0 );
rows = $.evalJSON(rows);
// Insert data into table
oTable.fnAddData(rows);
// Hide the modal-background
$("#background_modal").css("visibility","hidden");
// Hide the AJAX-loader image
$("#ajax_loader_modal").css("visibility","hidden");
});
}
[/code]