how to implement Jquery datatable along with sortable()

Question

I am trying to implement data-table to create some schedule and the rows in the table are draggable. I used sortable to implement this functionality this is my html Code.

<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;" />

Now some of code in my JS file are

 $("#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);
    });

Now after i click the button i am retrieving the 1st column of my table Suppose at the start table=

1 HTML 2

2 PHP 5

3 JS 4

And after dragging and changing order

2 PHP 5

3 JS 4

1 HTML 2

but when i click on submit button i am getting output as 1,2,3 not as 2,3,1 Is there any way to save the state of rows after i drag and change the order. The code was working fine with normal tables but not with Data Table

Answer 1

I have something like this in my code and it works

(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);

I'm fetching data attributes from tr

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

On PHP site it's standard update function.

Answer 2

The jQuery UI sortable feature includes a serialize method to do this. It's quite simple, really. Here's a quick example that sends the data to the specified URL as soon as an element has changes position.

$('#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'
        });
    }
});

What this does is that it creates an array of the elements using the elements id. So, I usually do something like this:

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

When you use the serialize option, it will create a POST query string like this: item[]=1&item[]=2 etc.

For example, in PHP:

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