Editor: re-draw only one row after server response (SSP)

Editor: re-draw only one row after server response (SSP)

FlashdownFlashdown Posts: 20Questions: 3Answers: 0

I have a server-side processing datatable with an editor.
What I'd like to do is edit a row, send the data to the server, and update only that row with the data received from the server.
In other words, I need to get rid of the second AJAX call refreshing the whole table. In my case, it's not a big deal if the table won't be re-sorted.

We already figured out that in order to avoid the second call I can use the drawType: "none" option, but now the question is how I can update the edited row with the just received data.

Initially, I tried to update the row with the row.data() API call in the postSubmit event handler but it turned out that if a row is updated this way, next time I try to edit it, it throws an error because the editor can't get its data.

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

Replies

  • allanallan Posts: 61,734Questions: 1Answers: 10,111 Site admin

    If you are using server-side processing a redraw always means that all rows will be redrawn. The only option is to disable the draw as you have done.

    Editor has some code in it to check if server-side processing it being used and if so, don't bother updating the data since it will be redrawn anyway. That obviously isn't all that useful in your case!

    In the Editor source, if you search for: edit: function ( identifier, fields, data, store ) { and in that function you will find:

    if ( ! __dtIsSsp( dt, this ) ) {
    

    Replace it with:

    if ( ! __dtIsSsp( dt, this ) && this.s.editOpts.drawType !== 'none' ) {
    

    That should resolve it for you.

    Thanks,
    Allan

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

    Thanks, Allan, it did the trick, but the replacement should look this way:

    if ( ! __dtIsSsp( dt, this ) || this.s.editOpts.drawType === 'none' ) {
    

    Is there any chance it can be included in a future release?

  • FlashdownFlashdown Posts: 20Questions: 3Answers: 0

    I just realized that the actual issue was in the server response format: data was an object rather than a plain array, and the following line in the editor's code didn't work:

    for ( var i=0 ; i<json.data.length ; i++ ) {
    

    Now that I fixed the server response format, everything works without any core modifications.

    Anyway, thanks for the help, much appreciated!

  • FlashdownFlashdown Posts: 20Questions: 3Answers: 0

    UPD: Even with the Editor source modification, neither the datatable callback rowCallback nor the cell callback createdCell is called after an edit, so all event handlers get lost.

  • allanallan Posts: 61,734Questions: 1Answers: 10,111 Site admin

    Hah - as I was typing that logic I was thinking "is this inverted...". Good to hear that helped. Yes, I think this would be a sensible thing to have in Editor and I'll include it in 1.6.2 which I plan to release before the end of the month.

    rowCallback won't be called since there is no draw. And createdCell won't be called since the cell already exists and isn't being created again.

    So yes, disabling draw here is a major disadvantage if you require a callback. You would need to listen for the submitComplete and update the cell there.

    Ideally if you could use delegated event handlers, that might resolve the issue a different way.

    Allan

  • FlashdownFlashdown Posts: 20Questions: 3Answers: 0

    Yes, I eventually ended up with calling a callback in the postEdit event handler. I need to read through what the beast delegated event handler is, hopefully, it will allow me to handle the issue more gracefully.

    Thanks again for your help.

This discussion has been closed.