Привязка всех данных в jQuery Datatables из представления к контроллеру

Я привязываю свои данные в поле зрения к контроллеру, чтобы позже я мог делать с ними все, что захочу. На мой взгляд, я использую 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)

Этот метод отлично работает, если данные не превышают 1 страницы в dataTables. если его больше 1 страницы, то мой контроллер либо может получить только List Data первой страницы, либо не получить ничего (null)

Как я должен привязать все мои данные в DataTables из вида к Контролер? Эта привязка должна включать все страницы, а не только первую

5 12
c# asp.net-mvc jquery datatables

5 ответов:

Я не уверен, как вы запускаете обновление данных, поэтому, предполагая, что это кнопка, должно работать следующее: 

$('#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:

Согласно этому ответу на Как разместить данные для всей таблицы с помощью 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)
         );
      }
   });
});
4

Поскольку вы не хотите никакого ajax Используйте исходные данные Javascript , передайте модель в представление, сериализуйте ее и используйте в качестве источника

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

//then pass it to the datatable   

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

С таблицами, существуют только текущие данные страницы в 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
      }
   });
});
1

Вам нужно использовать метод data (), чтобы получить данные для всей Таблицы: 

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

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

  $.ajax({
    url: '/MyController/MyAction/',
    type: 'POST',
    dataType: 'json',
    contentType: "application/json;",
    data: JSON.stringify(data),
    success: function(){
       alert('success');
    }, 
    error: function(){
       alert('failure');
    }
  });
1

Пожалуйста, перейдите по следующей ссылке

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

1