jQuery DataTables Editor: avoid table reloading after an inline edit

Question

I use the DataTables Editor plugin (https://editor.datatables.net/) for editing a table with remote data (https://datatables.net/examples/data_sources/server_side.html) in inline mode (https://editor.datatables.net/examples/inline-editing/simple.html)

After some field is edited, submitted and a response from the editor's server handler is returned, the table always completely reloads sending an extra AJAX request to the server even though there's no need to do that since only one field in only one row was changed and all the data required to redraw the table row have already been received in the previous inline edit response.

So the question is whether it's possible to get rid of the extra AJAX call and redraw the edited row only, rather than completely refreshing the whole table.

The piece of code responsible for the reloading is:

// dataTables.editor.js

Editor.prototype._submit = function ( successCallback, errorCallback, formatdata, hide )
{
...
    // Submit to the server (or whatever method is defined in the settings)
    this._ajax(
        submitParams,
        function (json) {
        ...
            // the following line forces the table to completely reload
            that._dataSource( 'commit', action, modifier, json.data, store );
        ...
        }
    )
...
}

blfbt · Accepted Answer · 2017-02-17 16:30:41Z

0

Here is an answer from Datatables Forum:

Yes, you can set the drawType option to none in the form-options object (e.g. the second, optional, parameter passed into inline(). That will stop DataTables from doing a redraw (in the case of server-side processing that involves the Ajax request). It does mean that any sorting or filtering changes caused by the change in data won't be immediately shown though.
Allan

answered Feb 17, 2017 at 16:30

blfbt

403 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marioX991 · Accepted Answer · 2023-02-02 12:19:44Z

0

try with stateSave: true https://datatables.net/reference/option/stateSave

$(document).ready(function() {

        var table = $('#table_name').DataTable(
            {
                columnDefs: [{
                    orderable: false,
                    targets: [0, 1, 8, 9]
                }],
              ,
               stateSave: true,
                "lengthMenu": [[10, 50, 100, 500, -1], [10, 50, 100, 500, "all"]]

            }
         )
    });

answered Feb 2, 2023 at 12:19

marioX991

1

Collectives™ on Stack Overflow

jQuery DataTables Editor: avoid table reloading after an inline edit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related