Editor: avoid table reloading after an inline edit

Editor: avoid table reloading after an inline edit

FlashdownFlashdown Posts: 20Questions: 3Answers: 0
edited February 2017 in Free community support

I use the DataTables plugin for managing a table with the server-side data source https://datatables.net/examples/data_sources/server_side.html + the Editor plugin.

After some field is edited, submitted and a response from the editor's server handler is returned, the table always completely reloads itself, 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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,852Questions: 1Answers: 10,519 Site admin

    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

  • FlashdownFlashdown Posts: 20Questions: 3Answers: 0

    Thanks, Allan, it indeed prevents the table from being refreshed, but in this case, the input field does not disappear. Is there a way to draw only that one field?

  • FlashdownFlashdown Posts: 20Questions: 3Answers: 0
    edited February 2017

    I found a workaround for that:

    editor.on('postSubmit', function(e, json, data, action) {
        if (json.error) {
            alert(json.error);
        }
    
        $.each(json.data, function(rowId, rowData) {
            var row = datatable.row('#' + rowId);
            row.data(rowData);
        });
    });
    
    

    But one issue still persists: when I click on the same field next time, it causes an error since the last parameter of initEdit event handler (data) is not passed: "TypeError: data is undefined"

    editor.on('initEdit', function(e, node, data) {
    // this event handler doesn't work in the second time
    });
    
  • allanallan Posts: 63,852Questions: 1Answers: 10,519 Site admin
    Answer ✓

    With your other thread on this topic I think I've suddenly realised what is going on. Could you check it out in the other thread and let me know there how you get on?

    Thanks,
    Allan

This discussion has been closed.