title: Submitting model with entities in MVC using DataTable fails when using pagination
body: <p>I want to submit model with entities, but controller is not receiving entities when switching to another page when using DataTable plugin.</p>
  
  <p>VIEW:</p>
  
  <pre><code>using (Ajax.BeginForm("EditLeads", new { mode = Model.leadMode }, new AjaxOptions {     OnBegin = "displayAllDataTable", UpdateTargetId = "leadDisplay", LoadingElementId =     "spinner", OnSuccess = "refreshLeadsAfterRemovingAndTabSwitching" }, new  {     id="dataTableForm"}))
  { 
  &lt;table id="dataTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="max-width: 40px;"&gt;
                  Select
              &lt;/th&gt;
  
              &lt;th&gt;
                  Date added
              &lt;/th&gt;
              &lt;th&gt;
                  Contact name
              &lt;/th&gt;
              &lt;th&gt;
                  Contact number
              &lt;/th&gt;
              &lt;th&gt;
                  Email
              &lt;/th&gt;
              &lt;th&gt;
                  Source
              &lt;/th&gt;
              &lt;th&gt;
                  Status
              &lt;/th&gt;
              &lt;th&gt;
                  Assigned to user:
              &lt;/th&gt;
              &lt;th&gt;
                  Back up user:
              &lt;/th&gt;
              &lt;th&gt;
                  Comments
              &lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @for (int i = 0; i &lt; Model.leadsList.Count; i++)
          {
              &lt;tr&gt;
                  &lt;td style="width: 40px; vertical-align: middle; text-align: center"&gt;
                  &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].leadId&lt;/span&gt;
                  @Html.HiddenFor(model =&gt; model.organisationId)
                   @Html.HiddenFor(model =&gt; Model.leadsList[i].leadId)
                      @Html.CheckBoxFor(model =&gt; Model.leadsList[i].selected, new { @class = "selectedLead", data_val = false, data_leadId = Model.leadsList[i].leadId, id = "selected_" + Model.leadsList[i].leadId })
                  &lt;/td&gt;
                 @* &lt;td&gt;
                      @Html.DisplayFor(model =&gt; model.leadsList[i].leadId)
                      @Html.HiddenFor(model =&gt; Model.leadsList[i].leadId)
                  &lt;/td&gt;*@
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].leadDate&lt;/span&gt;
                      @Html.DisplayFor(model =&gt; Model.leadsList[i].leadDate)
                  &lt;/td&gt;
                  @*  &lt;td&gt;
                      @Html.HiddenFor(model =&gt; Model.leadsList[i].leadId)
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].description&lt;/span&gt;
                      @Html.EditorFor(model =&gt; Model.leadsList[i].description)
                  &lt;/td&gt;*@
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].contactName&lt;/span&gt;
                      @Html.DisplayFor(model =&gt; Model.leadsList[i].contactName)
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].contactMobile&lt;/span&gt;
                      @Html.EditorFor(model =&gt; Model.leadsList[i].contactMobile)
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].contactEmail&lt;/span&gt;
                      @Html.EditorFor(model =&gt; Model.leadsList[i].contactEmail)
                      @Html.HiddenFor(model =&gt; Model.leadsList[i].contactId)
                  &lt;/td&gt;
                  &lt;td&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].leadStatusName&lt;/span&gt;
                      @Html.DropDownListFor(model =&gt; Model.leadsList[i].leadStatusId, new SelectList(Model.leadStatusList, "leadStatusId", "name", Model.leadsList[i].leadStatusId), null, new { data_val = false })
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].assignedToUserId&lt;/span&gt;
                      @Html.DropDownListFor(model =&gt; Model.leadsList[i].assignedToUserId, new SelectList(Model.users, "UserId", "Email", Model.leadsList[i].assignedToUserId), "Select user", new { data_val = false, data_users = Model.leadsList[i].leadId, @class = "usersList" })
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="hideDisplayField"&gt;@Model.leadsList[i].backupUserId&lt;/span&gt;
                      @Html.DropDownListFor(model =&gt; Model.leadsList[i].backupUserId, new SelectList(Model.users, "UserId", "Email", Model.leadsList[i].backupUserId), "Select user", new { data_val = false })
                  &lt;/td&gt;
                  &lt;td&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  Select
              &lt;/th&gt;
  
              &lt;th&gt;
                  Date added
              &lt;/th&gt;
              &lt;th&gt;
                  Contact name
              &lt;/th&gt;
              &lt;th&gt;
                  Contact mobile
              &lt;/th&gt;
              &lt;th&gt;
                  Email
              &lt;/th&gt;
              &lt;th&gt;
                  Source
              &lt;/th&gt;
              &lt;th&gt;
                  Status
              &lt;/th&gt;
              &lt;th&gt;
                  Assigned to user
              &lt;/th&gt;
              &lt;th&gt;
                  Back up user
              &lt;/th&gt;
              &lt;th&gt;
                  Comments
              &lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  
  &lt;div id="assignUserToLeads"&gt;
      &lt;h4&gt;
          Assign selected to&lt;/h4&gt;
      @Html.DropDownList("userList", new SelectList(Model.users, "UserId", "Email"), "Select user")
  &lt;/div&gt;
  
  &lt;input type="submit" value="Save" /&gt;
  }
  </code></pre>
  
  <p>My constroller is expecting to receive model with list of leads.</p>
  
  <pre><code>public ActionResult EditLeads(LeadsVM leadVM, string mode, FormCollection form)
      {
          // Assign user to lead
  
          var user = form["userList"];
  
          var leadsToUpdate = leadVM.leadsList.Where(m =&gt; m.selected == true);
  
          foreach (var lead in leadsToUpdate) ...
  </code></pre>
  
  <p>If I select value from dropdown list to display 100 items on page, everything works fine, but once I switch to another page, name binding is falling apart and model is passing null for leadVM.leadsList. I did small hack which I thought might help. Before model is send to controller I am calling displayAllDataTable function.</p>
  
  <pre><code>function displayAllDataTable() {
          console.log($("#dataTable_length select"));
          $("#dataTable_length select").val(100);
          $("#dataTable_length select").trigger("change");
      }
  </code></pre>
  
  <p>Unfortunately the function forces dataTable to display all results on 1st page, but model still passes null for leadsList. I would assume I will have to call some dataTable function to refresh the fields in table and then the form can be correctly submitted, but there must be simpler way.</p>
  
  <p>To summarize I always want to pass all data from table to controller, regardless on which page I am currently in. </p>
  
  <p>DataTable </p>
  
  <pre><code>table = $('#dataTable').DataTable({
                  'dom': '&lt;lf&lt;"table_wrapper"t&gt;ip&gt;',
                  "aoColumns": [
                  { "bSearchable": true },
                  { "bSearchable": true },
                  { "bSearchable": true },
                  { "bSearchable": true },
                  { "bSearchable": true },
                  { "bSearchable": true },
                  { "bSearchable": false },
                  { "bSearchable": false },
                  { "bSearchable": false },
                  { "bSearchable": true }
                  ]
  
              });
  </code></pre>