I'm using Jquery Datatable which includes customized rendering for columns. Based on values, I've to disable certain control in it. I want to reload/refresh/rebind my jquery datatable after post. How can I do that?
**Controller:**
[HttpPost]
public JsonResult PostAction(MyMOdel model)
{
//save changes to DB
return Json(new
{
Success = result,
});
}
public ActionResult MyAction()
//grab records from DB and return JSON
}
**View:**
@using (Ajax.BeginForm("PostAction", "ControllerName", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
}, new { @id = "myForm"
}
))
{
<table id="myTbl" class="display"><tr><td>col1</td></tr></table>
}
<script type="text/javascript">
var oTable = $('#myTbl').dataTable({
"sAjaxSource": "/ControllerName/MyAction",
<!-- more config -->
function updateSuccess(data, status, xhr) {
//refresh datatable;
}
</script>
Update:**
I found the answer:
clear the table ( fnClearTable )
add new data to the table ( fnAddData)
redraw the table ( fnDraw )
First just get datatable reference, using
var oTable = $("#someTable").dataTable();
After that do whatever, you want to :
Clear the table : oTable.fnClearTable();
Redraw the table : oTable.fnDraw();
Add new data to the table : oTable.fnAddData();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With