How to actualize sequence for DataTables's rowReorder extension? - javascript

I'm using rowReorder extension for DataTables.
I got a button to remove some rows with https://datatables.net/reference/api/row().remove(), but after clicking it, the corresponding sequence number is missing.
How can I actualize this sequence, so it contains the new rows count ?
I tried to manually update the sequence field value, but if you try to drag and drop a row after this, the sequence numbers appears in double.
Here is my code
var t = $('#mytable').DataTable({
'rowReorder': true,
'dom' : '<t>',
});
$('.delbutton').on('click', function() {
t
.row( $(this).parents('tr') )
.remove()
.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
<link href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="mytable" class="display" cellspacing="0">
<thead>
<th>sequence</th>
<th>datas</th>
<th>delete</th>
</thead>
<tdboy>
<tr>
<td>1</td>
<td>lorem</td>
<td class="delbutton">x</td>
</tr>
<tr>
<td>2</td>
<td>ipsum</td>
<td class="delbutton">x</td>
</tr>
<tr>
<td>3</td>
<td>dolor</td>
<td class="delbutton">x</td>
</tr>
<tr>
<td>4</td>
<td>sit</td>
<td class="delbutton">x</td>
</tr>
</tdboy>
</table>
Thanks,

Related

Add DataTable with sort in html doc

I would like to create an simple table in html doc. The table exists but I cant order and operate with the table. I'm a noob in html and js.
My result:
<link rel="stylesheet" type="text/css" href="static/datatables.min.css"/>
<script type="text/javascript" src="static/datatables.min.js"></script>
<table id="example" class="display">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Jan Molby</td><td>12</td></tr>
<tr><td>Steve Nicol</td><td>8</td></tr>
<tr><td>Steve McMahon</td><td>9</td></tr>
<tr><td>John Barnes</td><td>15</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
It seems you are missing few things.
Like correct path to your CSS and JavaScript for your DataTable
You can use directly the CDN for DataTable, also don't forget to add the CDN for jQuery.
You can get the DataTable CDN from here DataTable CDN Link
Check below the sample code.
$(document).ready(function() {
$('#example').dataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Person</th>
<th>Monthly pay</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Molby</td>
<td>12</td>
</tr>
<tr>
<td>Steve Nicol</td>
<td>8</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9</td>
</tr>
<tr>
<td>John Barnes</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>£45,000</td>
</tr>
</tfoot>
</table>
you do something like below:
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Make sure you have added below two JS:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
And CSS file:
https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
Documentation: https://datatables.net/examples/basic_init/table_sorting.html

How to save table with contenteditable column into local storage

I'm trying to save the content of column 3, with id name = 'edit' in the table, locally. Here is the code:
// Button to save edit
function saveEdits() {
var table, tr, editElem, userVersion, i, j;
table = document.getElementById("mytable");
tr = table.getElementByClassName("output");
editElems = {
for (i=0; i< tr.length; i++){
//get the editable element
userVersion[i] : tr[i].getElementsById("edit").innerHTML;
}
}
localStorage.setItem('userEdits', JSON.stringify(editElems));
}
// place in the body to reload the changes
function checkEdits() {
var userEdits = localStorage.getItem('userEdits');
if (userEdits) {
userEdits = JSON.parse(userEdits);
for ( var elementId in userEdits ) {
document.getElementById(elementId).innerHTML = userEdits[elementId];
}
}
}
I am following tutorial in https://www.developerdrive.com/allowing-users-to-edit-text-content-with-html5/, but I want to apply it to the table, however, it doesn't work.
Here is my html code
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src=./javascript.js></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>
There are some bugs in the code:
tr = table.getElementByClassName("output"); // it is getElementsByClassName
secondly, I don't know if this style of declaring a JSON is valid or not but since it didn't worked, I changed it and saved the values first to an array and then converted it to a JSON String.
Another thing is that the way you are trying to store key value pairs in JSON you won't be able to get a selector in a JSON String and hence you won't be able to update the values correctly. So, i have used an associative array where it's keys are the row number in which the edit was performed and the value holds the new content of that column. So, while updating you just have to select the desired column from a row in which the values should be updated.
This is working fine:
// Button to save edit
var TR;
function saveEdits() {
var table, tr, editElem, userVersion = [], i, j;
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
TR = tr;
console.log(tr);
for (i=0; i< tr.length; i++){
// This will set a key value pair where key as row number and value as the inner HTML
// This key will further help us updating the values from localhost
userVersion[tr[i].sectionRowIndex] = tr[i].getElementsByTagName("td")[3].innerHTML;
}
console.log(userVersion);
localStorage.setItem('userEdits', JSON.stringify(userVersion));
}
// place in the body to reload the changes
function checkEdits() {
try{
var userEdits = localStorage.getItem('userEdits');
//console.log(JSON.parse(userEdits));
if (userEdits) {
userEdits = JSON.parse(userEdits);
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
for ( var elementId in userEdits ) {
tr[elementId].getElementsByTagName("td")[3].innerHTML = userEdits[elementId];
}
}
}catch{
//console.log("Hello");
}
}
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>

I want the table to be sorted in a particular order on load using tablesorter

I have a table which displays like this when I load the page.
But I want the subjects to be in a particular order(math,history,science and physics) but the professor names should be sorted in ascending order.
Can this be done using tablesorter's custom sort?
$('table').tablesorter({
theme: 'blue'
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th>subject</th>
<th>professor</th>
</tr>
</thead>
<tbody>
<tr>
<td>math</td>
<td>Jordan</td>
</tr>
<tr>
<td>math</td>
<td>Kent</td>
</tr>
<tr>
<td>math</td>
<td>Wayne</td>
</tr>
<tr>
<td>history</td>
<td>Richards</td>
</tr>
<tr>
<td>history</td>
<td>Xavier</td>
</tr>
<tr>
<td>science</td>
<td>Arthur</td>
</tr>
<tr>
<td>science</td>
<td>John</td>
</tr>
<tr>
<td>physics</td>
<td>Steve</td>
</tr>
<tr>
<td>physics</td>
<td>Wade</td>
</tr>
</tbody>
</table>
JSFiddle
Any help is appreciated. Thanks in advance.
To set a custom sort order you should add your own parser. Check this example in the docs.
Then, to order by default both columns, just pass sortList to your configuration object.
And to add an additional forced sort that will be appended to the dynamic selections by the user use sortAppend.
Note that in the snippet below I have switched "Steve" and "Wade" so you can see that the sortList is working.
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'subjects',
is: function(s, table, cell, $cell) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// format your data for normalization
return s.toLowerCase()
.replace(/math/,0)
.replace(/history/,1)
.replace(/science/,2)
.replace(/physics/,3);
},
// set type, either numeric or text
type: 'numeric'
});
$('table').tablesorter({
theme: 'blue',
sortList: [[0,0], [1,0]],
sortAppend : [[1,0]]
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-subjects">subject</th>
<th>professor</th>
</tr>
</thead>
<tbody>
<tr>
<td>math</td>
<td>Jordan</td>
</tr>
<tr>
<td>math</td>
<td>Kent</td>
</tr>
<tr>
<td>math</td>
<td>Wayne</td>
</tr>
<tr>
<td>history</td>
<td>Richards</td>
</tr>
<tr>
<td>history</td>
<td>Xavier</td>
</tr>
<tr>
<td>science</td>
<td>Arthur</td>
</tr>
<tr>
<td>science</td>
<td>John</td>
</tr>
<tr>
<td>physics</td>
<td>Wade</td>
</tr>
<tr>
<td>physics</td>
<td>Steve</td>
</tr>
</tbody>
</table>

How to add collapse to table rows

I have a table in my page and don't want to show entire table at once. Instead, I'd like to show only 3 rows by default. Then, when a user clicks on the more button, I want to display all rows.
I tried the below code to accomplish that, but had a rendering issue. Is there any possibility to add collapse to table rows in html?
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable" data-toggle="collapse" data-target="#remaining-data">more
</span>
</td>
</tr>
<table class="collapse table table-stripped" id="remaining-data">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</table>
<table>
I have used nth-child(4) that means it will get 3rd tr and add display: none CSS to every tr after that due to nextAll() now when I click on more button it will toggle the element with fade effect, there is no need to write new table or tbody
$(function(){
$("table tr:nth-child(4)").nextAll().css("display","none");
$(".clickable").on("click", function(){
$("table tr:nth-child(4)").nextAll().fadeToggle();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable btn btn-sm pull-right btn-link">more
</span>
</td>
</tr>
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
<table>
Don't use a second table, but instead a <tbody> element to wrap multiple rows together. These <tbody> elements can be used multiple times within the same table (see link). Using a second table leads to a different width of the columns. Furthermore, you added a second table inside only one cell of the parent table.
Here is an example:
document.querySelector('.more').addEventListener('click', function() {
document.querySelector('.initially-hidden-rows').classList.remove('hidden');
});
table td,
table th {
border: 1px solid black;
}
.more {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.hidden {
display: none;
}
<table>
<tbody class="initial-rows">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<a class="more">more</a>
</td>
</tr>
</tbody>
<tbody class="initially-hidden-rows hidden">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</tbody>
<table>

Why is this datatable showing no result when for a mobile number?

I have a datatable in which I am putting my data. You can see the code below. I want you to notice that; the code will work perfectly right now. However, when you uncomment the Mobile# from the code & then try searching using profile-ids (8 or 12); it doesn't show the records as it shows without mobile number. I am wondering why.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<!--<td>12123123</td>-->
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<!-- <td>12123123</td>-->
</tr>
</tbody>
</table>
Fiddle link ... : Fiddle link
This works for me. I cannot see any issues in Chrome at least
I can search for phone 1,2,3, and id 8 to find John, phone 4,5,6 and id 9 to find Duck
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>8</td>
<td>John</td>
<td>Keller</td>
<td>123</td>
</tr>
<tr>
<td>9</td>
<td>Donald</td>
<td>Duck</td>
<td>456</td>
</tr>
</tbody>
</table>
It seems that the search fields searches in all td elements if it contains that value, possibly using regular expressions for this?
I haven't worked with DataTables, but is there a way to set which field it should check in? That would most likely solve your problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<td>12123123</td>
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<td>23232323</td>
</tr>
</tbody>
</table>

Categories