Table rows drop after sort
Table rows drop after sort
KimSchroeder
Posts: 6Questions: 0Answers: 0
I am adding rows to a table using the function below. The rows are not being appened to the table. when i hit sort on a column or page only the template row and the row added after the data loop remain. It is like and may be is the rows are out of scope or are just appended out side the table. It may have something to do with the async getJSON call?
Any ideas?
[code]
$("#WUWC_Event_Table_Body_Row").show();
var a = jQuery.getJSON( 'http://localhost:8080/WhatsUpWauconda/wp-content/plugins/WUWC_Calendar/WUWC_Get_Events.php',
function(data) {
$.each(data, function(key, val) {
var tbl = $('#WUWC_Event_Table');
var drow = data[key];
var id = drow['id'];
rw = $("#WUWC_Event_Table_Body_Row").clone();
$(rw).attr('id', 'WUWC_Event_Table_Body_Row_' + key);
$(rw).find('#WUWC_Event_UL_LI_1_div').text(drow['title']);
$('#WUWC_Event_Table').append(rw);
var r;
});
});
var rwX = $("#WUWC_Event_Table_Body_Row").clone();
$('#WUWC_Event_Table').append(rwX);
// table definition
$('#WUWC_Event_Table').dataTable( {
"bRetrieve" : true,
"aLengthMenu": [[2, 3, 4, -1], [2, 3, 4, "All"]],
"iDisplayLength": 5,
"aaSorting": [[ 0, "asc" ]]
});
[/code]
the template table i'm using
[code]
Date
Events
more
0201
Feb
28
list Object 1
list Object 2
list Object 3
list Object 4
list Object 5
list Object 6
list Object 7
list Object 8
list Object 9
list Object 10
more
[/code]
Any ideas?
[code]
$("#WUWC_Event_Table_Body_Row").show();
var a = jQuery.getJSON( 'http://localhost:8080/WhatsUpWauconda/wp-content/plugins/WUWC_Calendar/WUWC_Get_Events.php',
function(data) {
$.each(data, function(key, val) {
var tbl = $('#WUWC_Event_Table');
var drow = data[key];
var id = drow['id'];
rw = $("#WUWC_Event_Table_Body_Row").clone();
$(rw).attr('id', 'WUWC_Event_Table_Body_Row_' + key);
$(rw).find('#WUWC_Event_UL_LI_1_div').text(drow['title']);
$('#WUWC_Event_Table').append(rw);
var r;
});
});
var rwX = $("#WUWC_Event_Table_Body_Row").clone();
$('#WUWC_Event_Table').append(rwX);
// table definition
$('#WUWC_Event_Table').dataTable( {
"bRetrieve" : true,
"aLengthMenu": [[2, 3, 4, -1], [2, 3, 4, "All"]],
"iDisplayLength": 5,
"aaSorting": [[ 0, "asc" ]]
});
[/code]
the template table i'm using
[code]
Date
Events
more
0201
Feb
28
list Object 1
list Object 2
list Object 3
list Object 4
list Object 5
list Object 6
list Object 7
list Object 8
list Object 9
list Object 10
more
[/code]
This discussion has been closed.
Replies
Allan
Thank you for getting back to me with some alternatives. I had not looked at the FAQ (my bad).
1. In my case I need to add table (tr) rows to the table because I’ve included an unordered list. Is there an example of fnAddData that allows for this?
2. Is it possible to use mDataProp instead of jQuery.Ajax to build the table rows (tr ) and add them to the table? I know this is going back to the DOM, but it seems so far this will be unavoidable in my case using if I a ul.
3. Is there a solution to accomplish what I hope to accomplish. I need stacked fields with unique styling and optionally omitting data fields. I need to include a collapsible area for hide/show details.
Thanks!
Kim
No - but there is a plug-in for exactly that :-). http://datatables.net/plug-ins/api#fnAddTr
> 2. Is it possible to use mDataProp instead of jQuery.Ajax to build the table rows (tr ) and add them to the table?
Yes absolutely. If you are using the DataTables internal Ajax options just specify mDataProp - if you are using the API (fnAddData for example) just pass it an object int he required format.
> 3. Is there a solution to accomplish what I hope to accomplish. I need stacked fields with unique styling and optionally omitting data fields. I need to include a collapsible area for hide/show details.
DataTables supports only 1 level of show/hide at the moment: http://datatables.net/release-datatables/examples/api/row_details.html
Is that what you are looking for?
Allan