Losing formatting (sDom, pagination) on RenderPartial Ajax call

Losing formatting (sDom, pagination) on RenderPartial Ajax call

FluxFlux Posts: 5Questions: 0Answers: 0
edited October 2013 in General
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?

Replies

  • allanallan Posts: 63,386Questions: 1Answers: 10,449 Site admin
    > Unfortunately the parameters and actions change so I can't used fnReloadAjax, or sAjaxSource.

    The parameters as in the data being sent? Can you not use fnServerData for that?

    Allan
  • FluxFlux Posts: 5Questions: 0Answers: 0
    fnServerData still only relies on one 'endpoint' to get data from.

    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.
  • FluxFlux Posts: 5Questions: 0Answers: 0
    No suggestions or ideas on this one, huh?
    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
  • FluxFlux Posts: 5Questions: 0Answers: 0
    In case anyone else runs into this problem, I solved it by putting the .dataTable formatting inside the success call of the AJAX post function after some input from folks at StackOverflow. :)

    [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]
  • allanallan Posts: 63,386Questions: 1Answers: 10,449 Site admin
    Hi - sorry this fell off my screen, but good to hear you've got a solution now.

    > 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
This discussion has been closed.