datatable redraw with updated data

Question

Hello I'm instantiating my datatable on the following way:

var dataTableOption = { "pageLength" : 5,
                        "pagingType": "simple",
                        "info": false ,
                        "searching": false,
                        "select" : {
                                     style: 'single'
                                   },
                        "lengthChange": false,

                        "columnDefs": [
                                        {
                                            "targets": [ 0 ],
                                            "visible": false,
                                            "searchable": false
                                        }
                                      ],
                        data : this.workdata,

                        columns : [ { data: 'id' },
                                    { data: 'itemno' },
                                    { data: 'artnr' },
                                    { data: 'quan' },
                                  ]


                      };

this.dt = $('#dt-overview').DataTable(dataTableOption );

when my workdata is changing because of events in application logic, I want that the data of datatable to beupdated and the table should display new data. In the debugger I've seen, that also rows data is not updated. How can I realize it?

thanks in advance!

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

I had exactly the same problem as yours.

I found this to be working but I had also some problems linked to the application logic leading to an obligation to reinitialize (destroy then init) the datatable.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 05 '16 at 09:53

dtlvd

457
1
8
21

The working code is the accepted one even if both are working. The accepted one use datatable 1.10 when the second one use legacy functions. – dtlvd Sep 05 '16 at 10:02
this is not working for me. I use the select extension. When i clear and redraw I've lost the selection. If I redraw with draw('page') i get the following error text in the table: no matching records found – user1829716 Sep 05 '16 at 14:39
Are you using the stateSave parameter ? https://datatables.net/examples/basic_init/state_save.html – dtlvd Sep 05 '16 at 14:46
I've set in datatables otions "stateSave": true,But everytime i manipulate workdata and clear and redraw the table, my page and select status is lost. – user1829716 Sep 05 '16 at 15:07
Ok, so you may need to use the session storage. Have a look on this : https://datatables.net/forums/discussion/22482/howto-save-row-selection-and-highlighting-if-page-refresh – dtlvd Sep 05 '16 at 15:13

score 1 · Answer 2 · answered Sep 05 '16 at 10:51

1

You can use fnStandingRedraw to refresh the server side data in datatable and it works like a charm (unfortunately its deprecated though). You can use https://datatables.net/plug-ins/api/fnStandingRedraw plugin and use like below:

// Create variable
var ajaxSourceDataTable;

// Define datatable for variable
ajaxSourceDataTable = $('.datatable-ajax-source table').dataTable() 

// Use this code to redraw/refresh datatable without hard refresh to page
ajaxSourceDataTable.fnStandingRedraw();

answered Sep 05 '16 at 10:51

Jitesh Sojitra

3,655
7
27
46

unfortunately it does not work. I have included https://cdn.datatables.net/plug-ins/1.10.12/api/fnStandingRedraw.js but when i'm calling datatable.fnStandingRedraw(); I get the following error: datatable.fnStandingRedraw is not a function – user1829716 Sep 05 '16 at 14:51
Did you add java script file properly? I think you have to use dataTableOption.fnStandingRedraw instead of datatable.fnStandingRedraw according to your variable name for datatable. – Jitesh Sojitra Sep 05 '16 at 14:57
yes i have added it correct and get no 404 by loading it. I've added "fnStandingRedraw" : true, to my datatableoptions, but it has no effect. – user1829716 Sep 05 '16 at 15:19
"datatable.fnStandingRedraw is not a function" error is definitely something you need to fix because we don't know your code and it says respective JS is not integrated properly as per my opinion. Read https://datatables.net/plug-ins/api/fnStandingRedraw and google around it. Also http://stackoverflow.com/questions/19551638/uncaught-typeerror-object-object-object-has-no-method-fnstandingredraw – Jitesh Sojitra Sep 05 '16 at 15:25
Well I included the JS file directly after the script file of Datatables. If i show source code of my webpage in chrome. the include is shown as a link. When i click to it, the source code is loaded. I have also paste the code of https://cdn.datatables.net/plug-ins/1.10.12/api/fnStandingRedraw.js at the end of dataTables.js which is definitely loaded, but it has also no effect. – user1829716 Sep 05 '16 at 16:05

datatable redraw with updated data

2 Answers2