实时: false 在 jQuery DataTables colReorder 中不起作用

问题描述 投票:0回答:1

我正在使用 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

任何帮助或建议将不胜感激。

jquery angular datatable angular-datatables
1个回答
0
投票

根据文档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>

© www.soinside.com 2019 - 2024. All rights reserved.