Monday, 26 August 2013

Jquery Datatables and MVC Form Post

Jquery Datatables and MVC Form Post

I have a table (list of items) within a form that allows the user to do
some action on each row (ex: delete an item). When the user clicks submit,
all the rows (data and action) are sent to the controller. Works great.
Now I want to add some datatables filter functionality to the table. I get
it to work just fine on the View but when I click Submit, all it sends is
a null value instead of the row data. My understanding is that datatables
modifies the page/DOM and somehow I need to get it back onto the page
before the submit fires. I saw some suggestions to use the datatables API
function fnGetHiddenNodes() but I wasn't sure how to do this on my page.
Any help would be greatly appreciated.
Code
@model IEnumerable<Admin.Models.MemberFeedback>
@{
ViewBag.Title = "Member Feedback";
}
@Scripts.Render("~/bundles/datatables")
@using (Html.BeginForm("MemberFeedback", "Admin", FormMethod.Post, new
{ @id = "processmemberfeedback" }))
{
<table class="dynamicTable table table-striped table-bordered
table-primary" id="feedbackemails">
<thead>
<tr>
<th>Date</th>
<th>From</th>
<th>Feedback</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@Html.EditorForModel()
</tbody>
</table>
<br />
<input type="submit" value="Submit" id="submit1" class="btn
btn-inverse"/>
}
</div>
<script>
/* Table initialisation */
var oJobListingsTable = $('#feedbackemails').dataTable({
"sPaginationType": "bootstrap",
"bLengthChange": false,
"bFilter": false,
"oLanguage": {
"sEmptyTable": "No records found.",
"sLengthMenu": "Rows: _MENU_",
"sSearch": "Filter: "
},
"iDisplayLength": 10,
});
</script>
How do I get a jquery datatables form to post back correctly to the
Controller (and not send a null value)?

No comments:

Post a Comment