key-focus not working in jquery plugin DataTables - javascript

i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?

$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events

Related

Display "no results found" if there is no matching search text input on the table

I saw this block of code from w3schools and it works perfectly fine. My only issue is that, if the inputted text is not present on the table, it doesn't display anything.
Here's the script code:
$(document).ready(function() {
$('#searchBar').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#tableData tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here's the link to the w3schools article that I am talking about:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
I'd like to display a text saying "No results found" if there are no search results.
Here my solution for your problem I think this is the optimal solution for your problem.
Here the HTML which I get from the link you provided of w3school I added here a new row in HTML , little style and some conditional line in the JS code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.no-data {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
</script>
</body>
</html>
the new row I added in HTML for showing "No data" is here:
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
style for the new row
.no-data {
display: none;
text-align: center;
}
I added a some new conditional line in JS and after adding those the JS code is :
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
Hope your problem is solved have a nice day .

how to iterate table <tr> dynamically in html using node js

in node js i try to render table tr with iterate function but it shows unexpected token "<". check the given code snippet. in table row tr i want it iterate dynamically.
module.exports = ({p}) => {
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>
please help me how can i overcome to solve this issue
Use something like this :-
Map over array of p and produce array of tr for each p.
Then, append it to main html
module.exports = ({
ArrayOfP
}) => {
const allTr = ArrayOfP.map(p =>(`<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>`))
}
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
${allTr.join("")}
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>`
}

tablesorter - How to sort child rows and parent rows

I'm using tablesorter on my project with the children functionality (described here).
Here is my code:
$(function() {
$('table').tablesorter();
});
td,
th {
border: solid 2px #121E23
}
table {
border-collapse: collapse;
}
thead {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>this is column 1</th>
<th>this is column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">TITLE 1</th>
</tr>
<tr class="tablesorter-childRow">
<td>abc</td>
<td>yolo</td>
</tr>
<tr class="tablesorter-childRow">
<td>def</td>
<td>yolo</td>
</tr>
<tr>
<th colspan="4">TITLE 2</th>
</tr>
<tr class="tablesorter-childRow">
<td>test1</td>
<td>yolo</td>
</tr>
<tr class="tablesorter-childRow">
<td>test2</td>
<td>yolo</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.combined.min.js"></script>
</body>
</html>
By default we have this:
And if we change the sorting order of the first column (by clicking on it), we get this :
Simply because tablesorter sorts the parent rows (TITLE 1 and TITLE 2), and keeps the children rows in the same order as at the beggining.
But I would like tablesorter to also sorts the children rows, and so to get my table like this:
How can I do that ?
Thanks for your help.

Basic implementation of table-dragger

I am trying to implement table-dragger(basic), and am unable to understand how to get it done.
Following is my code:
<!DOCTYPE html>
<html>
<head>
<title>draggable</title>
<script src="/Desktop/table-dragger.min.js"></script>
<script type="text/javascript">
var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
animation: 300
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});
</script>
</head>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>Header 1</th>
<th class='handle'>Header 2</th>
<th class='handle'>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
I have provided the path to the table-dragger.min.js as well.What is to be done here now? The page doesn't display any draggable content(row).
If you check your console, you must see a JS error. Something like
table-dragger: el must be TABLE HTMLElement, not [object Null]
This is because your DOM doesn't have any table added in there when you are trying to get it with
var el = document.getElementById('table');
And it gives you null. So you table-dragger throws an error.
A quick fix is just move your sctipt where body tag is being closed and that should fix it.
Something like
<!DOCTYPE html>
<html>
<head>
<title>draggable</title>
<script src="https://cdn.jsdelivr.net/npm/table-dragger#1.0.2/dist/table-dragger.min.js"></script>
</head>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>Header 1</th>
<th class='handle'>Header 2</th>
<th class='handle'>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
animation: 300
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});
</script>
</body>
</html>
If you want to move row then change dragHandler: ""
var dragger = tableDragger(el,{
mode: 'row',
dragHandler: '',
onlyBody: true,
animation: 300
});
And put script tag before < /body>

bootstrap table custom search

I have following table:
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
JS:
$('#table').bootstrapTable({
pagination: true,
search: true,
});
I want to implement following search behaviour: if the user search for "2001" or "200.1" then the first entry shall be shown. If the user search for "10.1234" or "101234" then again the first entry shall be shown.
Does anybody have an idea how to implement this?
Here is the doc: http://bootstrap-table.wenzhixin.net.cn/documentation/
You may do as follows;
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
ftd.parentElement.style.backgroundColor = ~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? "green" : "white";
});
});
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
<label for="choose">Chose ID:</label>
<input id="choose" required>
I was a little lazy to add a button but striking tab or clicking somewhere out of the input element should do.
Hint: ~(-1) === 0; tilde changes -1 to 0 (falsey value)
OK lets carry on with a Bootstrap example. This time we will define a class for the row that contains the number we search and add it to our CSS file. Let it be something like;
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
Now if we check all first <td> elements (which contains the number data) in each row. If it doesn't contain we will remove the .found class from the parentElement.classList (if the parent element's class list doesn't have it no error will be thrown) if we find what we are looking for then we will add .found class to the parent element's class list.
Very simple..
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? ftd.parentElement.classList.add("found")
: ftd.parentElement.classList.remove("found");
});
});
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>200.10.1234</td>
<td>Maria</td>
<td>Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Fransisco</td>
<td>Chang</td>
</tr>
<tr>
<td>203.10.5678</td>
<td>Fabrio</td>
<td>Donetti</td>
</tr>
</tbody>
</table>
</div>
<label for="choose">Search ID:</label>
<input id="choose" required>
</body>
</html>
#Lahmacun, I've linked a codeply project that implements the bootstrap table. All of this code can be found in the documentation for the website that you've provided. In fact, the search functionality you're looking for is already baked into it; no need to write any custom code. You just have to call it by setting the data-search attribute to true.
HTML Code:
<table id="table" data-url="" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
</table>
JavaScript Code:
$('#table').bootstrapTable({
columns: [{
field: 'number',
title: 'Number'
}, {
field: 'name',
title: 'Name'
}],
data: [{
id: 1,
number: '200.10.1234',
name: 'Maria Anders'
}, {
id: 2,
number: '202.10.9234',
name: 'Francisco Chang'
}]
});

Categories