Jquery Datatable drag and drop rows , Row reordering from json data - javascript

I am using: jquery.dataTables.js from: https://datatables.net
I want to do 2 things:
How can I make my rows be drag and drop? any ideas? or Row reordering
right now the rows is not following the order number like: 1,2,3,4,5, how can i make the rows follow the number orders?
I found this sample: https://jsfiddle.net/gyrocode/0308ctqp/ but I could not make work on my code.
Edit:
jsfiddle answer running here:
see answer bellow
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();
}
});
});
this is my jsfiddle
thanks

For the reordring import required 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 )
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>

Related

How to append a select dropdown to a HTML DataTable?

I have created a website mainly using HTML, CSS, PHP and MYSQL and I added a select dropdown with roles for to users to choose from. I need it to be on every row of users in the table. I have successfully gotten tabledit working on the site, but I am not sure how to append this dropdown to the Roles column.
This is how the HTML is set up
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!--SELECT DROPDOWN LIST-->
<select id="test">
<?php
for ($a = 1; $a <= $count ; $a++){
?>
<option value="1"><?php echo($roles[($a-1)]);?></option>
<?php
}
?>
</select>
<!--//////////////-->
</body>
<script>
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
// [5, 'role_id']
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
You can use the render option on the column definitions to render what ever you want. In the render function you have access to the row and the entire data object.
$(function() {
let $tbl = $('#sample_data'), $select = $('#select-box')
let data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
$tbl.DataTable({
data: data,
columns: [
null, null, null, null, {
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
{
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
]
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div style="display:none;" id="select-box">
<select>
<option>Role 1</option>
</select>
</div>
</body>
its not a proper solution but it will resolve your issue. First select your roles html
var emelnt = $('#test');
//now append to table td
$('table tbody td:nth-child(6)').html(emelnt);
//you can also use a function to first get role id from table each row then create your select here in js and the append it to html so then your roles drop down will be selected.
I'm not sure if you are using DataTable or Tabledit, you seem to be mixing them for some reason. I'm not sure if this is a good idea to start with. I suggest picking one over the other. This answer focuses on Tabledit.
Since the table is essentially created and managed by Tabledit you should provide the data there. You currently already use a select for admin approval:
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
Your role select can be created in a similar manner. Since the structure of $roles is not shared I will assume that it is an array with string values. First create a variable roles within your <script> tags.
const roles = <?php echo json_encode($roles); ?>;
Then add the column to the columns.editable setting:
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}'],
[5, 'role', JSON.stringify(roles)]
You might have to convert the structure of $roles to create the correct JSON output. Here are some example results:
Example #1
// assumed <?php echo json_encode($roles); ?> output
const roles = ["role A", "role B"];
Creates:
<option value="0">role A</option>
<option value="1">role B</option>
Example #2
// assumed <?php echo json_encode($roles); ?> output
const roles = {"role_a": "role A", "role_b": "role B"};
Creates:
<option value="role_a">role A</option>
<option value="role_b">role B</option>
Take a look at how to add a row in datatables.net...
var t = $('#example').DataTable();
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw( false );
So, in your case, within onSuccess:function(data, textStatus, jqXHR), we should just be able to change this, $('#sample_data').DataTable().ajax.reload();, to....
var t = $('#sample_data').DataTable();
t.row.add([
$('#test').html()
]).draw(false);
t.ajax.reload();
This is basically doing what your code was doing before, but now you're also calling the .row.add() on the DataTable().

How to set value in session storage with vueJS by ajax dropdown select to other changes value

when i select dropdown option and change the other value as product code. i fetch the problem that when click add button to set this value in session storage with vuejs it didn't work, but when i fill up the field by type this time value set in session storage.
i tried with ajax to change the value by selecting product code and set to it value in session storage with vuejs.
This is front page code:
<div id="app">
<table class="table table-sm">
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Action</th>
</tr>
<tr>
<td>
<select v-model="newCat.mtype" id="" class="form-control-sm form-control code">
<?php
$db = new mysqli("localhost","root","","test");
$select = $db->query("select code from product");
while (list($code) = $select->fetch_row()) {
echo "<option value='$code'>$code</option>";
}
?>
</select>
</td>
<td>
<input type="text" v-model="newCat.name" class="form-control-sm form-control name"/>
</td>
<td>
<input type="text" v-model="newCat.rules" class="form-control-sm form-control price"/>
</td>
<td>
<button class="btn btn-sm" #click="addCat">+</button>
</td>
</tr>
</table>
<br>
<div class="table-responsive">
<table class="table table-sm">
<tr>
<th>Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th class="text-center">Action</th>
</tr>
<tr v-for="(cat, n) in cats">
<td>{{cat.mtype}}</td>
<td>{{cat.name}}</td>
<td>{{cat.rules}}</td>
<td class="text-center"><button #click="removeCat(n)" class="btn btn-sm btn-danger">Remove</button></td>
</tr>
</table>
</div>
</div>
<script>
$(function(){
$(".code").change(function(){
var code = $(this).val();
$.ajax({
url : 'select.php',
method : 'POST',
dataType : 'JSON',
data : {code:code},
success : function(echo){
$('.name').val(echo.name);
$('.price').val(echo.price);
}
});
});
})
This is My vue Code:
const app = new Vue({
el: '#app',
data: {
cats: [],
newCat: {mtype:'',name:'',rules:''}
},
mounted() {
if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
}catch(e){
localStorage.removeItem('cats');
}
}
},
methods: {
addCat() {
// ensure they actually typed something
if (!this.newCat) {
return;
}
this.cats.push(this.newCat);
this.newCat = {mtype:'',name:'',rules:''};
this.saveCats();
},
removeCat(x) {
this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
const parsed = JSON.stringify(this.cats);
localStorage.setItem('cats', parsed);
}
}
})
Here is Screenshot
When I Select Drop down Option
When I Select Drop down Option
When Click Add Button
But When I select Drop Down and manually type other field
Then the result

DataTables with (filter by) from json data

I am trying make my filter works with json data from the server, someone could help me to do this?
I need filter by places: All, EUA,China, Spain
I am using: jquery.dataTables.js from: https://datatables.net
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="First name">China</option>
<option value="Last name">EUA</option>
<option value="Last name">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>
</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/crcCiZXZfm?indent=2';
var table = $('#example').DataTable({
ajax: url,
columns: [
{ data: 'name' },
{ data: 'place' }
]
});
});
jsfiddle:
http://jsfiddle.net/ntcwust8/120/
http://jsfiddle.net/f7debwj2/
Added the following code to your document.ready():
$('#sel1').change(function() {
if (this.value === "All") {
table
.columns(1)
.search('')
.draw();
}
else {
table
.columns(1)
.search(this.value)
.draw();
}
});
So basically you tell your SELECT element to wait for its value to be changed. In order to show ALL, the .search() parameter is set to an empty string, which will return ALL. Otherwise the dropdown will trigger a table search on column(1) with the selected VALUE (not text!) of your SELECT and redraw your table.
Note: I also changed the value properties of your SELECT, since they were wrong in the beginning.
DataTables Documentation on column().search() can be found HERE.

find selected value of dropdown in every row of table

There are multiple rows in a table being created using ng-repeat. Each row has a dropdownlist. I want to get the selected value in a dropdown and attach that value with other corresponding values in the row in a string format using JavaScript or JQuery on click of Next button. eg:"one,B:two,B:three,A:four:C" (here in this example assuming B is selected for dropdown in first row,similar logic for other rows)
The below is the HTML snippet:
<div class="mainDiv" ng-controller="myController">
<div class="div1">
<table class="table myTable">
<thead>
<tr>
<th>
<center>serial</center>
</th>
<th>
<center>data</center>
</th>
<th>
<center>aplhabet</center>
</th>
</tr>
</thead>
<tbody class="myTableBody">
<tr ng-repeat="data in myData" id="{{$parent.$id+'-'+$index}}">
<td>{{$index + 1}}</td>
<td>{{data}}</td>
<td>
<select>
<option value="Select">-- Select --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div2">
<button type="button" class="btn btn-md btn-primary btnNext">Next</button>
</div>
</div>
and below is the angularJS part:
myApp.controller('myController', function ($scope) {
$scope.myData = ["one","two","three","four"];
});
Add an ng-model={ selectData[data] }
Then update the controller with the following
$scope.selectData = {}
getResults= function() {
var returnData = $scope.myData.map(function(data) {
return data + ',' + $scope.selectData[data];
});
return returnData.join(':');
};
Switch to an object.
$scope.myData = {
one: {
id: 'one',
value: null
},
two: {
id: 'two',
value: null
},
three: {
id: 'three',
value: null
},
four: {
id: 'four',
value: null
}
}
In your HTML, add an ng-model to your select
<select ng-model="data.value">
<!-- your options, because I'm lazy -->
</select>
You will get an object containing all you want. In my opinion, I find it easier to work with objects rather than arrays.

Use Tablesorter to filter by selected option's selects in a column

I use the plugin jQuery Tablesorter by Mottie for a long time and it's very useful but today I have a issue. I want to filter my table by the selected options of the selects in one of the columns. The sort works but not the filter.
This is the code HTML :
<table id="tableau-programmes" cellspacing="0" cellpadding="0" class="donnees tablesorter">
<thead>
<tr class="bg-vert-2">
<th>Programme</th><th>No</th><th>Département</th><th>CP</th><th>Ville</th><th>Agence</th><th>Association</th>
</tr>
</thead>
<tbody>
<tr id="18">
<td>Bornéo</td>
<td>44</td><td>Loire-Atlantique</td>
<td>44100</td><td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option>
</select>
</td>
<td><span class="c-vert">Oui</span></td>
</tr>
<tr id="17" class="bg-vert-4">
<td>Erdréa</td>
<td>44</td>
<td>Loire-Atlantique</td>
<td>44300</td>
<td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option></select></td>
<td><span class="c-vert">Oui</span></td>
</tr>
...
</tbody>
</table>
This is the code js :
$(function(){
var nom_prog_preselect = (id_prog_preselect > 0) ? $("tr#"+id_prog_preselect).children('td:first').text() : '';
$.tablesorter.addParser({
id: 'txt_select',
is: function(s) {
return false;
},
format: function(s, table, cell) {
return $(cell).find('select').children('option:selected').text() || s;
},
parsed: true,
type: 'text'
});
$(".tablesorter").tablesorter({
widgets:['zebra','stickyHeaders','filter']
,headers: {
5: { sorter:"txt_select", filter:false }
}
,initialized: function (table, filter, apply) {
$.tablesorter.setFilters( table, [nom_prog_preselect,'','','','','',''], true);
}
});
});
Is there anyone who can help me please ? Thanks.
Instead of creating a custom "txt_select" parser, load the parser-input-select.js file provided with the fork of tablesorter.
That file has two select parsers:
'select' - Stores the selected value
'select-text' - Stores the selected text
and some extra code that is needed when the select value changes to update the internal cache.

Categories