CODEWITHSUNDEEP
jqueryasp.net-mvc-4datatables
foop
foop

Reputation: 523

MVC 4 Jquery DataTable Paging Loses Model Reference

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

Upvotes: 4

Views: 2627

Answers (4)

Mangopip
Mangopip

Reputation: 26

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();
};

Upvotes: 0

Chase Blasingame
Chase Blasingame

Reputation: 105

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();
});

Upvotes: 1

AntDC
AntDC

Reputation: 1917

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();
};

Upvotes: 2

MrB
MrB

Reputation: 424

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.

Upvotes: 4

Related Questions