Как динамически изменить атрибут dataSrc rowReorder

Question

Я использую jQuery DataTables 1.10.12. В этом я использую rowReorder для перетаскивания строк. Работает нормально. Но проблема в том, что когда я сортировка вручную по столбцу в списке после этого rowReordering не работает. Пожалуйста, предложите мне, как я могу достичь этого? Буду признателен за помощь. Мой код, как показано ниже ... Я хочу отсортировать столбец play_count вручную, т.е. из заголовка с помощью переключателя. Я попытался установить orderable : false, но не повезло. Пожалуйста, предложите мне, что я могу сделать, чтобы rowReorder работал с ordering. Я пытался так после инициализации DataTable. Но это не работает. У меня такая же проблема, как описано в

https://datatables.net/forums/discussion/30330/rowreorder-after-sort-does-not-work-even-with-order-neutral-plugin.

пожалуйста, дайте мне знать, Если существует какое-либо решение.

   var table = $('#datatables-example').DataTable({
            searching: false,
            paging:   false,
            responsive: true,
            destroy: true,
            rowId: 'id',
            rowReorder: {
                selector: 'td:not(:nth-child(-n+2))',
                dataSrc: 'index'
            },
            columns: [
                {
                    data: 'index', name: 'index', orderable: false
                },
                {
                    data: null, orderable: false,
                    render: function (data, type, row, meta) {
                        return data.index + 1
                    }
                },
                {
                    data: 'id', name: 'track_id', orderable: false,
                    render: function (data, type, row, meta) {
                        return '<button class="btn btn-primary btn-round btn-fab btn-fab-mini remove-single-track-from-playlist" title="Remove from Playlist" id="playlist_track_'+row.id+'"><i class="material-icons">remove</i></button>';
                    }
                },
                {
                    data: 'name', name: 'name',
                    render: function (data, type, row, meta) {

                        return '<div class="title-cell-with-image-container">' +
                            '<div class="pull-left"> ' +
                            '<img class="table-cell-img" src="' + (row.image_url ? getImageByContainerSize(row.image_url, 60) : '/images/theme/image_placeholder.jpg') + '" alt="">' +
                            '</div><div class="table-cell-img-title"><a target="_blank" class="plain-anchor" href="/covers/tracks/' + row.id + '/edit">' + data + '</a>' +
                            '</div></div>'
                    }
                },
                {
                    data: 'is_published', name: 'is_published',
                    render: function (data, type, row, meta) {
                        return (data == {{ACTIVE}}) ? "yes" : "no"
                    }
                },
                {data: 'play_count', name: 'play_count'}
            ],
            columnDefs: [
                { targets: 0, visible: false }
            ],
            language: {
                'emptyTable': 'No data to display',
                processing: '<img class=\'loader-img\' src=\'/images/golden_loader.gif\'>'
            },
            drawCallback: function( settings ) {
                $('[data-toggle="popover"]').popover()
            }

      $('#datatables-example').on('order.dt', function (e, data) {
            data.dataSrc = "play_count";
            $('#datatables-example').draw();
        });
        })

Answer 1

var table = $('#datatables-example').DataTable({
        searching: false,
        paging:   false,
        responsive: true,
        destroy: true,
        rowId: 'id',
        rowReorder: {
            selector: 'td:not(:nth-child(-n+2))',
            dataSrc: 'index'
        },
        columns: [
            {
                data: 'index', name: 'index', orderable: false
            },
            {
                data: null, orderable: false,
                render: function (data, type, row, meta) {
                    return data.index + 1
                }
            },
            {
                data: 'id', name: 'track_id', orderable: false,
                render: function (data, type, row, meta) {
                    return '<button class="btn btn-primary btn-round btn-fab btn-fab-mini remove-single-track-from-playlist" title="Remove from Playlist" id="playlist_track_'+row.id+'"><i class="material-icons">remove</i></button>';
                }
            },
            {
                data: 'name', name: 'name',
                render: function (data, type, row, meta) {

                    return '<div class="title-cell-with-image-container">' +
                        '<div class="pull-left"> ' +
                        '<img class="table-cell-img" src="' + (row.image_url ? getImageByContainerSize(row.image_url, 60) : '/images/theme/image_placeholder.jpg') + '" alt="">' +
                        '</div><div class="table-cell-img-title"><a target="_blank" class="plain-anchor" href="/covers/tracks/' + row.id + '/edit">' + data + '</a>' +
                        '</div></div>'
                }
            },
            {
                data: 'is_published', name: 'is_published',
                render: function (data, type, row, meta) {
                    return (data == {{ACTIVE}}) ? "yes" : "no"
                }
            },
            {data: 'play_count', name: 'play_count', orderable: false}
        ],
        columnDefs: [
            { targets: 0, visible: false }
        ],
        language: {
            'emptyTable': 'No data to display',
            processing: '<img class=\'loader-img\' src=\'/images/golden_loader.gif\'>'
        },
        drawCallback: function( settings ) {
            $('[data-toggle="popover"]').popover()
        }

        var sortOrder = true;
        $('#playCountSort').on('click', function () {
            var data = table.data();
            if (sortOrder == false) {
                var sortedData = data.sort(
                    function (obj1, obj2) {
                        return obj1.play_count - obj2.play_count;
                    }
                );
                sortOrder = true;
            } else {
                var sortedData = data.sort(
                    function (obj1, obj2) {
                        return obj2.play_count - obj1.play_count;
                    }
                );
                sortOrder = false;
            }
            var newIndex = 0;
            for (var i = 0; i < sortedData.length; i++) {
                sortedData[i].index = newIndex;
                newIndex++;
            }
            table.clear();
            table.rows.add(sortedData);
            table.draw();
        })
    })