重新排序数据表将混合值

Question

我在工作DataTables，想实现拖放重新排序。我的代码：

HTML

<div class="table-responsive">
                      <table id="tablePositionen" class="table table-lg hover table-striped">
                          <thead>
                          <tr>
                              <th>Bezeichnung</th>
                              <th>Menge</th>
                              <th>Preis</th>
                              <th>Gesamt</th>
                              <th class="text-right"></th>
                          </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td>Article 1</td>
                                  <td>1,00</td>
                                  <td>10,00 €</td>
                                  <td>10,00 €</td>
                                  <td class="text-right">
                                      <div class="dropdown">
                                          <a href="#" class="btn btn-outline-light btn-sm btn-floating"
                                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                          </a>
                                          <div class="dropdown-menu dropdown-menu-right">
                                              <button class="dropdown-item" type="button">Bearbeiten</button>
                                              <button class="dropdown-item" type="button">Löschen</button>
                                          </div>
                                       </div>
                                  </td>
                              </tr>
                              <tr>
                                    <td>Article 2</td>
                                    <td>2,00</td>
                                    <td>56,00 €</td>
                                    <td>56,00 €</td>
                                    <td class="text-right">
                                        <div class="dropdown">
                                            <a href="#" class="btn btn-outline-light btn-sm btn-floating"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                              <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <button class="dropdown-item" type="button">Bearbeiten</button>
                                                <button class="dropdown-item" type="button">Löschen</button>
                                            </div>
                                         </div>
                                    </td>
                                </tr>
                          </tbody>
                      </table>
                  </div>

JS

var tablePositionen = $('#tablePositionen').DataTable({
        columnDefs: [
            { targets: [0], orderable: true, className: 'reorder' },
            { targets: '_all', orderable: false }
        ],
        "ordering": false,
        "paging": false,
        rowReorder: true,
        "lengthMenu": [[10], [10]],
        "language": {
            "url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
        }
    });

我的 Table 看起来像这样：

如果现在将第二行拖放到第一行上方，其他列的值将不正确：

我哪里错了？？

Answer 1

我为解决您的问题所做的更改：

(1) 在 table.

中添加了一个“序列”列作为第一列

(2) 更改了 DataTable 初始化选项以隐藏该序列列，并且允许用户从行中的任何位置执行拖动（与仅第一列的默认位置相反）。

(3) 删除了剩余的不需要的选项（尽管您可以重新添加任何您需要的选项，例如 "paging": false）。请注意，某些选项相互矛盾，例如 paging 和 lengthMenu.

(4) 对语言 URL 进行了细微更改（正斜杠太多）。这与 drag/drop 问题无关。

结果如下：

$(document).ready(function() {

var tablePositionen = $('#tablePositionen').DataTable({
        rowReorder: {
            selector: 'tr'
        },
        columnDefs: [
            { targets: 0, visible: false }
        ],
        "language": {
            "url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
        }
    });
} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- row reorder -->
  <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/> 

</head>

<body>

<div style="margin: 20px;">

<table id="tablePositionen" class="table table-lg hover table-striped">
  <thead>
  <tr>
      <th>Seq.</th>
      <th>Bezeichnung</th>
      <th>Menge</th>
      <th>Preis</th>
      <th>Gesamt</th>
      <th class="text-right"></th>
  </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>Article 1</td>
          <td>1,00</td>
          <td>10,00 €</td>
          <td>10,00 €</td>
          <td class="text-right">
              <div class="dropdown">
                  <a href="#" class="btn btn-outline-light btn-sm btn-floating"
                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right">
                      <button class="dropdown-item" type="button">Bearbeiten</button>
                      <button class="dropdown-item" type="button">Löschen</button>
                  </div>
               </div>
          </td>
      </tr>
      <tr>
            <td>2</td>
            <td>Article 2</td>
            <td>2,00</td>
            <td>56,00 €</td>
            <td>56,00 €</td>
            <td class="text-right">
                <div class="dropdown">
                    <a href="#" class="btn btn-outline-light btn-sm btn-floating"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <button class="dropdown-item" type="button">Bearbeiten</button>
                        <button class="dropdown-item" type="button">Löschen</button>
                    </div>
                 </div>
            </td>
        </tr>
  </tbody>
</table>

</div>



</body>
</html>

补充一下：所有行重新排序 examples 使用初始列来支持重新排序（我添加的 Seq. 列）。这是必需的——尽管我不记得在文档中明确提到过这一点。对于您的情况，我选择隐藏这个初始（但必需）列，并使用“整行”拖动选项。

重新排序数据表将混合值

reordering datable will mix values

javascript

datatables