jQuery Datatable拖放行，根據json數據對行進行重新排序

Question

我正在使用： https : jquery.dataTables.js

我想做兩件事：

1. 如何使行拖放？ 有任何想法嗎？ 或行重新排序
2. 現在行不遵循訂單號，例如：1,2,3,4,5，我如何使行遵循數字訂單？

我找到了以下示例： https : //jsfiddle.net/gyrocode/0308ctqp/，但是我無法在我的代碼上工作。

編輯： jsfiddle答案在這里運行 ：

看下面的答案

HTML：

<div class=" dashboard">
  <div class="col-md-8 no-padding">
    <div class="form-group col-md-4 no-padding">
      <select class="form-control" id="sel1">
        <option value="Filter by">Filter by country </option>
        <option value="All">All</option>
        <option value="China">China</option>
        <option value="EUA">EUA</option>
        <option value="Spain">Spain</option>
      </select>
    </div>
  </div>

  <br>
  <br>
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>First name</th>
        <th>Place</th>
         <th>Order</th>
      </tr>
    </thead>
  </table>

jQuery的：

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    columns: [{
      data: 'name'
    }, {
      data: 'name'
    },{
      data: 'order'
    }]
  });

  $('#sel1').change(function() {
    if (this.value === "All") {
      table
        .columns(1)
        .search('')
        .draw();
    } else {
      table
        .columns(1)
        .search(this.value)
        .draw();
    }
  });
});

這是我的jsfiddle

謝謝

Answer 1

對於重新導入需要的lib：（jquery-ui.js-jquery.dataTables.rowReordering.js）

對於重新排序訂單，默認情況下使用rowReordering時，第一行用於對表進行排序，因此使order字段成為列數據中的第一字段，否則我認為（可以使用dataTable.editor.js）

波紋管工作的聲音

 $(document).ready(function() { var dt = $('#example').dataTable(); dt.fnDestroy(); }); $(document).ready(function() { var url = 'https://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; var table = $('#example').DataTable({ ajax: url, createdRow: function(row, data, dataIndex){ $(row).attr('id', 'row-' + dataIndex); }, rowReorder: { dataSrc: 'order', }, columns: [ { data: 'order' },{ data: 'name' },{ data: 'place' }] }); table.rowReordering(); $('#sel1').change(function() { if (this.value === "All") { table .columns(1) .search('') .draw(); } else { table .columns(1) .search(this.value) .draw(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> <link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet"/> <script src="//mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"></script> <div class=" dashboard"> <div class="col-md-8 no-padding"> <div class="form-group col-md-4 no-padding"> <select class="form-control" id="sel1"> <option value="Filter by">Filter by country </option> <option value="All">All</option> <option value="China">China</option> <option value="EUA">EUA</option> <option value="Spain">Spain</option> </select> </div> </div> <br> <br> <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Order</th> <th>First name</th> <th>Place</th> </tr> </thead> </table>