how to make datatable rows draggable and maintain the sequence of the column number-CodePudding

How to make datatable rows draggable and maintain the sequence of the column number? I am trying to create a questionnaire which theme is Arrangement Choices, i am appending the choices by using addRow. I want to add drag events onto rows and maintain the sequence.. but i don't know how to do it..

Here's my code:

$(document).ready(function () {

  var table = $('#ADDchoicesARTableListSequence').DataTable();

  const btnAdd = document.querySelector("#addSequenceBtn");
  const inputChoices = document.querySelector("#sequenceChoices");
  var count = 1;
  btnAdd.addEventListener("click", function () {
    table.row.add([count,inputChoices.value.trim(),'DELETE']).draw();
    count  = 1;
    inputChoices.value = '';
  })

});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>



<div >
  <label>Arrangement Choices</label>
  <input type="text"  id="sequenceChoices"/>
  <button id="addSequenceBtn">ADD</button>
</div>

<table  id="ADDchoicesARTableListSequence">
  <thead>
    <tr>
      <th>No.</th>
      <th>Choices</th>
      <th>Action</th>
    </tr>
  </thead>
</table>

<button id="addSequenceBtn">Create Question</button>

CodePudding user response：

DataTables has various extensions you can use for advanced features - and one of those is the Row Reorder extension - so we can use that.

I am not sure what you mean by "maintain the sequence of the column number", so here are two slightly different approaches. Maybe one of them is what you want.

Approach 1 - the first column always shows 1 followed by 2 and so on, regardless of how you re-arrange your rows:

$(document).ready(function() {

  var table = $('#ADDchoicesARTableListSequence').DataTable({
    rowReorder: {
      selector: 'tr'
    }
  });

  const tbody = document.getElementById("choicesListTbodyADD");
  const btnAdd = document.querySelector("button");
  const inputChoices = document.querySelector("input");
  var count = 1;
  btnAdd.addEventListener("click", function() {
    table.row.add([count, inputChoices.value.trim(), 'DELETE']).draw();
    count  = 1;
    inputChoices.value = '';
  })

});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>

</head>

<body>

  <div style="margin: 20px;">
    <input type="text" id="choices" />
    <button id="appendChoices">Add Choices</button>
    <br><br>

    <table  id="ADDchoicesARTableListSequence">
      <thead>
        <tr>
          <th>No.</th>
          <th>Choices</th>
          <th>Action</th>
        </tr>
      </thead>
    </table>

  </div>

</body>

</html>

In the above demo, I added two new libraries for the JavaScript and CSS needed for dragging.

I also added rowReorder: { selector: 'tr' } to the DataTable which tells the plug-in that we can drag the row by selecting any part of the row (the default behavior is to drag only by selecting the first column).

Approach 2 - all the data in the row moves together.

In this approach, the values in the first column move along with the row they belong to:

$(document).ready(function() {

  var table = $('#ADDchoicesARTableListSequence').DataTable({
    rowReorder: {
      selector: 'tr'
    },
    columnDefs: [{
      targets: 0,
      visible: false
    }]
  });

  const tbody = document.getElementById("choicesListTbodyADD");
  const btnAdd = document.querySelector("button");
  const inputChoices = document.querySelector("input");
  var count = 1;
  btnAdd.addEventListener("click", function() {
    table.row.add([count, count, inputChoices.value.trim(), 'DELETE']).draw();
    count  = 1;
    inputChoices.value = '';
  })

});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>

</head>

<body>

  <div style="margin: 20px;">
    <input type="text" id="choices" />
    <button id="appendChoices">Add Choices</button>
    <br><br>

    <table  id="ADDchoicesARTableListSequence">
      <thead>
        <tr>
          <th>Idx.</th>
          <th>No.</th>
          <th>Choices</th>
          <th>Action</th>
        </tr>
      </thead>
    </table>

  </div>


</body>

</html>

In this approach, I added an extra column to your table and I hid the first column.

You can try each approach and see the differences for yourself.