Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!
Learn how Concerto can help you.
Solved
Reloading a Data Table
Posted on 2016-09-03
I have a data table that is populated on page load with links to open a modal. When the modal is filled out and the user clicks Submit, I have a function that works. On success, I need to open a confirmation modal, this works. And then I need to reload the data table. This is the part I'm stuck on. I've tried several possible ways, the div that I am requesting to reload contains no data and I receive an error for the data table that is does not contain any data.
Can someone send an example of where they have done something similar as far as reloading a datatable? Thank You!
Can someone send an example of where they have done something similar as far as reloading a datatable? Thank You!
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
- +1
10 Comments
Here is some of my code:
Data Table:
function pageReady() {
var table = $('<table class="table table-hover table-striped row-border order-column">');
table.prependTo('#MyTable'
var myTable = table.DataTable({
data: myData,
columns: [
{
targets: [0],
title: "Ticket #", data: "TicketID", render: function (data) {
if (isAdmin) {
return '<u class="myLink" data-toggle="modal" data-target="#UpdateTicket
}
else {
return '<u class="myLink" data-toggle="modal" data-target="#TicketDetail
}
}
},
{ title: "Title", data: "Title", "width": "20%" },
{ title: "Description", data: "Description", "width": "25%" },
{ title: "Submitted By", data: "SubmittedUserName", class: "centered-text" },
{ title: "Submitted On", data: "SubmitDate", defaultContent: '', render: RenderShortDate, class: "centered-text" },
{ title: "Category", data: "CategoryName", class: "centered-text" },
{ title: "Status", data: "StatusName", class: "centered-text" }
],
deferRender: true
});
I populate the modal like this:
$('table').on('click', '.myLink', function () {
var dt = $(this).closest('table').D
var row = dt.row($(this).closest('tr
var ticket = row.data();
if (false) {
var data = $(this).text();
}
//populate the ticket detail modal
$("#UpdateTicket h3").text("Ticket ID: " + ticket.TicketID);
$('#Name').val(ticket.Subm
.....and so forth
});
This is the click event for the Update button on the modal:
$('#update').click(functio
updateform();
});
This is the Update Form Function:
function updateform() {
Validation code here....
var newResolution = {
Fields here....
TicketStatusID: $("#Status1").val()
};
$.ajax({
type: "POST",
url: "ViewTickets.aspx/myMethod
data: JSON.stringify(myMethod),
contentType: "application/json; charset=utf-8",
dataType: "json"
})
.done(function (msg) {
$('#UpdateTicket').modal('
$('#UpdateTicketConfirmati
reloadtickettable(); //this does not work
})
.error(function (jqXHR, status, error) {
alert('OOPS! Something went wrong: ' + status + ' : ' + error);
})
}
};
This is the function that does not work:
function reloadtickettable() {
// $('#MyTable').load(documen
myTable.fnDraw();
};
}
Data Table:
function pageReady() {
var table = $('<table class="table table-hover table-striped row-border order-column">');
table.prependTo('#MyTable'
var myTable = table.DataTable({
data: myData,
columns: [
{
targets: [0],
title: "Ticket #", data: "TicketID", render: function (data) {
if (isAdmin) {
return '<u class="myLink" data-toggle="modal" data-target="#UpdateTicket
}
else {
return '<u class="myLink" data-toggle="modal" data-target="#TicketDetail
}
}
},
{ title: "Title", data: "Title", "width": "20%" },
{ title: "Description", data: "Description", "width": "25%" },
{ title: "Submitted By", data: "SubmittedUserName", class: "centered-text" },
{ title: "Submitted On", data: "SubmitDate", defaultContent: '', render: RenderShortDate, class: "centered-text" },
{ title: "Category", data: "CategoryName", class: "centered-text" },
{ title: "Status", data: "StatusName", class: "centered-text" }
],
deferRender: true
});
I populate the modal like this:
$('table').on('click', '.myLink', function () {
var dt = $(this).closest('table').D
var row = dt.row($(this).closest('tr
var ticket = row.data();
if (false) {
var data = $(this).text();
}
//populate the ticket detail modal
$("#UpdateTicket h3").text("Ticket ID: " + ticket.TicketID);
$('#Name').val(ticket.Subm
.....and so forth
});
This is the click event for the Update button on the modal:
$('#update').click(functio
updateform();
});
This is the Update Form Function:
function updateform() {
Validation code here....
var newResolution = {
Fields here....
TicketStatusID: $("#Status1").val()
};
$.ajax({
type: "POST",
url: "ViewTickets.aspx/myMethod
data: JSON.stringify(myMethod),
contentType: "application/json; charset=utf-8",
dataType: "json"
})
.done(function (msg) {
$('#UpdateTicket').modal('
$('#UpdateTicketConfirmati
reloadtickettable(); //this does not work
})
.error(function (jqXHR, status, error) {
alert('OOPS! Something went wrong: ' + status + ' : ' + error);
})
}
};
This is the function that does not work:
function reloadtickettable() {
// $('#MyTable').load(documen
myTable.fnDraw();
};
}
Active today
Your reloadtitckettable function calls back to the server to get the data for the table - correct?
This is an async operation so any instructions immedatialy after the load are going to fire before the load is finished. So if myTable.fnDraw(); needs to fire after the data has been returned from the server then you are going to have to put that in the load call back.
Example
This is an async operation so any instructions immedatialy after the load are going to fire before the load is finished. So if myTable.fnDraw(); needs to fire after the data has been returned from the server then you are going to have to put that in the load call back.
Example
$('#MyTable').load(document.URL + ' #MyTable', function() {
myTable.fnDraw();
});
Active today
I am not really on top of your refresh mechanism - can you elaborate on what you are doing there to refresh the data table. Are you asking the server to send you a fresh copy?
Thanks for the response! I need to refresh the data. How do I ask the server to send me a fresh copy of the data? I use a method in the .cs file to obtain a serialized list from the database.
Active today
You can do it with a .load(), .post(), .get() or .ajax call (assuming you are wanting to do it via AJAX).
Your server side process sends back the data which you then insert into the data table. I am confused because it appears you are already doing that (or trying to). Is the question about how to do this or is it about why one part of it is not working properly?
Your server side process sends back the data which you then insert into the data table. I am confused because it appears you are already doing that (or trying to). Is the question about how to do this or is it about why one part of it is not working properly?
When the page loads, my data table works. What doesn't work is when I try to refresh the page. The datatable is empty.
When I call function reloadtickettable(), the datatable is empty.
Thank you for your help!
When I call function reloadtickettable(), the datatable is empty.
Thank you for your help!
Active today
Have you tried using the AJAX function of DataTables
https://datatables.net/examples/data_sources/ajax.html
https://datatables.net/examples/data_sources/ajax.html
Is this what you want ?
http://stackoverflow.com/questions/11797719/refresh-datatable-on-ajax-success
To update a table simply call fnDraw() on it. Since you are not using global variables, you must retrieve the table first
http://stackoverflow.com/questions/11797719/refresh-datatable-on-ajax-success
function dialogForms() {
$('a.menubutton').click(function() {
var id = this.id;// Save the id of the clicked button
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
submitFormWithAjax($(this).find('form'), id);// Pass the id to the function
function submitFormWithAjax(form, id) {
form = $(form);
var table_id;
// Choose the table to display depending on the id, i made some guesses but adjust this
switch(id){
case 'view_academic': table_id = '#academic_table';
break;
case 'view_business': table_id = '#business_table';
break;
case 'line_managers': table_id = '#line_managers_list';
break;
}
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
// Refresh table
var oTableToUpdate = $(table_id).dataTable( { bRetrieve : true } );
$oTableToUpdate .fnDraw();
// Hide all tables
$('table').hide();
// Show the refreshed
$(table_id).show();
}
});
return false;
}
To update a table simply call fnDraw() on it. Since you are not using global variables, you must retrieve the table first
var $lmTable = $("#line_managers_table").dataTable( { bRetrieve : true } );
$lmTable.fnDraw();
Featured Post
Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month8 days, 4 hours left to enroll
715 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.