Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

refresh or reload datatable

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 )

like image 903
user1480864 Avatar asked Aug 02 '12 20:08

user1480864


1 Answers

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();
like image 108
Prateek Avatar answered Sep 18 '22 10:09

Prateek