How do you initialise a DataTable in a partial view?

mrsubby

As I understand it the document.ready is triggered when the main/parent page is ready. At this point I don't have a partial view, it's only 'made' in response to a button click.

In my partialview I have a DataTable, with it's own document.ready. But it never appears correctly i.e. no pagination, search, strip effect, etc.

I can see that it document.ready in the partial view is never entered (I added an alert that never triggered).

So I put the initialisation in a function that I call from the parent page (in the success of an ajax call). Again by use of alerts I can see on the button click that the success is entered, the function in the partial view is entered, but something goes wrong when I try to initialise the table.

The table contents are there, but none of the DataTables really nice functionality is. I'm fairly new to DataTables and MVC, so I'm not sure about ajax or DOM.

Any help would be much appreciated, thank you

ajax snippet

...
success: function (partialResult) {
    $("#dataViewerTable").html(partialResult);
    alert("Entered success"); // Is displayed
    initResultsTable();
    alert("Leaving success"); // NEVER DISPLAYED
}
...

Partial View html (script) snippet

function initResultsTable() {
    alert("Entered initResultsTable"); // Is displayed
    $('#resultsTable').DataTable({
        "dom": '<"top"<"pull-left"f> <"pull-right"ipl>>t'
    });
    alert("Leaving initResultsTable"); // NEVER DISPLAYED
}