Question 190334 in Twitter Bootstrap Question posted in

Twitter bootstrap – how to make datatable rows draggable and maintain the sequence of the column number

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 class="__Sequence">
  <label>Arrangement Choices</label>
  <input type="text" class="__choicesAddARSeq" id="sequenceChoices"/>
  <button id="addSequenceBtn">ADD</button>
</div>

<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
  <thead>
    <tr>
      <th>No.</th>
      <th>Choices</th>
      <th>Action</th>
    </tr>
  </thead>
</table>

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

2

Answers


  1. 0

    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 class="table text-center table-bordered table-striped dataTable dtr-inline" 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 class="table text-center table-bordered table-striped dataTable dtr-inline" 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.

    Login or Signup to reply.
  2. 0

    I am facing an issue with row dragging, in my table i set height to table, so unable to scroll while drag the rows. please find this code. https://onecompiler.com/html/3zc56e75c

    How to scroll to down with table height while drag the rows

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search