Jquery Datatable drag and drop with row grouping

Question

I have used jquery dataTable and I have a requirement as below:

• If I drag the row ( - BRAND NAME:.... ) then it should drag between rows only and with all it's content.
• If I drag content of the row group then it should not overlap with other group.

Here is what I have done so far:

HTML:

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>type</th>
            <th>age</th>

        </tr>
    </thead>

    <tbody id="sortable">
<tr id="1">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id="2">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id="3">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr>        
<tr id="4">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr> 
    </tbody>
</table>

Jquery:

var table = $('#example').DataTable({
"searching": false,
            "paging": false,
            "info": false,
            "order": [[0, "asc"]],
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
                api.column(1, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="groups"><td class="tdgroups" colspan="22" style="Cursor:hand !important;BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + '- BRAND NAME: ' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
});

$("#sortable").sortable();
$("#sortable").disableSelection();

Link of Jsfiddle: DEMO

Answer 1

You can change your markup a little bit. Place each row group in separate <tbody> and make those sortable.

 var table = $('#example').DataTable({ "searching": false, "bSort": false, "paging": false, "info": false, }); $("#example>tbody").sortable({ items: "tr:not(.group-row)" }); $("#example").sortable({ items: "tbody" }).disableSelection(); 

 table.dataTable tbody tr.group-row { cursor: move; background-color: rgb(237, 208, 0); font-weight: 700; color: #006232; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <table id="example"> <thead> <tr> <th>Name</th> <th>type</th> <th>age</th> </tr> </thead> <tbody> <tr class="group-row"> <td>- BRAND NAME: Type 1</td> <td></td> <td></td> </tr> <tr id="1"> <td>NameA</td> <td>Type1</td> <td>Age</td> </tr> <tr id="2"> <td>NameB</td> <td>Type1</td> <td>Age</td> </tr> </tbody> <tbody> <tr class="group-row"> <td>- BRAND NAME: Type 2</td> <td></td> <td></td> </tr> <tr id="3"> <td>NameD</td> <td>Type2</td> <td>Age</td> </tr> <tr id="4"> <td>NameC</td> <td>Type2</td> <td>Age</td> </tr> </tbody> </table> 

Answer 2

Inspired by the answer by Munim Munna, I created a version that automatically modifies the table-structure by utilizing only javascript/jquery.

 let table = $('#example').DataTable({ "searching": false, "sort": false, "order": [[1, "asc"], [0, "asc"]], "paging": false, "info": false, drawCallback: function (settings) { let api = this.api(); let rows = api.rows({ page: 'current' }).nodes(); if ($(rows).parent().is("tbody")) { $(rows).unwrap(); } let last = null; let group_index = -1; api.column(1, { page: 'current' }).data().each(function (group, i) { if (last !== group) { // make previous group sortable if (last) { $("#example > tbody[data-group='" + group_index + "']").sortable({ items: "tr.group-row", containment: "#example > tbody[data-group='" + group_index + "']", opacity: 0.75 }); } group_index++; // add group-header before new group $(rows).eq(i).before( '<tbody data-group="' + group_index + '"><tr class="group-header"><td colspan="3">' + '- BRAND NAME: ' + group + '</td></tr></tbody>' ); last = group; } // modify row and append to tbody $(rows).eq(i).attr('data-group', group_index).addClass('group-row').appendTo("tbody[data-group='" + group_index + "']"); }); // make last group also sortable $("#example > tbody[data-group='" + group_index + "']").sortable({ items: "tr.group-row", containment: "#example > tbody[data-group='" + group_index + "']", opacity: 0.75 }); // make the tbody-elements sortable and disable selection in table $("#example").sortable({ items: "tbody", placeholder: "tbody-placeholder", forcePlaceholderSize: true, opacity: 0.75 }) .disableSelection(); } }); 

 table.dataTable tbody tr.group-header { cursor: move; background-color: rgb(237, 208, 0); font-weight: 700; color: #006232; } table.dataTable .tbody-placeholder { display: table-row; height: 50px; } 

 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> <table id="example"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Age</th> </tr> </thead> <tbody> <tr id="1"> <td>Name1</td> <td>Type1</td> <td>13</td> </tr> <tr id="2"> <td>Name2</td> <td>Type1</td> <td>42</td> </tr> <tr id="3"> <td>Name3</td> <td>Type2</td> <td>33</td> </tr> <tr id="4"> <td>Name4</td> <td>Type2</td> <td>17</td> </tr> </tbody> </table>