我正在使用 jQuery DataTables 和 colReorder 扩展,但设置 realtime: 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>
<?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>
问题:
在 colReorder 选项中设置 realtime: false 不起作用。 当我拖动列时,它们会被实时重新排序。 预期行为:
列重新排序仅在删除列后才会生效。 问题:
当前版本的 DataTables 和 colReorder 中的实时选项是否存在已知问题? 是否需要任何解决方法或额外的配置来实现所需的行为? 附加信息:
数据表版本:2.0.8 colReorder版本:2.0.3 响应式扩展版本:3.0.2 jQuery 版本:3.7.1
任何帮助或建议将不胜感激。
根据文档colReorder
以及
coReorder
colReorder 选项的可用选项
我无法使用
realtime
属性查看其实现。
你可以直接去
colReorder: false
来实现你的目标。
工作片段:
$(document).ready(function() {
let table = new DataTable('#myTable', {
responsive: true,
colReorder: 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>
<tr>
<td>Jon-11</td>
<td>18-11</td>
<td>1234567890-11</td>
<td>USA-11</td>
</tr>
<tr>
<td>Jon-12</td>
<td>18-12</td>
<td>1234567890-12</td>
<td>USA-12</td>
</tr>
<tr>
<td>Jon-13</td>
<td>18-13</td>
<td>1234567890-13</td>
<td>USA-13</td>
</tr>
<tr>
<td>Jon-14</td>
<td>18-14</td>
<td>1234567890-14</td>
<td>USA-14</td>
</tr>
<tr>
<td>Jon-15</td>
<td>18-15</td>
<td>1234567890-15</td>
<td>USA-15</td>
</tr>
<tr>
<td>Jon-16</td>
<td>18-16</td>
<td>1234567890-16</td>
<td>USA-16</td>
</tr>
<tr>
<td>Jon-17</td>
<td>18-17</td>
<td>1234567890-17</td>
<td>USA-17</td>
</tr>
<tr>
<td>Jon-18</td>
<td>18-18</td>
<td>1234567890-18</td>
<td>USA-18</td>
</tr>
<tr>
<td>Jon-19</td>
<td>18-19</td>
<td>1234567890-19</td>
<td>USA-19</td>
</tr>
<tr>
<td>Jon-20</td>
<td>18-20</td>
<td>1234567890-20</td>
<td>USA-20</td>
</tr>
<tr>
<td>Jon-21</td>
<td>18-21</td>
<td>1234567890-21</td>
<td>USA-21</td>
</tr>
<tr>
<td>Jon-22</td>
<td>18-22</td>
<td>1234567890-22</td>
<td>USA-22</td>
</tr>
<tr>
<td>Jon-23</td>
<td>18-23</td>
<td>1234567890-23</td>
<td>USA-23</td>
</tr>
<tr>
<td>Jon-24</td>
<td>18-24</td>
<td>1234567890-24</td>
<td>USA-24</td>
</tr>
<tr>
<td>Jon-25</td>
<td>18-25</td>
<td>1234567890-25</td>
<td>USA-25</td>
</tr>
<tr>
<td>Jon-26</td>
<td>18-26</td>
<td>1234567890-26</td>
<td>USA-26</td>
</tr>
<tr>
<td>Jon-27</td>
<td>18-27</td>
<td>1234567890-27</td>
<td>USA-27</td>
</tr>
<tr>
<td>Jon-28</td>
<td>18-28</td>
<td>1234567890-28</td>
<td>USA-28</td>
</tr>
<tr>
<td>Jon-29</td>
<td>18-29</td>
<td>1234567890-29</td>
<td>USA-29</td>
</tr>
<tr>
<td>Jon-30</td>
<td>18-30</td>
<td>1234567890-30</td>
<td>USA-30</td>
</tr>
<tr>
<td>Jon-31</td>
<td>18-31</td>
<td>1234567890-31</td>
<td>USA-31</td>
</tr>
<tr>
<td>Jon-32</td>
<td>18-32</td>
<td>1234567890-32</td>
<td>USA-32</td>
</tr>
<tr>
<td>Jon-33</td>
<td>18-33</td>
<td>1234567890-33</td>
<td>USA-33</td>
</tr>
<tr>
<td>Jon-34</td>
<td>18-34</td>
<td>1234567890-34</td>
<td>USA-34</td>
</tr>
<tr>
<td>Jon-35</td>
<td>18-35</td>
<td>1234567890-35</td>
<td>USA-35</td>
</tr>
<tr>
<td>Jon-36</td>
<td>18-36</td>
<td>1234567890-36</td>
<td>USA-36</td>
</tr>
<tr>
<td>Jon-37</td>
<td>18-37</td>
<td>1234567890-37</td>
<td>USA-37</td>
</tr>
<tr>
<td>Jon-38</td>
<td>18-38</td>
<td>1234567890-38</td>
<td>USA-38</td>
</tr>
<tr>
<td>Jon-39</td>
<td>18-39</td>
<td>1234567890-39</td>
<td>USA-39</td>
</tr>
<tr>
<td>Jon-40</td>
<td>18-40</td>
<td>1234567890-40</td>
<td>USA-40</td>
</tr>
<tr>
<td>Jon-41</td>
<td>18-41</td>
<td>1234567890-41</td>
<td>USA-41</td>
</tr>
<tr>
<td>Jon-42</td>
<td>18-42</td>
<td>1234567890-42</td>
<td>USA-42</td>
</tr>
<tr>
<td>Jon-43</td>
<td>18-43</td>
<td>1234567890-43</td>
<td>USA-43</td>
</tr>
<tr>
<td>Jon-44</td>
<td>18-44</td>
<td>1234567890-44</td>
<td>USA-44</td>
</tr>
<tr>
<td>Jon-45</td>
<td>18-45</td>
<td>1234567890-45</td>
<td>USA-45</td>
</tr>
<tr>
<td>Jon-46</td>
<td>18-46</td>
<td>1234567890-46</td>
<td>USA-46</td>
</tr>
<tr>
<td>Jon-47</td>
<td>18-47</td>
<td>1234567890-47</td>
<td>USA-47</td>
</tr>
<tr>
<td>Jon-48</td>
<td>18-48</td>
<td>1234567890-48</td>
<td>USA-48</td>
</tr>
<tr>
<td>Jon-49</td>
<td>18-49</td>
<td>1234567890-49</td>
<td>USA-49</td>
</tr>
<tr>
<td>Jon-50</td>
<td>18-50</td>
<td>1234567890-50</td>
<td>USA-50</td>
</tr>
</tbody>
</table>
</body>
</html>