More on form elements

scottn

I need to have a couple columns with form elements and post them to the server. Similure to the example: http://www.datatables.net/examples/api/form.html

However,I am not clear on how you create the table using json from the server to set default values (checked and unchecked in the case of checkboxes,etc.) and name the checkbox or text fields,so as to match them up with the post later?

The example above worked because it is hardcoded html. So basically my question is how to do this dynamically?

allan

So am I right in assuming that you are using sAjaxSource for either Ajax sourced data file, or server-side processing? If so - you can just put your HTML into the table that way - the data is entered using innerHTML on the created cells - so if you give it an HTML string with a form element that has a value, that is what will appear on screen.

Regards,
Allan

scottn

allan,

Thanks. Yes, you are correct I am using sAjaxSource. If understand you correctly that would require coding html on the server? I would like to avoid that if possible...

One thing that I tried was using stright jquery to create the table and then having DataTables do it's work on that table. Like this:
[code]
$.getJSON("http://localhost/gs/QueueServlet",{
userAction: 'loadQueue',
noCache: new Date().getTime()
},function(data){
loadDataTable(data);
});

function formatRow(json){
var rowData= ''
+ '' + json.priority + ''
+ '' + json.a + ''
+ '' + json.b + ''
+ '' + json.c + ''
+ '' + json.d + ''
+ '' + json.e + ''
+ '' + json.f + ''
+ '' + json.h + ''
+ '';
return rowData;
}
function loadDataTable(data){
$('#testit tbody').empty();
$.each(data,function(){
$('#testit tbody').append(formatRow(this));
});

$('#testit').show("slow");
}
[/code]

This puts the table in fine but DataTable doesn't 'see' the table. (It appears but without formating, etc) I am new at jQuery and Data Tables so I am sure I am missing something pretty basic

allan

When do you initialise the DataTable?

If it's after the call to loadDataTable then it should work okay... Do you have a link you could post?

Allan

scottn

allan,

Sorry, I don't have access to be able to post outside...

Yes I am doing it after. I slimmed down our code to the bare parts to better to be able to post. It does the same thing as the full code. One thing that maybe a clue is note below I have 4 blank rows that then should be replaced by the jQuery code. Data Tables show in the paganation "Showing 1 to 4 of 4 entries" indicating that it is still looking at the original code.

Here is the html:
[code]








A B C D E F G H






















[/code]

and here is the javascript:

[code]

var oQueue = null;

$(document).ready(function() {
/*Fill form via straight jQuery...*/
$.getJSON("http://localhost/gs/QueueServlet",{
userAction: 'loadQueue',
noCache: new Date().getTime()
},function(data){
loadDataTable(data);
});

oQueue = $('#testit').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
/* A */ { "sWidth": "25px"},
/* B */ null,
/* C */ { "bVisible": true },
/* D */ { "sClass": "center" },
/* E */ null,
/* F */ null,
/* G */ null,
/* H */ null]

} );
} );

function formatRow(json){
var rowData= ''
+ '' + json.priority + ''
+ '' + json.a+ ''
+ '' + json.b+ ''
+ '' + json.c+ ''
+ '' + json.d+ ''
+ '' + json.e+ ''
+ '' + json.f+ ''
+ '' + json.g+ ''
+ '';
return rowData;
}
function loadDataTable(data){
$('#testit tbody').empty();
$.each(data,function(){
$('#testit tbody').append(formatRow(this));
});

$('#testit').show("slow");
}

[/code]

allan

I don't think the DataTables initialisation is after the loadDataTable() from the above code actually. Remember that getJSON is asynchronous so the $().dataTable will fire before the callback for the XHR. Try sticking the DataTables initialisation into the callback function.

Or you could use fnAddData ( http://datatables.net/api#fnAddData )

Allan

scottn

Allan,

That fixed it. I didn't realize that getJSON was asynchronous and the rest of the javascript would not wait for it to finish. (except inside the callback of course)