Thiết kế website giá rẻ

Question

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.

<head>

<title>DataTables Example</title>

</head>

<body>

<thead>

<tr>

<th>Phone</th>

<th>Address</th>

<th>Phone</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<?php for($i=0; $i<=50; $i++) { ?>

<tr>

<td>Mohali</td>

</tr>

<?php } ?>

</tbody>

</table>

$(document).ready(function() {

let table = new DataTable('#myTable', {

responsive: true,

colReorder: {

realtime: false

}

});

</script>

</body>

</html>

</code>

<code><!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> <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>9696363585</td> <td>Mohali</td> </tr> <?php } ?> </tbody> </table> <script> $(document).ready(function() { let table = new DataTable('#myTable', { responsive: true, colReorder: { realtime: false } }); }); </script> </body> </html> </code>

<!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>
                <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>9696363585</td>
                <td>Mohali</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 realtime 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.

Thiết kế website giá rẻ

Danh mục

realtime: false not working in jQuery DataTables colReorder