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

Question

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

at every rows data in datatables 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 :)

Adam Fowler · Accepted Answer · 2022-01-06 18:57:36Z

5

This is one of many ways to quickly refresh a table

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

edited Jan 6, 2022 at 18:57

answered Mar 21, 2012 at 16:50

Adam Fowler

1,7511 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

digitaljoel · Accepted Answer · 2011-05-03 14:33:18Z

2

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

http://www.datatables.net/api

answered May 3, 2011 at 14:33

digitaljoel

26.6k15 gold badges94 silver badges116 bronze badges

2 Comments

bungdito Over a year ago

actually i'm not just need for delete only, but also for add and edit. so maybe i need for refreshing the datatables :)

digitaljoel Over a year ago

Click through to the linked documentation. There's fnAddData and fnUpdate which will likely fit your need.

Jatin Dhoot · Accepted Answer · 2011-05-03 14:29:29Z

1

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

answered May 3, 2011 at 14:29

Jatin Dhoot

4,3649 gold badges43 silver badges59 bronze badges

1 Comment

Jatin Dhoot Over a year ago

Here i am assuming you are using jQuery for javascript processing as you have used jquery in tags. $('rowobject') is current row's object

shanmugavel · Accepted Answer · 2012-07-26 09:48:55Z

1

This will do the trick ->

oTable.fnDraw(false);

U can call like this

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

answered Jul 26, 2012 at 9:48

shanmugavel

1991 gold badge3 silver badges13 bronze badges

Comments

Crazy Crab · Accepted Answer · 2018-02-07 09:10:22Z

0

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

answered Feb 7, 2018 at 9:10

Crazy Crab

7126 silver badges16 bronze badges

Comments

avantdev · Accepted Answer · 2020-03-18 17:23:43Z

0

We can use DataTable API.

var currentPage = ListTable.page();

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

answered Mar 18, 2020 at 17:23

avantdev

2,7401 gold badge23 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related