Question

我正在使用jQuery DataTables 1.10.12。我正在使用rowReorder拖放行。它工作正常。但是问题是当我在该行重新排序不起作用之后，手动对列表中的列进行排序。请建议我如何实现？我的代码如下所示。我想手动对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();
        })
    })

如何动态更改rowReorder的dataSrc属性

1 个答案: