Search code examples
jqueryangulardatatableangular-datatables

realtime: false not working in jQuery DataTables colReorder

I'm using jQuery DataTables with the colReorder extension, but setting realtime: false doesn't seem to work. I expect the column reordering to take effect only after I drop the column, but it updates in real time as I drag the column.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTables Example</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/colreorder/2.0.3/css/colReorder.dataTables.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/colreorder/2.0.3/js/dataTables.colReorder.js"></script>
</head>
<body>
    <table id="myTable" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Phone</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <?php for($i=0; $i<=50; $i++) { ?>
            <tr>
                <td>Jon</td>
                <td>18</td>
                <td>1234567890</td>
                <td>USA</td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

    <script>
       $(document).ready(function() {
           let table = new DataTable('#myTable', {
               responsive: true,
               colReorder: {
                   realtime: false
               }
           });
       });
    </script>
</body>
</html>

Issues:

Setting realtime: false in colReorder options doesn't work. Columns are being reordered in real time as I drag them.

Expected Behavior:

Column reorder should take effect only after the column is dropped.

Questions:

Is there a known issue with the real-time option in the current versions of DataTables and colReorder?

Are there any workarounds or additional configurations needed to achieve the desired behavior?

Additional Information:

DataTables version: 2.0.8

colReorder version: 2.0.3

Responsive extension version: 3.0.2

jQuery version: 3.7.1

Any help or suggestions would be greatly appreciated.

Solution

  • As per the documentation ColReorder 2.0.0

    Removed

    The colReorder.realtime option is no longer relevant and has now been removed.

    Also based on all available options for coReorder colReorder options

    You can directly go for either colReorder: false, or colReorder: {enable: false} to achieve your goal.

    Working snippet:

    $(document).ready(function() {
  let table = new DataTable('#myTable', {
    responsive: true,
    colReorder: {
        enable: false
    }
  });
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DataTables Example</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/colreorder/2.0.3/css/colReorder.dataTables.css" rel="stylesheet">
  <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
  <script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
  <script src="https://cdn.datatables.net/colreorder/2.0.3/js/dataTables.colReorder.js"></script>
</head>

<body>
  <table id="myTable" class="display nowrap" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Phone</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jon-1</td>
        <td>18-1</td>
        <td>1234567890-1</td>
        <td>USA-1</td>
      </tr>
      <tr>
        <td>Jon-2</td>
        <td>18-2</td>
        <td>1234567890-2</td>
        <td>USA-2</td>
      </tr>
      <tr>
        <td>Jon-3</td>
        <td>18-3</td>
        <td>1234567890-3</td>
        <td>USA-3</td>
      </tr>
      <tr>
        <td>Jon-4</td>
        <td>18-4</td>
        <td>1234567890-4</td>
        <td>USA-4</td>
      </tr>
      <tr>
        <td>Jon-5</td>
        <td>18-5</td>
        <td>1234567890-5</td>
        <td>USA-5</td>
      </tr>
      <tr>
        <td>Jon-6</td>
        <td>18-6</td>
        <td>1234567890-6</td>
        <td>USA-6</td>
      </tr>
      <tr>
        <td>Jon-7</td>
        <td>18-7</td>
        <td>1234567890-7</td>
        <td>USA-7</td>
      </tr>
      <tr>
        <td>Jon-8</td>
        <td>18-8</td>
        <td>1234567890-8</td>
        <td>USA-8</td>
      </tr>
      <tr>
        <td>Jon-9</td>
        <td>18-9</td>
        <td>1234567890-9</td>
        <td>USA-9</td>
      </tr>
      <tr>
        <td>Jon-10</td>
        <td>18-10</td>
        <td>1234567890-10</td>
        <td>USA-10</td>
      </tr>
    </tbody>
  </table>
</body>

</html>