Method ajax.reload() broken after datatable DOM manipulation ?

ouatataz

First I would like to thank you for this awesome API !

I have a problem with the ajax.reload() method in a particular situation.
For a specific datatable, I need to use the row grouping function and in the meantime, I need to be able to sort my table rows by groups (i.e. drag and drop only the grouped rows with their child rows).

Since the datatable API does not allow this (to my knowledge), I tried using the jquery sortable after having manipulated the DOM once the table is drawn in order to add multiple tbodys and to use them for the sortable plugin.

Everything just works fine (table drawing, row group sorting, etc...), but when I need to reload data via ajax using the ajax.reload() method, tha datatable is not updated although the json data are well received. I also remove the multiple tbodys before calling the reload method.

Does anybody have an idea of how to solve this ?
Here is my sample code :

var table = $('#my-table').DataTable({
    ajax: {
        url: '/my-table-populate-ajax-url.php',
        type: 'POST',
        data: function(d) {
            d.identifier = identifier;
        },
        global: false,
    },
    responsive: false,
    ordering: true,
    paging: false,
    searching: false,
    dom: 'rt',
    order: [1, 'asc'],
    rowGroup: { dataSrc: 0, },
    columnDefs: [
        {
            targets: [0],
            visible: false,
        },
        {
            targets: [1],
            className: 'no-order-icon',
            orderDataType: 'dom-data-sort-order',
            type: 'numeric',
        },
        {
            targets: ['_all'],
            orderable: false,
        },
    ],
    buttons: [],

    initComplete: function(settings, json) {
        // Wrap into multiple tbodys for the jQuery sortable plugin
        $('#my-table > tbody > tr.group.group-start:not(:first)').each(function() {
            var boundary = $(this);
            $('<tbody>').insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());
        });

        // Row sorting (jQuery sortable plugin)
        $('#my-table').sortable({
            items: 'tbody:not(.not-sortable)',

            forcePlaceholderSize: true,
            placeholder: 'table-sort-highlight',
            handle: '.handle',
            zIndex: 999999,
            axis: 'y',

            helper: function(event, ui) {
                ui.children().each(function() { $(this).width($(this).width()); });
                ui.children().children().each(function() { $(this).width($(this).width()); });

                return ui;
            },
        });
        
        $('#reload-data').click(function(event) {
            event.preventDefault();
            
            // Unwrap the multiple tbodys to restore the initial table structure
            $('#my-table > tbody').contents().unwrap().wrapAll('<tbody>');

            table.ajax.reload(function(json) {
                // Do stuffs... but no data reload :(
            });
        });
    },
});

allan

Can you link to a test case showing the issue please?

DataTables doesn't work with multiple tbody elements, but if you are doing that post draw, it might get away with it. That shouldn't be effecting the ajax.reload() though.

Allan