How to not lose editing when using DT with the Scroller extension?

When using DataTables (DT) with the Scroller extension, you may encounter a problem where your unsaved changes to the table are lost when you scroll away from the edited rows. This is because the Scroller extension removes rows from the DOM that are not currently visible, including any changes you made to those rows.

To prevent this problem, you can use the Editor extension in combination with Scroller. The Editor extension allows you to edit the table data in a modal window, which is not affected by Scroller's behavior of removing rows from the DOM. Here are the general steps to follow:

1. nitialize your DataTable with the Scroller extension as usual.

javascript
var table = $('#example').DataTable( {
    // Scroller extension options
    // ...
} );

2. Add the Editor extension to your DataTable initialization.

javascript
var editor = new $.fn.dataTable.Editor( {
    ajax: "example.com/api/myTable",
    table: "#example",
    fields: [
        // define your fields here
    ]
} );

table.on( 'click', 'tbody td:not(.select-checkbox)', function (e) {
    editor.inline( this );
} );

3. Use the inline() method of the Editor object to open an editing modal window when a user clicks on a cell in the table.

This way, when a user clicks on a cell in the table, the Scroller extension will not affect the editing modal window, allowing the user to make changes to the data without worrying about losing unsaved changes.

Note that this is just a general approach and you may need to customize it depending on your specific requirements.