How to refresh data in form after reloading datatable

How to refresh data in form after reloading datatable

a3pla3pl Posts: 4Questions: 1Answers: 1

Hi

in my project i use datatable with data from SQL database to navigate through records update/create/delete them.
After selecting each row in datatable, detrails from record described there, are written to html form next to the table.
All is working great but i have a problem with one thing.
Im using bootstrap and I call a modal window with a button to edit data selected in a row.
After editing and updating/deletiing data i reload the datatable but i have a problem with a form with data details (based on id from a datatable row).
The details are not refreshing.

I tried to ad a function to drawCallback or on.draw method but it looks like the row isnt selected yet in that moment.

For example:
dataTable.on( 'draw', function () {
console.log( 'Is row selected yet ?: '+ dataTable.rows( '.selected' ).any() );
} );
I always get "false" result, although I see selected row in table.

I really need to refresh data in form after updateing details in modal.

I hope its simple but i couldnt find an answer.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @a3pl ,

    Are you using Editor for the editing, or your own implementation? We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • a3pla3pl Posts: 4Questions: 1Answers: 1

    Its hard to create example cause im getting data into table from SQL database.
    I need to refresh form with data from selected datatable row after ajax.reload..
    It looks like, when function on.draw is executed, no rows is yet selected.
    I tried to do something like this:

    dataTable.on( 'draw', function () {
    console.log( 'Sekected row after 1 s '+ dataTable.rows( '.selected' ).any() +' - ' +dataTable.row( { selected: true } ).data());
    setTimeout(function(){
    console.log( 'Sekected row after 1 s: '+ dataTable.rows( '.selected' ).any() +' - ' +dataTable.row( { selected: true } ).data());
    }, 1000);

    The result was:
    Selected after redraw: false - undefined
    Sekected row after 1 s: true - <data from selected row>

    I just need to get data from selected row after datatable reload.

    Ok, after some time i managed to make some example showing that problem.

    http://live.datatables.net/sifimuro/1/edit?html,js,console,output

    Just select any row and click on refresh.
    Yoi will notice that just after redraw, selected row is undefined.

    } );
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Great test case, thanks!

    It looks like, when function on.draw is executed, no rows is yet selected.

    Yes, the row is selected after the event draw event. I suggest trying the select event to get the data after reload. Using a boolean variable you should be able to get the selected data after reload but not if the row is user selected.

    See the updated example:
    http://live.datatables.net/kavazebu/1/edit

    Also you will notice the order of events in the console.

    Kevin

  • a3pla3pl Posts: 4Questions: 1Answers: 1

    Thank You.
    After adding proper functions to select event in my app everything is working fine now.

This discussion has been closed.