Ausgabe
Ich verwende: jquery.dataTables.js
von: https://datatables.net
Ich möchte 2 Dinge tun:
- Wie kann ich meine Zeilen ziehen und ablegen? irgendwelche Ideen? oder Zeilenumordnung
- Im Moment folgen die Reihen nicht der Bestellnummer wie: 1,2,3,4,5, wie kann ich die Reihen dazu bringen, den Nummernreihenfolgen zu folgen?
Ich habe dieses Beispiel gefunden: https://jsfiddle.net/gyrocode/0308ctqp/ , aber ich konnte meinen Code nicht bearbeiten.
Bearbeiten:
jsfiddle- Antwort läuft hier :
siehe Antwort unten
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>
Abfrage:
$(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();
}
});
});
das ist meine jsfiddle
Danke
Lösung
Für den Neuordnungsimport benötigte lib : (jquery-ui.js – jquery.dataTables.rowReordering.js )
Und für die Neuordnung rowReordering
von order wird bei der Verwendung standardmäßig die erste Zeile verwendet, um table zu bestellen, also machen Sie das Bestellfeld als erstes in der Spalte data , ansonsten denke ich (es ist möglich, dataTable.editor.js zu verwenden)
Unten ein funktionierendes 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>
Beantwortet von – Bourbia Brahim
Antwort geprüft von – David Marino (FixError Volunteer)