Jquery Datatable перетаскивание строк, строка переназначения из данных JSon

Question

Я использую: jquery.dataTables.js от: https://datatables.net

Я хочу сделать 2 вещи:

1- Как я могу сделать мои строки перетащить? есть идеи? или переупорядочение строк

2- прямо сейчас строки не соответствуют порядковому номеру, например: 1,2,3,4,5, как я могу заставить строки следовать порядковым номерам?

Я нашел этот образец: https://jsfiddle.net/gyrocode/0308ctqp/, но я не смог обработать свой код.

Edit: 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 импорта Lib: (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>