javascript - Jquery Datatable 拖放行，从 json 数据重新排序行

Question

我正在使用:jquery.dataTables.js 来自:https://datatables.net

我想做两件事:

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>

j查询:

$(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

对于重新排序导入所需的库:(jquery-ui.js - jquery.dataTables.rowReordering.js)

对于重新排序，当默认使用 rowReordering 时，第一行用于排序表，因此将排序字段作为列数据中的第一行，否则我认为(可以使用 dataTable.编辑器.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>