how to load and reload ajax data into the table
how to load and reload ajax data into the table
barncattech
Posts: 25Questions: 4Answers: 0
I want to populate my table from a php script that returns ajax data and filters according to a parameter passed. I want to make a selection from a select box and click a button, and cause the table to load new data.
I have it working the first time- but the second time, it complains that it cannot re-initialize datatable. The only way I have discovered to pass data into Datatable is at initialization time. Should I destroy the table using fnDestroy and then re-initialize with my new data? This seems really inelegant and there must be a better way.
By the way, I have a dataset of 2400 rows and about a dozen columns. That is if I load every record. More commonly, the user will pick a filter option and retrieve a dozen or a couple hundred rows. I first implemented this using fnAddData, but it bogged way down after a fedw hundred rows. If I start off will all 2400 rows, it works fine, by the way.
Anyway- here is the click handler for my load button. As you can see, I am only initializing datatable on click. This works the first time only.
[code]
$(document).ready(function() {
$("#loadbtn").click( function(a,b){
var catChosen = $('#catpick').val();
$.ajax({
url: '../scripts/getContListDatatables.php',
dataType: 'json',
type: 'post',
data: {'catcode':catChosen},
success: function(jsondata) {
// i suppose i could destroy the dataTable and then initialize again...seems ugly
$('#conttable').dataTable(jsondata);
}
});
});
[/code]
I've been pouring over the docs, but I can'r seem to find a function that lets me reload the data for the entire table. I need the inverse of fnGetData- something like "fnSetData".
Maybe I need to implement the whole server-side handling of things, but since it is able to work with my max 2400 rows of data in the client, that seems like overkill.
Thanks for any insight.
Thanks-
Lynn Kasdorf
I have it working the first time- but the second time, it complains that it cannot re-initialize datatable. The only way I have discovered to pass data into Datatable is at initialization time. Should I destroy the table using fnDestroy and then re-initialize with my new data? This seems really inelegant and there must be a better way.
By the way, I have a dataset of 2400 rows and about a dozen columns. That is if I load every record. More commonly, the user will pick a filter option and retrieve a dozen or a couple hundred rows. I first implemented this using fnAddData, but it bogged way down after a fedw hundred rows. If I start off will all 2400 rows, it works fine, by the way.
Anyway- here is the click handler for my load button. As you can see, I am only initializing datatable on click. This works the first time only.
[code]
$(document).ready(function() {
$("#loadbtn").click( function(a,b){
var catChosen = $('#catpick').val();
$.ajax({
url: '../scripts/getContListDatatables.php',
dataType: 'json',
type: 'post',
data: {'catcode':catChosen},
success: function(jsondata) {
// i suppose i could destroy the dataTable and then initialize again...seems ugly
$('#conttable').dataTable(jsondata);
}
});
});
[/code]
I've been pouring over the docs, but I can'r seem to find a function that lets me reload the data for the entire table. I need the inverse of fnGetData- something like "fnSetData".
Maybe I need to implement the whole server-side handling of things, but since it is able to work with my max 2400 rows of data in the client, that seems like overkill.
Thanks for any insight.
Thanks-
Lynn Kasdorf
This discussion has been closed.
Replies
This doesn't seem to work for me:
[code]
$(document).ready(function() {
$("#loadbtn").click( function(){
var catChosen = $('#catpick').val();
var oSettings = {
data:{'catcode': catChosen},
type: 'POST',
dataType: 'json'
};
oTable.fnReloadAjax(oSettings, '../scripts/getContListDatatables.php', function(){
debugger;
});
});
});
[/code]
I was assuming that the first param of fnReloadAjax is a settings object in which I can pass data- but when I trace it in firebug, that param contains settings of the datatable, and my setting object is in the 2nd param, which is called sNewSource, and my url is passed into the 3rd param. What the heck???
Thanks
LK