CODEWITHSUNDEEP
c#jqueryasp.net-mvcdatatables
Mark
Mark

Reputation: 2063

Bind All data in Jquery Datatables from View To Controller

Im binding my Data in View to Controller, so later I could do what I want with the data. In my View, im using dataTable and @Html.EditorForModel() to render my View.

View

<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>

Script

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

Controller

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

This method works great if the data is no more than 1 page in dataTables. if its more than 1 page, then My Controller either only can receive the List Data of the first page or receive nothing(null)

How should I bind all of my data in DataTables from View to Controller? This binding should include all pages, not only the first one

Upvotes: 13

Views: 20941

Answers (5)

Chawin
Chawin

Reputation: 1466

I'm unsure how you're triggering the update of data, so assuming it's a button the following should work:

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

Edit 1:

As per this answer to How to post data for the whole table using jQuery DataTables, if you're set on using a form use the following:

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

Upvotes: 6

Munzer
Munzer

Reputation: 2318

since you don't want any ajax Use Javascript Source Data, Pass your model to the view, serialize it, and use it as your source

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

//then pass it to the datatable   

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

Upvotes: 2

user2922221
user2922221

Reputation:

Please go through following link

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

Upvotes: 1

Cyrille MODIANO
Cyrille MODIANO

Reputation: 2376

You need to use the data() method to get the data for the whole table:

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

Upvotes: 1

jomsk1e
jomsk1e

Reputation: 3625

With DataTables, only the current page data exist in the DOM. If you submit the form, only the current page data are being submitted back in the server. One solution to this is submit the data via 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
      }
   });
});

Upvotes: 1

Related Questions