Let's take a HTML table, Here I will use some static data for binding table. But you can bind data dynamically also.
<table id="example" class="display" style="width:100%">
<thead>
<tr><th>Name</th><th>Position</th><th>Office</th></tr>
</thead>
<tbody>
<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td></tr>
<tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td></tr>
<tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td></tr>
<tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td></tr>
<tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td></tr>
<tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td></tr>
<tr><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td></tr>
<tr><td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td></tr>
<tr><td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td></tr>
<tr><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td></tr>
<tr><td>Jena Gaines</td><td>Office Manager</td><td>London</td></tr>
<tr><td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td></tr>
<tr><td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td></tr>
<tr><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td></tr>
<tr><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td></tr>
<tr><td>Michael Silva</td><td>Marketing Designer</td><td>London</td></tr>
<tr><td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td></tr>
<tr><td>Gloria Little</td><td>Systems Administrator</td><td>New York</td></tr>
<tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td></tr>
<tr><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td></tr>
<tr><td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td></tr>
<tr><td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td></tr>
<tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td></tr>
<tr><td>Doris Wilder</td><td>Sales Assistant</td><td>Sydney</td></tr>
<tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td></tr>
<tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td></tr>
<tr><td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td></tr>
<tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td></tr>
<tr><td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td></tr>
<tr><td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td></tr>
<tr><td>Michelle House</td><td>Integration Specialist</td><td>Sydney</td></tr>
<tr><td>Suki Burks</td><td>Developer</td><td>London</td></tr>
<tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td></tr>
<tr><td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td></tr>
<tr><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td></tr>
<tr><td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td></tr>
<tr><td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td></tr>
<tr><td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td></tr>
<tr><td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td></tr>
<tr><td>Timothy Mooney</td><td>Office Manager</td><td>London</td></tr>
<tr><td>Jackson Bradshaw</td><td>Director</td><td>New York</td></tr>
<tr><td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td></tr>
<tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td></tr>
<tr><td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td></tr>
<tr><td>Thor Walton</td><td>Developer</td><td>New York</td></tr>
<tr><td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td></tr>
<tr><td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td></tr>
<tr><td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td></tr>
<tr><td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td></tr>
<tr><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td></tr>
<tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td></tr>
<tr><td>Hermione Butler</td><td>Regional Director</td><td>London</td></tr>
<tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td></tr>
<tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td></tr>
<tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td></tr>
<tr><td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td></tr>
<tr><td>Donna Snider</td><td>Customer Support</td><td>New York</td></tr>
</tbody>
</table>
For implementing jQuery code use this following link in head or body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Filter HTML Table data:
Here I will write some jQuery code for filtering HTML table data:
$(document).ready(function () {
var s = '<div class="row"><div class="col-md-6 form-group text-left"><select class="form-control-sm" id="maxRows" style="width:15%;">';
s += '<option value="5000">ALL</option><option value="5">5</option><option value="10">10</option>';
s += '<option value="15">15</option><option value="20">20</option><option value="50">50</option><option value="70">70</option>';
s += '<option value="100">100</option></select></div><div class="col-md-6 form-group text-right">';
s += '<input type="text" id="txt_searchall" class="form-control-sm" placeholder="Enter search text"></div>';
s += '</div>';
$(s).insertBefore("#dataTable");
$('#txt_searchall').keyup(function () {
var search = $(this).val();
$('#dataTable tbody tr').hide();
var len = $('#dataTable tbody tr:not(.notfound) td:contains("' + search + '")').length;
if (len > 0) {
$('#dataTable tbody tr:not(.notfound) td:contains("' + search + '")').each(function () {
$(this).closest('tr').show();
});
} else {
$('.notfound').show();
}
});
})
$.expr[":"].contains = $.expr.createPseudo(function (arg) {
return function (elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Pagination HTML Table data:
Follow this jQuery code for pagination in HTML table data:
$(document).ready(function () {
var m = '<div class="form-group float-lg-right"><nav><ul class="pagination"><li data-page="prev" style=" padding: 7px; background: linear-gradient(45deg, #f30404, #8f1c1c); color: white; font-weight: bold; font-size: 17px;">';
m += '<span> < <span class="sr-only">(current)</span></span></li><li data-page="next" id="prev" style=" padding: 7px; background: linear-gradient(45deg, #f30404, #8f1c1c); color: white; font-weight: bold; font-size: 17px;">';
m += '<span> > <span class="sr-only">(current)</span></span></li></ul></nav></div>';
$(m).insertAfter("#dataTable");
getPagination('#dataTable');
function getPagination(table) {
var lastPage = 1;
$('#maxRows')
.on('change', function (evt) {
//$('.paginationprev').html(''); // reset pagination
lastPage = 1;
$('.pagination')
.find('li')
.slice(1, -1)
.remove();
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
if (maxRows == 5000) {
$('.pagination').hide();
} else {
$('.pagination').show();
}
var totalRows = $(table + ' tbody tr').length; // numbers of rows
$(table + ' tr:gt(0)').each(function () {
// each TR in table and not the header
trnum++; // Start Counter
if (trnum > maxRows) {
// if tr number gt maxRows
$(this).hide(); // fade it out
}
if (trnum <= maxRows) {
$(this).show();
} // else fade in Important in case if it ..
}); // was fade out to fade it in
if (totalRows > maxRows) {
// if tr total rows gt max rows option
var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
// numbers of pages
for (var i = 1; i <= pagenum;) {
// for each page append pagination li
$('.pagination #prev')
.before(
'<li data-page="' +
i +
'">\
<span>' +
i++ +
'<span class="sr-only">(current)</span></span>\
</li>'
)
.show();
} // end for i
} // end if row count > max rows
$('.pagination [data-page="1"]').addClass('active'); // add active class to the first li
$('.pagination li').on('click', function (evt) {
// on click each page
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr('data-page'); // get it's number
var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option
if (pageNum == 'prev') {
if (lastPage == 1) {
return;
}
pageNum = --lastPage;
}
if (pageNum == 'next') {
if (lastPage == $('.pagination li').length - 2) {
return;
}
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$('.pagination [data-page="' + lastPage + '"]').addClass('active'); // add active class to the clicked
// $(this).addClass('active'); // add active class to the clicked
limitPagging();
$(table + ' tr:gt(0)').each(function () {
// each tr in table not the header
trIndex++; // tr index counter
// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
if (
trIndex > maxRows * pageNum ||
trIndex <= maxRows * pageNum - maxRows
) {
$(this).hide();
} else {
$(this).show();
} //else fade in
}); // end of for each tr in table
}); // end of on click pagination list
limitPagging();
})
.val(5)
.change();
// end of on select change
// END OF PAGINATION
}
function limitPagging() {
// alert($('.pagination li').length)
if ($('.pagination li').length > 7) {
if ($('.pagination li.active').attr('data-page') <= 3) {
$('.pagination li:gt(5)').hide();
$('.pagination li:lt(5)').show();
$('.pagination [data-page="next"]').show();
} if ($('.pagination li.active').attr('data-page') > 3) {
$('.pagination li:gt(0)').hide();
$('.pagination [data-page="next"]').show();
for (let i = (parseInt($('.pagination li.active').attr('data-page')) - 2); i <= (parseInt($('.pagination li.active').attr('data-page')) + 2); i++) {
$('.pagination [data-page="' + i + '"]').show();
}
}
}
}
$(function () {
// Just to append id number for each row
$('table tr:eq(0)').prepend('<th hidden> ID </th>');
var id = 0;
$('table tr:gt(0)').each(function () {
id++;
$(this).prepend('<td hidden>' + id + '</td>');
});
});
})
That's it. I hope you have found this article helpful. Do let me know via comments and likes.
0 Comments