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

Answer 1

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.