如何与sortable()一起实现Jquery数据表

Answer 1

jQuery UI 可排序功能包含一个序列化方法来执行此操作。这真的很简单。这是一个简单的示例，一旦元素位置发生更改，就会将数据发送到指定的 URL。

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

它的作用是使用元素 id 创建一个元素数组。所以，我通常会这样做：

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

当您使用序列化选项时，它将创建一个 POST 查询字符串，如下所示：item[]=1&item[]=2 等

例如，在 PHP 中：

foreach ($_POST['item'] as $value) {
    // do smth
}

Answer 2

我的代码中有类似的东西并且它有效

(function(){
    $('#datatable-ui').DataTable({
        "fixedHeader": true,
        "responsive": true,
        "paging": false,
        "info": false,
        "aaSorting": [[ 1, "asc" ]],
    });

    // http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    };
    $("#datatable-ui tbody").sortable({
        helper: fixHelper,
        update: function(event, ui) {
            $("#datatable-ui tbody tr").each(function(index){
                $.ajax({
                    url: '{{ route('owner.item.position') }}',
                    type: 'POST',
                    data: 'restaurant_id='+$(this).data('restaurant-id')+'&item_id='+$(this).data('item-id')+'&position='+(index+1)
                })
                .done(function (response) {
                    console.log(response);
                })
                .fail(function (jqXhr) {
                    console.log(jqXhr);
                });
            });
        }
    }).disableSelection();
})(jQuery);

我正在从 tr 获取数据属性

@foreach($items as $item)
    <tr data-sortable="{{ $item->position }}" data-restaurant-id="{{ $restaurant->id }}" data-item-id="{{ $item->id }}">

在 PHP 网站上它是标准的更新功能。

Answer 3

我相信最好的方法是使用数据表行重新排序功能