how to refreshing datatables (jquery plug in) without reload page

please help me, i'm very newbie i have question about datatables (jquery plug in).

at every rows data in data开发者_如何学Gotables grid, I have button to delete data. when i click delete button, data at that row deleted.

the question is, can I refresh data table without reloading the page ? so the rows can be decrease when i click delete button without reloading the page.

this is my code: (just FYI my table id for datatble is: id="mydatatable")

html delete button on each rows data:
-------------------------------------

<button onclick="delete('id')">Delete</button>


javascript:
-----------

delete(id)
{
    delete_ajax(id);            //deleting data using ajax

    window.location.reload()    //reloading page, this what i want to change 
                                //(just refresh datatable grid without reload the page)
}

many thanks :)

This is one of many ways to quickly refresh a table

const table=$("table.datatable").dataTable();
table.fnPageChange("first",1);

Have a look at the api. You should be able to call fnDeleteRow on your datatables object.

http://www.datatables.net/api

if your delete_ajax() function is handling the business logic and if you want to remove the current row you can easily remove the row using $('rowobject').hide().

This will do the trick ->

oTable.fnDraw(false);

U can call like this

     setInterval(function ref(){
    oTable.fnDraw(false);
    },8000);

If you only want to reload the current page data, you can use this code.

table.ajax.reload();

Please refer to this DataTable ajax.reload()

We can use DataTable API.

var currentPage = ListTable.page();

ListTable.page(0).draw( 'page' );