Losing formatting (sDom, pagination) on RenderPartial Ajax call
Losing formatting (sDom, pagination) on RenderPartial Ajax call
Table is intialized as follows:
[code] $('#notesDetails').dataTable({
'bPaginate': true,
'iDisplayLength': 25,
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'aaSorting': [[0, "desc"]],
});[/code]
It resides in a div, and the table has id notesDetails
[code]
@{Html.RenderPartial("NotesTable", Model);}
[/code]
Initial load works fine. There are buttons to make an ajax call to change the data.
[code]
$('#first').click(function () {
$.ajax({
type: "POST",
url: "@Url.Action("NotesTable", new {sortvalue = 1})",
dataType: "html",
container: "noteTable",
success: function (data) {
noteTable.innerHTML = data;
}
});
[/code]
Unfortunately the parameters and actions change so I can't used fnReloadAjax, or sAjaxSource. If I click one of the buttons, the data comes back fine, but none of the formatting renders. I've tried to move the initialization code to the NotesTable partial view, no luck. I tried adding a fnDraw call in the success function of the ajax, no luck either. What do I need to do to make the table keep its formatting and/or redraw with the correct formatting?
[code] $('#notesDetails').dataTable({
'bPaginate': true,
'iDisplayLength': 25,
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'aaSorting': [[0, "desc"]],
});[/code]
It resides in a div, and the table has id notesDetails
[code]
@{Html.RenderPartial("NotesTable", Model);}
[/code]
Initial load works fine. There are buttons to make an ajax call to change the data.
[code]
$('#first').click(function () {
$.ajax({
type: "POST",
url: "@Url.Action("NotesTable", new {sortvalue = 1})",
dataType: "html",
container: "noteTable",
success: function (data) {
noteTable.innerHTML = data;
}
});
[/code]
Unfortunately the parameters and actions change so I can't used fnReloadAjax, or sAjaxSource. If I click one of the buttons, the data comes back fine, but none of the formatting renders. I've tried to move the initialization code to the NotesTable partial view, no luck. I tried adding a fnDraw call in the success function of the ajax, no luck either. What do I need to do to make the table keep its formatting and/or redraw with the correct formatting?
This discussion has been closed.
Replies
The parameters as in the data being sent? Can you not use fnServerData for that?
Allan
The code above is calling the NotesTable action with the parameter sortvalue and returns five columns with Note information when a user clicks 'first'.
There are other buttons such as 'second' which when clicked calls an action UserCounts with the parameters format and daysback. That returns three columns with information about how many of what types of Notes users have.
Quite literally we are replacing the entire contents of the table, but want the header and footer layout to remain the same, hence the RenderPartial for the HTML table code itself.
Guess we'll have to jury rig it with a bunch of empty divs for each possible different table in hopes we can get formatting to stay put
[code]$('#first').click(function () {
$.ajax({
type: "POST",
url: "@Url.Action("NotesTable", new {sortvalue = 1})",
dataType: "html",
container: "noteTable",
success: function (data) {
noteTable.innerHTML = data,
$('#notesDetails').dataTable({
'bPaginate': true,
'iDisplayLength': 25,
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'aaSorting': [[0, "desc"]],
})
}
});[/code]
> Quite literally we are replacing the entire contents of the table, but want the header and footer layout to remain the same
It sounds like the fnReloadAjax plug-in might be the most optimal solution. But your comment above suggests that the column count might change, so the header and footer wouldn't remain the same, in which case, yes, a new table would need to be created.
Allan