14

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

Improve this question

5 Answers 5

Reset to default
6
+50

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)
         );
      }
   });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

by using DataTable().$('input,select,textarea'), its a good way to get all the data and input inside. But, I would rather to bind my data rather than using AJAX
Unless you're using a form how do you expect to bind your data? You're using a third party library to store your data on the DOM - the most efficient and safe way to handle this would be serialized AJAX calls.
oopss sorry if I didnt include it in my question. Im using form with a submit button. I have edited my question
In that case it looks like your question is a duplicate of this question. IMO opinion AJAX is the better option in this situation rather than creating invisible elements within the form.
OMG, i really had no idea there was a duplicate question to mine. what kind of meta word did u use to find that question? I googled for days and ended up nothing. Well, in my case, by using AJAX means I need to change all of my codes. So I prefer to append invisible elements to the form. If you want to add the answer with append function to the form, I will accept your answer.
|
2

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 ... 
        ]
    } );
Improve this answer

Comments

1

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
      }
   });
});
Improve this answer

2 Comments

Isn't this nearly exactly what I answered with?
by using DataTable().$('input,select,textarea'), its a good way to get all the data and input inside. But, I would rather to bind my data rather than using AJAX
1

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');
    }
  });
Improve this answer

1 Comment

dataTable and DataTable are two different things. to use DataTable functions, should use dataTable.api(). But the same with other answer, i would rather use Bind data method rather than AJAX
1

Please go through following link

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.