How reinitialize(reset) variable on every touch of dataTable if i receive data by rows().data()

Mausino

@kthorngren author of image

Now i know that everytime if are some changes with data in dataTable like sort, filter, pagination or pageLenght (show x rows per table) etc ...

I must reinitialize the variable again like you

var dataFromTable = table.rows().data();

still again and again if something happened with DataTable object

I thanked that will automatically updated on every change in table.
JS is not my strong part..still need to lean more (and jquery much more if i want work on higher level with it)

Now i know how to reinitialize the variable on every time if i do something with datables in console.. could i please you show me some example in live.datatables how i can reinitialize object to variable automatically on any changes which user do with datatables (like sorting, paging, filter etc) by rows().data; ???

Note: I want mention 2 points which will good to put into documentation

A: if you're using ajax loading data.. sometimes if you have to much js resources or other staff to load.. sometimes you in async load first dataTable and after the ajax request and the rows().data() will load no arrays... think about async:false; //option)

B: if you're want reuse the array from object of rows().data(); for example to show markers on maps based on filtering, sorting, etc in dataTable.. dont forget reinitialize and assign the rows().data(); every time to your variable

Sorry for my English

kthorngren

I thanked that will automatically updated on every change in table.

If the dataFromTable were a Javascript object and you made changes to the object then the variable will be updated to reflect the changes. But using rows().data() doesn't return and object that references the Datatables data. So you need to use the API again if you want the current dataset.

how i can reinitialize object to variable automatically on any changes which user do with datatables (like sorting, paging, filter etc) by rows().data; ???

Datatables has various events, documented here, that you can use when certain actions take place like paging, etc.

think about async:false; //option)

Usually not a good idea to use async:false. Using initComplete is a good option to to use rows().data() as it will be executed after all the table is populated with all the data.

Kevin

Mausino

@kthorngren thank you for the feedback .. i started looking on events link, which you gave me here thanks for your advice.

If i will have real example with maps how to reinitialize by events the data from datatable to var i will post here the link for working example. Now it begins for me the journey to learn much more about events and some new stuff for me in js and jquery

Mausino

Here is working example for serverside

                    var x_table = $('#myTable')
                        
                    .DataTable({
                        paging: true,
                        info: true,
                        searching: true,
                        searchable: true,
                        pageLength: 25,
                        // scrollY: 350,
                        fixedHeader: true,
                        order: [[0, 'desc']],
                        // aaSorting: [[0, 'desc']],
                        columnDefs: [
                            { name : 'id', targets: 0, type: 'string',},
                            { name : 'title', targets: 1,},
                            // { name : 'status', targets: 0, },
                            { name : 'description', targets: 2, },
                            { name : 'address', targets: 5, },
                            { name : 'lat', targets: 4, },
                            { name : 'lng', targets: 3, },
                            // { name : 'gps_status', targets: 0,},
                            { name : 'distance_to', targets: 6,},
                        ],
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: '{{ path('test_service') }}',
                            type: 'POST',
                            async: false,
                        },
                        drawCallback: function() {

                            window.form_data = this.api().rows().data();

                            console.log(form_data);
                            console.log(form_data[0][0]);
                            console.log( 'Records on draw event lenght ->  ' +form_data.length);
                            console.log( 'Redraw occurred at: '+new Date().getTime() );
                        }
                        // rowId: 'id'
                    })

                    // .on( 'draw', function () {
                    //     initMap();
                    // })

                    ;

Now i need to reinit function for google maps initMap(); on every drawCallback but if i will uncoment line 43 on.() the drawCallback stop works but initMap(); will works...

i tried something like this

$('#myTable').on( 'draw.dt', function () {

    initMap();
    alert( 'Table redrawn' );
});

but the table stop working... initMap(); will executed.. but table will stop working...
Here i provide video

https://drive.google.com/file/d/1qLtXGSUIsp62PE6QLnLTZhC0SKqbCxy1/view?usp=sharing

Issue is here that stop after first sort load the ajax request... but if i tried same with dataTable without serverside data... the issue was the same that after first sort or page lenght was on() function initialized and dataTable stopped worked...

Please have somebody idea how initialize other function which doesn't have something with tables on redraw of dataTable ?

Mausino

now only solution which i have is button under map:

$( "#updateMap" ).click(function() {
   initMap();
});

and button

<button id='updateMap'>Load form_data variable</button>

which on click load new values in variable form_data and update markers on map what i want automatically... not by click event

Mausino

Great news !!!

If you want add other function like initMap(); where i loaded the google maps + markers and reinitialize it on every new redrawn of dataTables, because i load new data by ajax that i need load new markers positions with info windows for each marker

i change my code which i had commented in main example

.on( 'draw', function () {
    initMap();
})

and used this and i am now able to load custom function like initMap(); on every redraw of query by ajax post request

.on( 'draw.dt', initMap )

Now if i load on every ajax request new dataset... because eg. i searching or sorting the data... will also show new markers on my map by reinitialize of google map function.

Hope that it helps somebody

colin

Nice, thanks for reporting back,

Colin