Datatables as calendar - how to change array

Janis0941

I made calendar as database editor basis
https://live.datatables.net/yasefeye/3/edit

When using editor and ajax I added folowing code on load

initComplete: function(settings, json) {
    events = table.rows().data().toArray();

And in java script with time delay to load ajax data in array: events (I created array as example live.datatables.net):

const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function(){ myResolve("OK"); }, 1000);
});

myPromise.then(function(value) {
today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
//update array with easter;
getEaster(currentYear);
// Call the showCalendar function initially to display the calendar
showCalendar(currentMonth, currentYear);
});

The result is as in example, but is it possible by datatable editor to alter array: events after load? Like then user add some row or delete record in datatable or edit it. Using Promise was alternative as I did not find solution how to get directly to datatable loaded json from external script.

One option ir to force reload of web page every time then user add, edit or delete record, but it might be heavy on server if user has more than 1000 events and does not look nice

Sorry for language - not IT person

allan

Very impressive! Yes, you can use Editor to modify a table's data without an Ajax call.

What you'd probably need to do is listen for the submitComplete event to know when to check the data in the table (data()) for updates.

Allan

allan

If you want to be a bit more refined with the updates, you could use postCreate, postEdit and postRemove to know what specific actions to take on specific rows.

Allan

Janis0941

I tried function, but it creates type error

editor.on( 'create', function ( e, type ) {
   events.push(table.row(table.rows().count()-1).data().toArray());
} );

for time beeing the only solution I find working was

table
    .on('draw.dt', function () {
        events = table.rows().data().toArray()
    const myPromise = new Promise(function(myResolve, myReject) {
      setTimeout(function(){ myResolve("OK"); }, 1000);
    });

    myPromise.then(function(value) {
        today = new Date();
        currentMonth = today.getMonth();
        currentYear = today.getFullYear();
        // Call the showCalendar function initially to display the calendar
        showCalendar(currentMonth, currentYear);
    });
});

But this is triggered also on filtering and pages - I did not find event on data change

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I tried function, but it creates type error

What was the error please? Do you mean a Typescript error, or a runtime type error?

Allan