从View To Controller中绑定Jquery Datatables中的所有数据

Mar*_*ark 12 c# asp.net-mvc jquery datatables

我将我的Data in View绑定到Controller,所以稍后我可以用数据做我想做的事.在我的视图中,我正在使用dataTable@Html.EditorForModel()渲染我的视图.

视图

<form action="xx" method="POST">
<table id="myTable" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.Field1)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Field2)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Field3)
            </th>
        </tr>
    </thead>
    <tbody>
    @if (Model != null)
    {
        @Html.EditorForModel()
    }
    </tbody>
    <tfoot></tfoot>
</table>

<input type="submit" value="submit" />
</form>
Run Code Online (Sandbox Code Playgroud)

脚本

$("#myTable").dataTable({
        searching: false,
        ordering: false,
        responsive: true,
        "bLengthChange" : false,
        "pageLength": 20,
        "bStateSave": true
    });
Run Code Online (Sandbox Code Playgroud)

调节器

[HttpPost]
public ActionResult MyAction(List<MyModel> MyListModel)
Run Code Online (Sandbox Code Playgroud)

如果数据不超过1页,则此方法很有效dataTables.如果它超过1页,那么我的控制器要么只能接收List Data第一页或没有收到任何内容(null)

我应该如何将所有数据DataTables从View 绑定到Controller?此绑定应包括所有页面,而不仅仅是第一个页面

Cha*_*win 6

我不确定您是如何触发数据更新的,因此假设它是一个按钮,则应该可以进行以下操作:

$('#your-button').on('click', function(e){
   var data = ('#myTable').DataTable().$('input,select,textarea').serialize();

   $.ajax({
      url: '/MyController/MyAction/',
      data: data,
      success: function(){
         alert('success');
      }, 
      error: function(){
         alert('failure');
      }
   });
});
Run Code Online (Sandbox Code Playgroud)

编辑1:

按照这个答案如何为使用jQuery数据表全表数据发布,如果你正在使用窗体使用下面的一组:

var table = $('#myTable').DataTable();

$('#myForm').on('submit', function(e){
   var form = this;

   var params = table.$('input,select,textarea').serializeArray();

   $.each(params, function(){
      if(!$.contains(document, form[this.name])){
         $(form).append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      }
   });
});
Run Code Online (Sandbox Code Playgroud)