CODEWITHSUNDEEP
jquerydatatable
user1480864
user1480864

Reputation: 1585

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:

Upvotes: 7

Views: 72354

Answers (7)

Yush0
Yush0

Reputation: 1656

For newer Datatable Versions this will do the Job:

var table = $('#yourDataTable').DataTable({...});
table.columns.adjust().draw();

In my case I just needed to redraw it. But you can also clear and add new data before you redraw.

Upvotes: 0

joy
joy

Reputation: 1

var oTable = $('#groups').dataTable();
oTable.fnClearTable();
oTable.fnDestroy();
groupsList();

Upvotes: 0

Serj Sagan
Serj Sagan

Reputation: 30208

This worked for me:

// Initially
window.table = $('#TableID').dataTable({
                    ...
                });

// Later, when table needs to be refreshed
window.table.fnDestroy(); 
// depending on the version, maybe just .destroy() instead of .fnDestroy();

Now just do the call you did Initially to reinit the table:

window.table = $('#TableID').dataTable({
                    ...
                });

Upvotes: 2

Prateek
Prateek

Reputation: 4490

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

Upvotes: 19

rockstardev
rockstardev

Reputation: 13527

Are you sure this is not what you are looking for:

oTable.fnReloadAjax();

That worked for me. It reloads the grid using the current ajax url config.

Upvotes: -1

user1480864
user1480864

Reputation: 1585

Ifound the answer:

clear the table ( fnClearTable )

add new data to the table ( fnAddData)

redraw the table ( fnDraw )

Upvotes: 2

KRyan
KRyan

Reputation: 7598

You just call .dataTable() on the table again, without any arguments.

So if you had done something like this:

$('#someTable').dataTable({
    someAttribue: someValue
});

You can then later do this to refresh it:

$('#someTable').dataTable();

Don't call it again with the arguments; it doesn't like that.

Upvotes: 0

Related Questions