Question

我正在尝试实现数据表来创建一些计划，并且表中的行是可拖动的。我使用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);
    });

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

1 HTML 2

2 PHP 5

3 JS 4

拖动和更改订单后

2 PHP 5

3 JS 4

1 HTML 2

但是当我点击提交按钮时，输出为1,2,3而不是2,3,1 拖动并更改顺序后，有没有办法保存行的状态。代码在普通表中正常工作，但在数据表

中没有

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＆amp; 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网站上它是标准的更新功能。

如何实现Jquery数据表以及sortable（）

2 个答案: