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>
Related
Unfortunately I have no experience with javascript and just copied the html table search from https://speedysense.com/filter-html-table-using-javascript/ to a local html file. The search works but I need to extend the code to support logical search operators like || and && to implement AND and OR search functionality. Has anybody the knowledge to let me know the required adaptions to the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Table Filter Search</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
h3 span {
font-size: 22px;
}
h3 input.search-input {
width: 300px;
margin-left: auto;
float: right
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body class="mt32">
<div class="container">
<h3>
<span>JavaScript Filter Table Data</span>
<input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
</h3>
<table class="table table-striped mt32 customers-list">
<thead>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Email</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ana Trujillo</td>
<td>Ana.trujillo#gmail.com</td>
<td>050214</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno</td>
<td>antoniomoreno2#gmail.com</td>
<td>12209</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Maria Anders</td>
<td>mariaanders#yahoo.com</td>
<td>05021</td>
<td>Germany</td>
</tr>
<tr>
<td>4</td>
<td>Thomas Hardy</td>
<td>hardythomas.90#gmail.com</td>
<td>WA1 1DP</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>5</td>
<td>Christina Berglund</td>
<td>christina#outlook.com</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
<tr>
<td>6</td>
<td>Davolio Nancy</td>
<td>nancy.davolio#gmail.com</td>
<td>810025</td>
<td>India</td>
</tr>
<tr>
<td>7</td>
<td>Fuller Andrew</td>
<td>andrew.10#yahoo.com</td>
<td>W23 458</td>
<td>United State</td>
</tr>
<tr>
<td>8</td>
<td>Leverling Janet</td>
<td>leverling.j#gmail.com</td>
<td>T5A 0B5</td>
<td>Canada</td>
</tr>
</tbody>
</table>
</div>
<script>
(function(document) {
'use strict';
var TableFilter = (function(myArray) {
var search_input;
function _onInputSearch(e) {
search_input = e.target;
var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
myArray.forEach.call(tables, function(table) {
myArray.forEach.call(table.tBodies, function(tbody) {
myArray.forEach.call(tbody.rows, function(row) {
var text_content = row.textContent.toLowerCase();
var search_val = search_input.value.toLowerCase();
row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
});
});
});
}
return {
init: function() {
var inputs = document.getElementsByClassName('search-input');
myArray.forEach.call(inputs, function(input) {
input.oninput = _onInputSearch;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document);
</script>
</body>
</html>
Maybe with a little explanation how this works to gain more knowledge about the functionality of the code extension!?
Thank you for your support!
Best regards
Frank
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>`
}
I have a html table with some column values as String as well as Ratio Numbers (50:10, 60:30)
My problem is when I export it using table2excel, some ratio values are considered as time.
See below Image:
My Export Code:
$("#pat_inj_table").table2excel({
name: "Report",
filename: name,
});
I found this code in table2excel documentation which I think can be useful to solve my problem:
Table2Excel.extend((cell, cellText) => {
// {HTMLTableCellElement} cell - The current cell.
// {string} cellText - The inner text of the current cell.
// cell should be described by this type handler
if (selector) return {
t: ...,
v: ...,
};
// skip and run next handler
return null;
});
But I dont know how to use this above code.
There are two ways you can identify cell in the handler.
Add attribute on each cell (for example, <td type="string">10:20</td>) and identify data based on that
Table2Excel.extend((cell, cellText) => {
return $(cell).attr('type') == 'string' ? {
t: 's',
v: cellText
} : null;
});
var table2excel = new Table2Excel({
defaultFileName: "myFile"
});
table2excel.export($(".table"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rusty1s.github.io/table2excel/dist/table2excel.js"></script>
<table class="table" excel-name="excel-name">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td type="string">10:20</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
Use regex to parse known format of data and use that to identify cell
Table2Excel.extend((cell, cellText) => {
return cellText && /\d+:\d+/gi.test(cellText) ? { t: 's', v: cellText } : null;
});
var table2excel = new Table2Excel({
defaultFileName: "myFile"
});
table2excel.export($(".table"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rusty1s.github.io/table2excel/dist/table2excel.js"></script>
<table class="table" excel-name="excel-name">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td type="string">10:20</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
Take a look at this jsFiddle demo.
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
I have a json file with some data and I am using a Js loop to load a jQuery template to iterate through and load a table made of 4 rows based on the data, so far I only get the last row. https://github.com/codepb/jquery-template
<script type="text/html" id="tableContent">
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
function builTable(){
var table = "",
colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];
for(i = 0; i< source.Products.length; i++){
$("table").loadTemplate($("#tableContent"),
{
Product: source.Products[i].Product,
Bookings: source.Products[i].Bookings,
Percentage: source.Products[i].Percentage,
Transaction: source.Products[i].Transaction
} );
$(document).ready(function(){
builTable();
});
<table border="1" cellpadding="2">
</table>
Is there something wrong inside the loop?
http://jsfiddle.net/9JV7t/1/
I think you just need to add an array because it loads the whole content just once and then overrides it again. But therefore you need to only include the data rows in the template and add the headings to the table (DEMO):
<script type="text/html" id="tableContent">
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
Your table:
<table>
<thead>
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And the js:
function builTable(){
$("tbody").loadTemplate($("#tableContent"), source.Products);
}