Just trying to filter a table but also have it filter the number with and without dashes (working) but also search the name and id as well. Its only searching the one column since the index is [0].
How would I have it search all 3 columns? So if I search number or id or name it would filter. Here is the working code I have so far to search number.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Number search</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Number</th>
<th style="width:60%;">Name</th>
<th style="width:60%;">ID</th>
</tr>
<tr>
<td>905-373-3333</td>
<td>Mike</td>
<td>4563</td>
</tr>
<tr>
<td>905-333-3333</td>
<td>adam</td>
<td>8963</td>
</tr>
<tr>
<td>416-373-3432</td>
<td>Jim</td>
<td>9363</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, cleanedFilter;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter.replace("-","");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");
if (cellContent.indexOf(cleanedFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
If you want to use a filter for every td available in your rows, you can use the following:
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
<section class="container">
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table class="order-table table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Number 2</th>
<th>Number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column One</td>
<td>Two</td>
<td>352353</td>
<td>1</td>
</tr>
<tr>
<td>Column Two</td>
<td>Two</td>
<td>4646</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
Related
I need to save a table in a HTML page in PDF Format.
As you can I have 30 columns in this table.
see image
I made a javascript function (using HTML2PDF library), that the button "Genera PDF" will download the table in PDF Format.
There is the javascript function:
function generatePDF(){
element = document.getElementById("table-bordered");
var opt = {
filename: 'myreport.pdf',
image: { type: 'jpeg', quality: 0.98 },
jsPDF: { unit: 'in', format: 'A4', orientation: 'landscape' }
};
htmltopdf().from(element).set(opt).save();
}
The problem is that the PDF comes out with a bad layout (is not center on the page and the columns goes only to 27.)
PDF file
How I have to modify my code as it work well?
Otherwise, there is another possibility other html2pdf for doing this work?
Thank you
You can use the js pdf. My requirement is almost done with that. I hope it will work for you.
$(document).ready(function () {
var form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Invoice');
form.width(cache_width);
});
}
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
background-color: #111;
color: white;
}
tr:nth-child(odd) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF</title>
</head>
<body>
<h1>How To Convert HTML To PDF Using JavaScript</h1>
<form class="form">
<table>
<tbody>
<tr>
<th>Company Name</th>
<th>Employee Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dell</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>Asus</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
<tr>
<td>Apple</td>
<td>Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>HP</td>
<td>Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Yoshi</td>
<td>Canada</td>
</tr>
</tbody>
</table><br>
<input type="button" id="create_pdf" value="Generate PDF">
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin: 0px auto;
}
#htmlContent{
text-align: center;
}
td, th, button {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
button {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<div id="htmlContent">
<h2 style="color: #0094ff">Hello</h2>
<h3>About this Code:</h3>
<p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>
<table>
<tbody>
<tr>
<th>Person</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>+2345678910</td>
<td>Germany</td>
</tr>
<tr>
<td>Jacob</td>
<td>+1234567890</td>
<td>Mexico</td>
</tr>
<tr>
<td>Eleven</td>
<td>+91234567802</td>
<td>Austria</td>
</tr>
</tbody>
</table>
</div>
<div id="editor"></div>
<center>
<p>
<button id="generatePDF">generate PDF</button>
</p>
Ref:phpcoder.tech
</center>
The Js Code
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
//margins.left, // x coord margins.top, { // y coord
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
I have noticed strange behavior of table cells width in Chrome.
For example, we have a table with 2 columns and 2 rows, but 1 cell will have colspan="2" and contain inner table with some content.
So, inner table content will affect on top-table cells widths.
JSFiddle: http://jsfiddle.net/Lzro9p6b/2/
let maxChars = 20;
let str = 'z';
setDynamicContent(str);
setInterval(function() {
if (str.length >= maxChars)
str = '';
str += 'zz';
setDynamicContent(str);
}, 1000);
function setDynamicContent(value) {
Array.from(document.getElementsByClassName('dynamic')).forEach(function(el){
el.innerHTML = value;
});
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
}
td[colspan="2"] {
width: 100%;
}
.left-interesting-cell {
background: #faa;
}
.right-interesting-cell {
width: 100%;
background: #aaf;
}
.inner-table td {
width: 50%;
}
<h1>Why <code>left</code> and <code>right</code> cells are depends on dynamic content in Chrome 69?</h1>
<table>
<tbody>
<tr>
<td colspan="2">
<table class="inner-table">
<tbody>
<tr>
<td>Some dynamic content:</td>
<td class="dynamic"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="left-interesting-cell">left</td>
<td class="right-interesting-cell">right</td>
</tr>
</tbody>
</table>
I have a table:- HTML Code
<div class="table-scroll">
<table class="my-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>age</th>
<th>email</th>
<th>balance</th>
<th>Mode</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection" ng-class-even="'striped'">
<td>{{row.Row1}}-{{row.Row2}}</td>
<td>{{row.Row3 != null ? row.Row3 : " "}}</td>
<td><div class="width">{{row.Row4 != null ? row.Row4 : " "}}</div></td>
<td>{{row.Row5 != null ? (row.Row2 >= "50"? row.Row5 : (row.Row5 | date:'dd-MMM-yyyy')) : " "}}</td>
<td>{{row.Row2}}</td>
<td>{{row.Row5}}</td>
</tr>
</tbody>
</table>
</div>
CSS Code:-
.table-scroll {
overflow-x: scroll;
overflow-y:hidden;
height:60vh;}
.width{
width:50%;
}
.my-table {
width: 100%; }
.my-table tbody tr {
outline: none; }
.my-table tbody, thead {
display: block; }
.my-table tbody{
overflow-y:scroll;
max-height:50vh;
}
.my-table td {
min-width: 90px;
font-size: .7em;
padding: 6px;
text-align: center;
border-bottom: 1px solid #ddd; }
.my-table th {
min-width: 90px;
background-color: #58595b;
font-size: .7em;
color: #ddd;
padding: 6px;
border-bottom: 1px solid #777;
font-weight: bold;
border-right: 1px solid #333;
border-left: 1px solid #777;
text-align: center; }
.striped {
background-color: #eeeff1; }
JS Code:-
angular.module('myApp', ['smart-table','lrDragNDrop'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.isLoading = false;
$scope.rowCollection = [];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '#whatever.com',
balance = Math.random() * 3000;
return {
Row1: firstName,
Row2: lastName,
Row3: age,
Row4: email,
Row5: balance
};
}
$scope.columns=['Row1','Row2','Row3','Row4','Row5'];
for(var i=0;i<50;i++){
$scope.rowCollection.push(createRandomItem());
}
}
]);
https://plnkr.co/edit/YCXMSjAQ4VVSyvVFNLoI?p=preview
Here I am trying to fix the column headers and applying the vertical scroll to my tbody.
But the scroll appears at the very end when user scrolls through the horizontal scroll. I am trying to fix the position of vertical scroll but it changes my table look. Also, to achieve above I used display:block to tbody and thead but that ruins the alignment of columns. Can anybody please help me fixing the above issue.
.my-table tbody, thead {display: inline-block; }
.my-table th {min-width:92px;}
This seems really simple but I am struggling with CSS.
Basically I have a table and after it I use a pagination system to navigate through the table content. The real table has more information, I just used an example to make it look simpler.
I am having a problem trying to center the buttons for the pagination after the table. The text-align property does not seem to be working and I am not sure why.
How can I center the buttons in the center considering the 100% width.
Thanks.
$(document).ready(function() {
$('#table').after('<div id="nav" class="pagination"></div>');
var rowsShown = 2;
var rowsTotal = $('#table tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#table tbody tr').hide();
$('#table tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#table tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
.table {
width: 100%;
}
.pagination {
display: inline-block;
width: 100%;
text-align: center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Item</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Sarah</td>
<td>3</td>
</tr>
<tr>
<td>Tom</td>
<td>3</td>
</tr>
<tr>
<td>Kate</td>
<td>1</td>
</tr>
<tr>
<td>Michael</td>
<td>1</td>
</tr>
</tbody>
</table>
You can do this.
$(document).ready(function() {
$('#table').after('<div id="nav" class="pagination"></div>');
var rowsShown = 2;
var rowsTotal = $('#table tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#table tbody tr').hide();
$('#table tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#table tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
.table {
width: 100%;
}
.pagination {
display: inline-block;
width: 100%;
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Item</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Sarah</td>
<td>3</td>
</tr>
<tr>
<td>Tom</td>
<td>3</td>
</tr>
<tr>
<td>Kate</td>
<td>1</td>
</tr>
<tr>
<td>Michael</td>
<td>1</td>
</tr>
</tbody>
</table>
I have some table and I want to make it responsive when it show in width max 760.
This is the table looks normal :
And I want to make it like this if width of the screen is max 760 :
In that table the last coloumn just appears in end of table not in each row.
Anyone can help me to do that ?
Use this html & css code for make rsponsive table
Check the Snippets is below .
Use this css with media query max-width:760px or any width
.responsive-table {
margin:0px auto;
width:500px;
border: 1px solid #efebeb;
}
.responsive-table img{height:100px; }
.responsive-table th {
display: none;
}
.responsive-table td {
display: block;
border-top: 1px solid #ddd;
}
.responsive-table td:first-child{border:none;}
.responsive-table td:first-child {
padding-top: .5em;
}
.responsive-table td:last-child {
padding-bottom: .5em;
}
.responsive-table td:before {
content: attr(data-th) ": ";
display:block;
font-weight:bold;
}
<table class="responsive-table">
<tbody>
<tr>
<th>
Room
</th>
<th>
Guest
</th>
<th>
Description
</th>
<th>
Rate
</th>
<th>
Book
</th>
</tr>
<tr>
<td data-th="Room">
<img src="http://i45.tinypic.com/t9ffkm.jpg" alt="" />
</td>
<td data-th="Guest">
2 adult
</td>
<td data-th="Description">
Room Only
</td>
<td data-th="Rate">
USD 200
</td>
<td data-th="Book">
<button type="submit"> Book</button>
</td>
</tr>
</tbody>
</table>
I wrote js function to make table responsive. You can set breakpoint and table tag or css class name as parameters.
const makeTableResponsive = (mq, t) => {
var q = window.matchMedia(mq);
if (q.matches) {
let headings = [];
let tables = document.querySelectorAll(t);
if (tables && tables.length > 0) {
tables.forEach(table => {
let thead = table.querySelector("thead");
let headingTags = thead.querySelectorAll("th");
let tbody = table.querySelector("tbody");
let tbodies = tbody.querySelectorAll("tr");
tbody.style.display = "block";
thead.style.display = "none";
headingTags.forEach((th) => {
th.style.display = "block";
headings.push(th.innerText);
});
tbodies.forEach((tr) => {
let trstyle = tr.style;
trstyle.display = "block";
trstyle.border = "1px solid #ccc";
trstyle.marginBottom = "30px";
let tds = tr.querySelectorAll("td");
tds.forEach((td, i) => {
td.style.display = "flex";
td.style.flexDirection = "row-reverse";
td.style.justifyContent = "space-between";
td.innerHTML += `<span class="font-weight-bold text-primary">${headings[i]}</span>`;
});
});
})
}
}
};
makeTableResponsive('(max-width: 992px)', 'table');