jQuery的数据表中拖放行，行

Question

我使用JSON从数据重新排序：从jquery.dataTables.js：https://datatables.net

我想要做的两件事情：

1 - 我怎样才能使我行拖放？有任何想法吗？或行重新排序

2-现在行不是跟随订单号码，如：1,2,3,4,5，我如何使行遵循数字订单？

我发现这个示例：https://jsfiddle.net/gyrocode/0308ctqp/但我无法在我的代码上工作。

编辑： 的jsfiddle答案运行这里：http://jsfiddle.net/f7debwj2/9/

请参阅回答波纹管

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 http://jsfiddle.net/f7debwj2/8/

感谢

Answer 1

对于需要reordring导入库（jQuery的ui.js - jquery.dataTables.rowReordering.js）

而重新排序顺序，使用rowReordering默认情况下，当第一行用于顺序表，所以下订单字段作为第一列数据，否则我认为（这是可能的使用dataTable.editor.js）

娄工作sniipet

$(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' 
 
    }] 
 
    }); 
 
\t 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>