Need to refresh dataTable after clicking on Submit button
Need to refresh dataTable after clicking on Submit button
faisalnet5
Posts: 4Questions: 0Answers: 0
Hello Guys...I need help. User Story is: in one page at top user will enter their contact details (through a form) then click submit and bottom a dataTable will be populated when the page will load with the existing user contact details. As soon as user submitted his or her contact details the below dataTable grid will be refreshed and newly added data will be visible.
Now, in my JS file defining dataTable as follows:
[code]
$(document).ready(function() {
oTable = $('#ID').dataTable(
{
//Through Ajax call getting data from database
}
[/code]
This above portion is working fine and DataTable is getting populated on page load. But then After entering contact details when user clicks Submit button then I am trying to execute the following code to refresh the dataTable:
[code]
function addContact(){
$.ajax({
dataType: "json",
type: "GET",
url: ' ',
data: { },
success: function(msg){
//alert(msg);
if(msg == null) {
$('#error').empty();
$('#error').append('Successfully Entered....');
}
$('#ID').dataTable( {
"fnDrawCallback": function({bRetrieve : true}) {
alert( 'Hello' );
}
}
);
},
error: function(xhr, ajaxOptions, thrownError) {
//alert("err"+thrownError+xhr.responseText);
}
});
}
--This function addContact(), is outside $(document).ready(function() { }
[/code]
After execution function addContact(), is showing "Successfully Entered...." message on the page but the dataTable is not showing the newly added data.
Can anyone please guide me. Thanks a lot :)
Now, in my JS file defining dataTable as follows:
[code]
$(document).ready(function() {
oTable = $('#ID').dataTable(
{
//Through Ajax call getting data from database
}
[/code]
This above portion is working fine and DataTable is getting populated on page load. But then After entering contact details when user clicks Submit button then I am trying to execute the following code to refresh the dataTable:
[code]
function addContact(){
$.ajax({
dataType: "json",
type: "GET",
url: ' ',
data: { },
success: function(msg){
//alert(msg);
if(msg == null) {
$('#error').empty();
$('#error').append('Successfully Entered....');
}
$('#ID').dataTable( {
"fnDrawCallback": function({bRetrieve : true}) {
alert( 'Hello' );
}
}
);
},
error: function(xhr, ajaxOptions, thrownError) {
//alert("err"+thrownError+xhr.responseText);
}
});
}
--This function addContact(), is outside $(document).ready(function() { }
[/code]
After execution function addContact(), is showing "Successfully Entered...." message on the page but the dataTable is not showing the newly added data.
Can anyone please guide me. Thanks a lot :)
This discussion has been closed.
Replies
[code]oTable.fnDraw(false);[/code]
but You must remember to have oTable in same scope, or add parameter to Your addContact function
[code]function addContact(tableToReload){
$.ajax({
...
});
}
[/code]
then You'll be able to reload Your table.
Another option could be usage of fnAddData function (see api) - this way after proper server response You'll call this function with new data, this may be form fields values or server response.
[code]
oTable = $('#noteReminder').dataTable();
$('#noteReminder').dataTable().fnDestroy();
[/code]
and then again defined the table this way in that new function (just like addContact()):
[code]
oTable = $('#ID').dataTable( { //Through Ajax call getting data from database }
[/code]
Correct me if I am wrong :)
Regards