[英]Jquery Datatable drag and drop rows , Row reordering from json data
I am using: jquery.dataTables.js
from: https://datatables.net 我正在使用: https :
jquery.dataTables.js
I want to do 2 things: 我想做两件事:
I found this sample: https://jsfiddle.net/gyrocode/0308ctqp/ but I could not make work on my code. 我找到了以下示例: https : //jsfiddle.net/gyrocode/0308ctqp/,但是我无法在我的代码上工作。
Edit: jsfiddle answer running here : 编辑: jsfiddle答案在这里运行 :
see answer bellow 看下面的答案
html: 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: 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();
}
});
});
this is my jsfiddle 这是我的jsfiddle
thanks 谢谢
For the reordring import required lib : (jquery-ui.js - jquery.dataTables.rowReordering.js ) 对于重新导入需要的lib:(jquery-ui.js-jquery.dataTables.rowReordering.js)
And for reordering order , when using rowReordering
by default the first row is used to order table , so make the order field as first in column data , otherwise I think (It's possible to use dataTable.editor.js ) 对于重新排序订单,默认情况下使用
rowReordering
时,第一行用于对表进行排序,因此使order字段成为列数据中的第一字段,否则我认为(可以使用dataTable.editor.js)
Bellow a working 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' }] }); 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.