如何实现Jquery数据表和sortable()

how to implement Jquery datatable along with sortable()

本文关键字：sortable 数据表 Jquery 实现 何实现      更新时间：2023-09-26

我试图实现数据表来创建一些时间表和表中的行是可拖动的。我使用sortable来实现这个功能这是我的html代码。

<link href="~/NewFolder1/jquery.dataTables.min.css" rel="stylesheet" />
 <link href="~/NewFolder1/dataTables.tableTools.css" rel="stylesheet" />
<link href="~/mycss/Sortable.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/NewFolder1/jquery-1.10.2.js"></script>
<script src="~/NewFolder1/jquery-ui.js"></script>
  <script src="~/JScripts/jquery.dataTables.min.js"></script>
   <script src="~/NewFolder1/dataTables.tableTools.js"></script>  
<script src="~/JScripts/Sortable.js"></script>
<div id="Dataelements">
    <div id="Left-Content" style="width:50%;float:left;">
        
        </div>
    <div id="Right-Content" style="width:49.5%;float:left;" >
        <table id="example" class="display">
            <caption>Create Your Template</caption>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>Duration</td>
                </tr>
            </thead>
            <tbody id="sortable" >          
                
            </tbody>
            </table>
    </div>
</div>
<br /><br />
<hr />
<input type="submit" value="submit" id="button1"style="text-align:center;margin-top:50px;float:left;" />
现在我的JS文件中的一些代码是 
 $("#sortable").sortable();
    $('table#example').dataTable({
        "aaSorting": [],
        
    });
    var table = $('table#example').dataTable().api();
    $("#button1").click(function () {
 
        var rows = $("#example").dataTable().fnGetNodes();
        var cells = [];
         for (var i = 0; i < rows.length; i++) {
             cells.push($(rows[i]).find("td:eq(0)").html());
        }
        alert(cells);
    });

现在，我点击按钮后，我正在检索我的表的第一列假设在起始表=

2

5

3 JS 4

拖动和改变顺序后

5

3 JS 4

2

但是当我点击提交按钮时，我得到的输出是1,2,3而不是2,3,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>

当您使用serialize选项时，它将创建一个POST查询字符串，如:item[]=1&item[]=2等。

例如，在PHP中:

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

我的代码中有这样的东西，它可以工作

(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 }}">
相关文章：