MVC 4 Jquery DataTable Paging Loses Model Reference

Question

This is the view I have for my table. When I post back to my controller, my model will give me the items in ListUsers and set the properties of "InGroup" = true (if checked), and the UserId that it was checked for. This works completely fine.

          <table id="tblAvailableFranchisees">
                <thead>
                <tr>
                    <th>Franchisee</th>
                    <th>Email Address</th>
                    <th><input type="checkbox" /></th>
                </tr>
                </thead>
                <tbody>
                @for (int i = 0; i < Model.ListUsers.Count; i++)
                {  

                    <tr id="@Model.ListUsers[i].UserId">
                        @Html.HiddenFor(m => m.ListUsers[i].UserId)
                        <td>@Html.DisplayFor(m => m.ListUsers[i].DisplayName)</td>
                        <td>@Html.DisplayFor(m => m.ListUsers[i].EmailAddress)</td>
                        <td>@Html.CheckBoxFor(m => m.ListUsers[i].InGroup)</td>


                    </tr>
                }
                </tbody>
          </table>

Now I have implemented the JQuery DataTable with it.

   $(document).ready(function () {

        var oTable = $('#tblAvailableFranchisees').dataTable();
   {);

The DataTable renders correctly, with giving me the default ability to sort columns, select pages and select the number of records per page.

I can then check the users via the checkbox and post and the Model passed to my controller gives me what I want.

However when I go onto a different page in the table, and post, the Model passed to my controller is now a null collection. I've confirmed that it is related to the paging, but cannot seem to figure out why the Model would return a null collection and not return the items in the table.

Open to any ideas to help investigate this. thanks in advance

Are you throttling the ListUsers to return a subset of the data or the entire data collection? — Jay Rizzi, May 30 '13 at 23:10
Not quite sure what you mean. However, nothing is being returned at all. I'm not picky with what gets returned because I could always iterate through the list for the ones that are selected. — foop, May 31 '13 at 03:36
I have this exact same issue going on right now, and it also is happening when you search or sort the column, it is definitely related to the pagination. @foop, did you ever find a solution to this ? — MrB, Aug 07 '13 at 18:30
@MrB I did not find a resolution to my issue. I ended up just changing the design of the page itself. It's almost as if you need to keep a reference of the previous collection when you change a page. — foop, Aug 08 '13 at 15:29

score 4 · Answer 1 · answered Aug 08 '13 at 19:21

I am posting this here as opposed to in the comment section so I can post with some clean code format, along with what worked for me, but may not work for you if you have since re-designed the page.

I fixed my issue with a little hack on the submit button.

    $('#form').submit(function () {
        oTable.fnFilter("");
        var oSettings = oTable.fnSettings();
        oSettings._iDisplayLength = -1;
        oTable.fnDraw();
    });

What this does is clear the Search filter by setting it to nothing by oTable.fnFilter(""); followed by then resetting the display of the table to -1 (which shows all rows in the table) and then calling the fnDraw() method to re-draw the table (show all rows).

This alleviated the model null issue I was having by submitting the entire model at once which my controller only cared about the ones with the check box checked.

This happens behind the scenes and the user should be none the wiser, unless you have a huge amount of data.

How about Posting the form data ? Are you using AJAX POST ? Or some other means ? Here i can see u reset Datatable , but how abt form submission .Can you share the code for that as well? — Sebastian, Jul 15 '15 at 11:13

score 2 · Answer 2 · answered Aug 01 '17 at 14:15

I'm late to this party but in case it helps anyone else..... Basically, my submit button expands the table......as such the model makes it through to the action intact with all list items and their valus correct.

$('#btnSubmit').click(function () {
    expandTable();
});

function expandTable() {
    var oTable = $('#tblCategories').DataTable();
    oTable.page.len(250).draw();
};

Chase Blasingame · Answer 3 · 2018-11-09T20:35:16.830

To expand on AntDC's solution, you can expand to the exact number of rows contained in your table using the following:

$('#form').submit(function () {
    // force table to display all rows, allowing the entire list to be mapped back to the view model
    var $oTable = $('#tblCategories').DataTable();
    var numRows = $oTable.rows().count(); // get total number rows in table
    $oTable.page.len(numRows).draw();
});

score 0 · Answer 4 · answered May 04 '23 at 09:40

I suspect this happens because MVC rejects the discontinuous row indexing of the returned model after it has been filtered by DataTable. The above workarounds were good but, more recently, the DataTable code is:

function expandTable() {
    var oTable = $('#tblCategories').DataTable();
    oTable.search('').draw();
};

MVC 4 Jquery DataTable Paging Loses Model Reference

4 Answers4