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>