Question

我将我的数据视图绑定到控制器，所以稍后我可以用数据做我想做的事情。在我的视图中，我使用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>

脚本

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

控制器

[HttpPost]
public ActionResult MyAction(List<MyModel> MyListModel)

如果dataTables中的数据不超过1页，则此方法效果很好。如果它超过1页，那么我的控制器要么只能接收第一页的List Data或者什么都不收到（空）

如何将DataTables中的所有数据从View绑定到Controller？此绑定应包括所有页面，而不仅仅是第一个页面

Answer 1

我不确定你是如何触发数据更新的，所以假设它是一个按钮，以下内容应该有效：

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

修改1：

根据this的How to post data for the whole table using jQuery DataTables回复，如果您已开始使用表单，请使用以下内容：

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

Answer 2

因为你不想要任何ajax 使用Javascript Source Data，将模型传递给视图，序列化并将其用作源

var myData = @Html.Raw(Json.Encode(Model.ListOfData));

//then pass it to the datatable   

$('#example').DataTable( {
        data: myData,
        columns: [
            { title: "col1" },
            { title: "col2" },
           etc ... 
        ]
    } );

Answer 3

使用DataTables，DOM中只存在当前页面数据。如果您提交表单，则仅在服务器中提交当前页面数据。一个解决方案是通过ajax提交数据：

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

$('#your-form').on('submit', function(e){
   e.preventDefault();

   //serialize your data
   var data = myTable.$('input,select,textarea').serialize();

   $.ajax({
      url: '@Url.Action('MyAction', 'MyController')',
      data: data,
      success: function(responseData){
         //do whatever you want with the responseData
      }
   });
});

Answer 4

您需要使用data（）方法获取整个表的数据：

ROW_NUMBER

Answer 5

请浏览以下链接

https://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

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

5 个答案: