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

You should take a look at the `helper`, `start`, `update` and `stop` functions/callbacks of the jQuery-sortable plugin. (See: [jQuery Sortable - drag and drop multiple items](https://stackoverflow.com/a/24467682/1970822) — Jan, Jun 15 '19 at 14:25
But my issue is, I have a table structure and I think it is not possible with that. — Vishal Suthar, Jun 17 '19 at 02:10

score 4 · Accepted Answer · answered Jun 17 '19 at 14:28

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>

score 2 · Answer 2 · answered Jun 18 '19 at 18:33

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>

Will it also work if I dynamically add rows to the table ? Because I tried that in my previous version and it does not reload the datatable. — Vishal Suthar, Jun 19 '19 at 04:44
I have implemented it with different tbody structure for each group.. BTW nice implementation.. I will definitely try this in future. — Vishal Suthar, Jun 20 '19 at 17:11

Jquery Datatable drag and drop with row grouping

2 Answers2