demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="Content/Javed.css" rel="stylesheet" />
<!--<script src="Content/Javed.js"></script>-->
</head>
<body>
<div class="container">
<div class="header_wrap">
<div class="num_rows">
<div class="form-group">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="100">100</option>
<option value="5000">Show ALL Rows</option>
</select>
</div>
</div>
<div class="tb_search">
<input type="text" id="search_input_all" onkeyup="FilterkeyWord_all_table()" placeholder="Search.." class="form-control">
</div>
</div>
<table class="table table-striped table-class" id="table-id">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rajah Armstrong</td>
<td>erat.neque@noncursusnon.ca</td>
<td>1-636-140-1210</td>
<td>Oct 26, 2015</td>
</tr>
<tr>
<td>Kuame Parsons</td>
<td>non.sapien@in.com</td>
<td>1-962-122-8834</td>
<td>Aug 2, 2015</td>
</tr>
<tr>
<td>Ira Parker</td>
<td>Vivamus.molestie.dapibus@quisturpisvitae.edu</td>
<td>1-584-906-8572</td>
<td>Sep 15, 2015</td>
</tr>
<tr>
<td>Dante Carlson</td>
<td>dis.parturient@mi.co.uk</td>
<td>1-364-156-9666</td>
<td>Nov 28, 2015</td>
</tr>
<tr>
<td>Nathan Bernard</td>
<td>Etiam.vestibulum.massa@nonummy.net</td>
<td>1-646-420-3211</td>
<td>Aug 4, 2016</td>
</tr>
<tr>
<td>Dillon Poole</td>
<td>eget@vitae.ca</td>
<td>1-788-762-3800</td>
<td>Apr 25, 2016</td>
</tr>
<tr>
<td>Hu Leach</td>
<td>ligula.eu.enim@eu.org</td>
<td>1-888-617-5106</td>
<td>Nov 3, 2015</td>
</tr>
<tr>
<td>Dean Lucas</td>
<td>ligula.Nullam.feugiat@orciUt.org</td>
<td>1-176-725-3287</td>
<td>Mar 10, 2016</td>
</tr>
<tr>
<td>Dorian Durham</td>
<td>at@conubianostraper.org</td>
<td>1-867-829-4207</td>
<td>Nov 11, 2016</td>
</tr>
<tr>
<td>Roth Ward</td>
<td>Donec@atvelitCras.ca</td>
<td>1-539-674-6286</td>
<td>May 4, 2015</td>
</tr>
<tr>
<td>Geoffrey Gilliam</td>
<td>rutrum.justo.Praesent@euismodetcommodo.ca</td>
<td>1-450-585-0087</td>
<td>Nov 28, 2016</td>
</tr>
<tr>
<td>Vance Bonner</td>
<td>Nunc.mauris@amet.co.uk</td>
<td>1-746-842-1533</td>
<td>Jul 25, 2016</td>
</tr>
<tr>
<td>Castor Rivera</td>
<td>faucibus.Morbi.vehicula@euismodet.edu</td>
<td>1-134-497-7454</td>
<td>Dec 3, 2016</td>
</tr>
<tr>
<td>Marshall Wheeler</td>
<td>tempus.eu@sedfacilisis.ca</td>
<td>1-709-608-3138</td>
<td>Dec 6, 2015</td>
</tr>
<tr>
<td>Porter Woods</td>
<td>ultricies.sem.magna@urnajustofaucibus.com</td>
<td>1-797-194-5400</td>
<td>Jul 21, 2016</td>
</tr>
<tr>
<td>Dexter Barnes</td>
<td>convallis@auctorveliteget.org</td>
<td>1-262-180-8026</td>
<td>Sep 1, 2016</td>
</tr>
<tr>
<td>Aaron Owen</td>
<td>rhoncus.Nullam.velit@luctusutpellentesque.net</td>
<td>1-236-283-7422</td>
<td>Jul 26, 2016</td>
</tr>
<tr>
<td>Malachi Mcmahon</td>
<td>nunc.sed.pede@Maurisblanditenim.com</td>
<td>1-973-844-7994</td>
<td>Dec 31, 2015</td>
</tr>
<tr>
<td>Ivan Vasquez</td>
<td>eu.lacus.Quisque@Nunc.org</td>
<td>1-626-851-7695</td>
<td>Feb 23, 2016</td>
</tr>
<tr>
<td>Colby Cline</td>
<td>faucibus.orci.luctus@VivamusnisiMauris.com</td>
<td>1-861-773-5057</td>
<td>Nov 11, 2015</td>
</tr>
<tr>
<td>Dale Crawford</td>
<td>ac@estacmattis.ca</td>
<td>1-620-744-5242</td>
<td>Oct 8, 2016</td>
</tr>
<tr>
<td>Griffith Flowers</td>
<td>Ut.tincidunt@tellus.ca</td>
<td>1-690-390-5508</td>
<td>Sep 12, 2015</td>
</tr>
<tr>
<td>Stone Morris</td>
<td>Integer.id@diamatpretium.com</td>
<td>1-214-162-0579</td>
<td>Jan 10, 2016</td>
</tr>
<tr>
<td>Bradley Mcfarland</td>
<td>ipsum.dolor.sit@nislNulla.org</td>
<td>1-619-732-1620</td>
<td>Oct 29, 2016</td>
</tr>
<tr>
<td>Sylvester Morse</td>
<td>faucibus.Morbi.vehicula@non.ca</td>
<td>1-661-248-5024</td>
<td>Oct 18, 2016</td>
</tr>
<tr>
<td>Cade Holman</td>
<td>nascetur.ridiculus@vulputatedui.co.uk</td>
<td>1-162-976-4535</td>
<td>Apr 1, 2015</td>
</tr>
<tr>
<td>Rudyard Mayer</td>
<td>adipiscing@convallis.org</td>
<td>1-728-466-6663</td>
<td>Nov 16, 2016</td>
</tr>
<tr>
<td>Alexander Roberson</td>
<td>quis.massa.Mauris@egestasa.ca</td>
<td>1-247-767-3540</td>
<td>Nov 10, 2016</td>
</tr>
<tr>
<td>Calvin Golden</td>
<td>velit.Cras.lorem@mollis.org</td>
<td>1-760-667-4590</td>
<td>Feb 27, 2016</td>
</tr>
<tr>
<td>Mason Pugh</td>
<td>sed.dolor@luctuslobortisClass.com</td>
<td>1-766-402-6701</td>
<td>Jan 12, 2017</td>
</tr>
<tr>
<td>Nissim Booth</td>
<td>dignissim.pharetra@magnisdis.com</td>
<td>1-130-931-4827</td>
<td>Dec 9, 2015</td>
</tr>
<tr>
<td>Phillip Poole</td>
<td>luctus.et@ullamcorper.net</td>
<td>1-830-428-6433</td>
<td>Aug 4, 2016</td>
</tr>
<tr>
<td>Gareth Pollard</td>
<td>Mauris@nonummy.org</td>
<td>1-632-814-2661</td>
<td>Jan 9, 2017</td>
</tr>
<tr>
<td>Jacob Horne</td>
<td>scelerisque.neque@tellusAenean.edu</td>
<td>1-529-104-7213</td>
<td>Jan 24, 2016</td>
</tr>
<tr>
<td>Igor Decker</td>
<td>velit.in@libero.com</td>
<td>1-221-669-5726</td>
<td>Aug 29, 2015</td>
</tr>
<tr>
<td>Nicholas Carver</td>
<td>rutrum.non@rhoncusNullamvelit.net</td>
<td>1-519-668-4195</td>
<td>Mar 10, 2016</td>
</tr>
<tr>
<td>Colby Griffith</td>
<td>ipsum@per.co.uk</td>
<td>1-562-764-0884</td>
<td>Nov 30, 2016</td>
</tr>
<tr>
<td>Travis Head</td>
<td>Donec.est.mauris@magnamalesuadavel.co.uk</td>
<td>1-220-349-5963</td>
<td>Mar 11, 2016</td>
</tr>
<tr>
<td>Mannix Savage</td>
<td>adipiscing.lobortis@maurisMorbi.net</td>
<td>1-636-137-1798</td>
<td>Sep 26, 2015</td>
</tr>
<tr>
<td>Bernard Collier</td>
<td>vehicula.Pellentesque@laoreetipsum.ca</td>
<td>1-383-465-5772</td>
<td>Jan 14, 2016</td>
</tr>
<tr>
<td>Beck Vance</td>
<td>lacinia.orci.consectetuer@nulla.co.uk</td>
<td>1-792-259-9851</td>
<td>Feb 17, 2017</td>
</tr>
<tr>
<td>Macaulay Murray</td>
<td>vulputate.posuere@purusactellus.net</td>
<td>1-779-142-8309</td>
<td>Nov 9, 2016</td>
</tr>
<tr>
<td>Chadwick Bennett</td>
<td>eu.placerat@porttitoreros.net</td>
<td>1-640-170-8919</td>
<td>Nov 19, 2015</td>
</tr>
<tr>
<td>Benedict Joyce</td>
<td>ornare.egestas@Phasellusnulla.com</td>
<td>1-982-607-6613</td>
<td>Apr 28, 2016</td>
</tr>
<tr>
<td>Colin Rowe</td>
<td>dignissim@id.ca</td>
<td>1-225-773-8292</td>
<td>Mar 25, 2016</td>
</tr>
<tr>
<td>Brandon French</td>
<td>est@Proinsed.ca</td>
<td>1-407-645-0660</td>
<td>May 26, 2015</td>
</tr>
<tr>
<td>Neil West</td>
<td>ac.mattis@blanditcongue.net</td>
<td>1-251-843-1655</td>
<td>Jul 16, 2015</td>
</tr>
<tr>
<td>Thomas West</td>
<td>a.mi.fringilla@velest.com</td>
<td>1-786-660-6130</td>
<td>Feb 21, 2016</td>
</tr>
<tr>
<td>Lucas Bernard</td>
<td>nisl@ipsum.net</td>
<td>1-899-356-0342</td>
<td>Jan 23, 2016</td>
</tr>
<tr>
<td>Ali Reilly</td>
<td>montes@sapienNuncpulvinar.org</td>
<td>1-853-128-2109</td>
<td>Nov 19, 2015</td>
</tr>
<tr>
<td>Theodore Palmer</td>
<td>ac@lacusAliquam.com</td>
<td>1-157-854-9417</td>
<td>Mar 14, 2016</td>
</tr>
<tr>
<td>Wesley Moore</td>
<td>arcu.Nunc@cursus.co.uk</td>
<td>1-280-601-8635</td>
<td>Aug 7, 2016</td>
</tr>
<tr>
<td>Victor Cleveland</td>
<td>Mauris@idblandit.com</td>
<td>1-348-493-1317</td>
<td>Feb 1, 2017</td>
</tr>
<tr>
<td>Mason Frye</td>
<td>Donec.est.Nunc@molestieorci.ca</td>
<td>1-553-372-6872</td>
<td>Dec 14, 2016</td>
</tr>
<tr>
<td>Garth Glover</td>
<td>quis.pede.Suspendisse@euismod.com</td>
<td>1-674-742-2550</td>
<td>Aug 4, 2015</td>
</tr>
<tr>
<td>Oren Lawson</td>
<td>sed@Donecelementumlorem.net</td>
<td>1-918-545-3934</td>
<td>Nov 16, 2016</td>
</tr>
<tr>
<td>Ivor Thomas</td>
<td>arcu.Aliquam.ultrices@felis.com</td>
<td>1-618-175-6929</td>
<td>Aug 13, 2015</td>
</tr>
<tr>
<td>Kelly Workman</td>
<td>ligula@egetipsumDonec.co.uk</td>
<td>1-883-616-6383</td>
<td>Dec 23, 2016</td>
</tr>
<tr>
<td>Lance Bonner</td>
<td>a@tinciduntaliquamarcu.co.uk</td>
<td>1-365-745-4938</td>
<td>Nov 23, 2015</td>
</tr>
<tr>
<td>Thane Oneill</td>
<td>ullamcorper@mi.org</td>
<td>1-858-232-8568</td>
<td>Jan 17, 2016</td>
</tr>
<tr>
<td>Curran Whitehead</td>
<td>parturient.montes.nascetur@cursusluctus.edu</td>
<td>1-238-516-8560</td>
<td>May 4, 2016</td>
</tr>
<tr>
<td>Barry Foreman</td>
<td>justo@temporbibendumDonec.net</td>
<td>1-597-900-1913</td>
<td>Sep 25, 2016</td>
</tr>
<tr>
<td>Garth Blake</td>
<td>ipsum.Suspendisse@venenatisvel.net</td>
<td>1-843-574-0482</td>
<td>May 31, 2015</td>
</tr>
<tr>
<td>Christopher Ballard</td>
<td>vestibulum@semut.net</td>
<td>1-586-347-9206</td>
<td>Mar 8, 2017</td>
</tr>
<tr>
<td>Gareth Horne</td>
<td>senectus.et@eget.com</td>
<td>1-934-604-0841</td>
<td>Jan 10, 2016</td>
</tr>
<tr>
<td>Murphy Gould</td>
<td>augue@Curabiturvellectus.org</td>
<td>1-258-113-9485</td>
<td>Sep 4, 2016</td>
</tr>
<tr>
<td>Zephania Obrien</td>
<td>eu.ligula@pellentesque.ca</td>
<td>1-565-322-4592</td>
<td>Jun 30, 2015</td>
</tr>
<tr>
<td>Sebastian Davis</td>
<td>dictum.augue@dui.edu</td>
<td>1-596-269-3513</td>
<td>Jun 18, 2015</td>
</tr>
<tr>
<td>Deacon Rodriquez</td>
<td>enim.commodo@semegestas.ca</td>
<td>1-752-436-8434</td>
<td>Aug 25, 2015</td>
</tr>
<tr>
<td>Palmer Vaughan</td>
<td>condimentum.eget@cursusinhendrerit.org</td>
<td>1-365-105-7118</td>
<td>Sep 30, 2016</td>
</tr>
<tr>
<td>Garrett Phelps</td>
<td>Donec@placeratorci.edu</td>
<td>1-911-608-5554</td>
<td>Nov 23, 2015</td>
</tr>
<tr>
<td>Vincent Barron</td>
<td>tellus@convallisestvitae.co.uk</td>
<td>1-373-781-8939</td>
<td>Feb 19, 2017</td>
</tr>
<tr>
<td>Shad Hubbard</td>
<td>tortor.at.risus@purusmaurisa.com</td>
<td>1-563-162-7634</td>
<td>Jul 7, 2016</td>
</tr>
<tr>
<td>Todd Vazquez</td>
<td>malesuada.fringilla.est@facilisis.org</td>
<td>1-647-784-5955</td>
<td>Jul 18, 2015</td>
</tr>
<tr>
<td>Cade Mullins</td>
<td>sem.ut.cursus@sapienmolestie.com</td>
<td>1-262-815-5463</td>
<td>Apr 1, 2016</td>
</tr>
<tr>
<td>Cullen Gay</td>
<td>in.cursus@utcursus.net</td>
<td>1-447-832-2739</td>
<td>Sep 29, 2015</td>
</tr>
<tr>
<td>Chase Chambers</td>
<td>ipsum@magnaSed.com</td>
<td>1-151-663-4654</td>
<td>Aug 5, 2016</td>
</tr>
<tr>
<td>Hakeem Hammond</td>
<td>aptent.taciti@sit.ca</td>
<td>1-449-378-9773</td>
<td>May 16, 2016</td>
</tr>
<tr>
<td>Justin Stout</td>
<td>nascetur.ridiculus.mus@eu.edu</td>
<td>1-687-820-7974</td>
<td>Nov 23, 2015</td>
</tr>
<tr>
<td>Hakeem Larson</td>
<td>ultricies.dignissim@nonvestibulumnec.ca</td>
<td>1-510-600-8899</td>
<td>Aug 17, 2015</td>
</tr>
<tr>
<td>Peter Anderson</td>
<td>bibendum@Curabitur.org</td>
<td>1-250-764-1300</td>
<td>Jun 18, 2016</td>
</tr>
<tr>
<td>Marvin Preston</td>
<td>Maecenas@arcuimperdiet.co.uk</td>
<td>1-766-120-0796</td>
<td>Nov 27, 2015</td>
</tr>
<tr>
<td>Zachary Poole</td>
<td>dictum@ligulatortor.org</td>
<td>1-603-891-3134</td>
<td>Sep 21, 2015</td>
</tr>
<tr>
<td>Lawrence Berger</td>
<td>dolor.Quisque.tincidunt@nonsapienmolestie.com</td>
<td>1-261-614-8636</td>
<td>Jan 1, 2016</td>
</tr>
<tr>
<td>Carson Black</td>
<td>luctus.et@Pellentesqueutipsum.com</td>
<td>1-170-639-6825</td>
<td>Sep 9, 2015</td>
</tr>
<tr>
<td>Grady Ferguson</td>
<td>nonummy@magna.ca</td>
<td>1-445-965-4679</td>
<td>Aug 23, 2016</td>
</tr>
<tr>
<td>Stuart Johnston</td>
<td>placerat@Aliquam.ca</td>
<td>1-888-201-8554</td>
<td>Jun 16, 2015</td>
</tr>
<tr>
<td>Hoyt Thompson</td>
<td>cursus.vestibulum@InfaucibusMorbi.ca</td>
<td>1-787-909-6344</td>
<td>Nov 8, 2016</td>
</tr>
<tr>
<td>Carter George</td>
<td>aliquet@liberoProinsed.co.uk</td>
<td>1-108-298-1209</td>
<td>Sep 20, 2015</td>
</tr>
<tr>
<td>Hashim Roberson</td>
<td>aliquam.enim.nec@enim.ca</td>
<td>1-662-166-3319</td>
<td>Jun 26, 2015</td>
</tr>
<tr>
<td>Cruz Collier</td>
<td>Integer.mollis@metusIn.org</td>
<td>1-277-210-6159</td>
<td>Feb 2, 2017</td>
</tr>
<tr>
<td>Nigel Collier</td>
<td>metus@pharetraut.net</td>
<td>1-501-647-3500</td>
<td>Nov 20, 2015</td>
</tr>
<tr>
<td>Abel Hendricks</td>
<td>nec@Pellentesque.com</td>
<td>1-661-985-0463</td>
<td>Dec 19, 2015</td>
</tr>
<tr>
<td>Fulton Espinoza</td>
<td>luctus.et@sitametornare.org</td>
<td>1-396-412-6389</td>
<td>Mar 25, 2017</td>
</tr>
<tr>
<td>Otto Ramos</td>
<td>pellentesque.tellus@aliquameu.net</td>
<td>1-249-633-9976</td>
<td>Dec 21, 2016</td>
</tr>
<tr>
<td>Griffin Joyce</td>
<td>a.sollicitudin.orci@volutpatornare.net</td>
<td>1-321-798-8569</td>
<td>Oct 5, 2016</td>
</tr>
<tr>
<td>Alden Buckner</td>
<td>id.sapien.Cras@scelerisque.net</td>
<td>1-360-375-8997</td>
<td>Apr 16, 2016</td>
</tr>
<tr>
<td>Reese Hudson</td>
<td>lobortis.augue.scelerisque@velitduisemper.ca</td>
<td>1-218-544-5876</td>
<td>Nov 29, 2016</td>
</tr>
<tr>
<td>Reed Ramsey</td>
<td>arcu@acipsum.edu</td>
<td>1-624-968-2863</td>
<td>Dec 1, 2015</td>
</tr>
<tr>
<td>Arthur Blackwell</td>
<td>sodales.elit.erat@vehiculaetrutrum.ca</td>
<td>1-837-635-8180</td>
<td>Mar 21, 2017</td>
</tr>
<tbody>
</table>
<!-- Start Pagination -->
<div class='pagination-container'>
<nav>
<ul class="pagination">
<!-- Here the JS Function Will Add the Rows -->
</ul>
</nav>
</div>
<div class="rows_count">Showing 11 to 20 of 91 entries</div>
</div> <!-- End of Container -->
<!-- Developed By Javed Akhtar-->
<script>
getPagination('#table-id');
$('#maxRows').trigger('change');
function getPagination(table) {
$('#maxRows').on('change', function () {
$('.pagination').html(''); // reset pagination div
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
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').append('<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 li:first-child').addClass('active'); // add active class to the first li
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
showig_rows_count(maxRows, 1, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
$('.pagination li').on('click', function (e) { // on click each page
e.preventDefault();
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
//SHOWING ROWS NUMBER OUT OF TOTAL
showig_rows_count(maxRows, pageNum, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL
$(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
});
// end of on select change
// END OF PAGINATION
}
// SI SETTING
$(function () {
// Just to append id number for each row
default_index();
});
//ROWS SHOWING FUNCTION
function showig_rows_count(maxRows, pageNum, totalRows) {
//Default rows showing
var end_index = maxRows * pageNum;
var start_index = ((maxRows * pageNum) - maxRows) + parseFloat(1);
var string = 'Showing ' + start_index + ' to ' + end_index + ' of ' + totalRows + ' entries';
$('.rows_count').html(string);
}
// CREATING INDEX
function default_index() {
$('table tr:eq(0)').prepend('<th> ID </th>')
var id = 0;
$('table tr:gt(0)').each(function () {
id++
$(this).prepend('<td>' + id + '</td>');
});
}
// All Table search script
function FilterkeyWord_all_table() {
// Count td if you want to search on all table instead of specific column
var count = $('.table').children('tbody').children('tr:first-child').children('td').length;
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_input_all");
var input_value = document.getElementById("search_input_all").value;
filter = input.value.toLowerCase();
if (input_value != '') {
table = document.getElementById("table-id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
var flag = 0;
for (j = 0; j < count; j++) {
td = tr[i].getElementsByTagName("td")[j];
if (td) {
var td_text = td.innerHTML;
if (td.innerHTML.toLowerCase().indexOf(filter) > -1) {
//var td_text = td.innerHTML;
//td.innerHTML = 'shaban';
flag = 1;
} else {
//DO NOTHING
}
}
}
if (flag == 1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
} else {
//RESET TABLE
$('#maxRows').trigger('change');
}
}
</script>
</body>
</html>
<!-- Css File-->
body {
background-color: #eee;
}
table th, table td {
text-align: center;
}
table tr:nth-child(even) {
background-color: #e4e3e3
}
th {
background: #333;
color: #fff;
}
.pagination {
margin: 0;
}
.pagination li:hover {
cursor: pointer;
}
.header_wrap {
padding: 30px 0;
}
.num_rows {
width: 20%;
float: left;
}
.tb_search {
width: 20%;
float: right;
}
.pagination-container {
width: 70%;
float: left;
}
.rows_count {
width: 20%;
float: right;
text-align: right;
color: #999;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.pagination > li > a, .pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
JavaSCript File
<script>
getPagination('#table-id');
$('#maxRows').trigger('change');
function getPagination(table) {
$('#maxRows').on('change', function () {
$('.pagination').html(''); // reset pagination div
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
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').append('<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 li:first-child').addClass('active'); // add active class to the first li
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
showig_rows_count(maxRows, 1, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
$('.pagination li').on('click', function (e) { // on click each page
e.preventDefault();
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
//SHOWING ROWS NUMBER OUT OF TOTAL
showig_rows_count(maxRows, pageNum, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL
$(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
});
// end of on select change
// END OF PAGINATION
}
// SI SETTING
$(function () {
// Just to append id number for each row
default_index();
});
//ROWS SHOWING FUNCTION
function showig_rows_count(maxRows, pageNum, totalRows) {
//Default rows showing
var end_index = maxRows * pageNum;
var start_index = ((maxRows * pageNum) - maxRows) + parseFloat(1);
var string = 'Showing ' + start_index + ' to ' + end_index + ' of ' + totalRows + ' entries';
$('.rows_count').html(string);
}
// CREATING INDEX
function default_index() {
$('table tr:eq(0)').prepend('<th> ID </th>')
var id = 0;
$('table tr:gt(0)').each(function () {
id++
$(this).prepend('<td>' + id + '</td>');
});
}
// All Table search script
function FilterkeyWord_all_table() {
// Count td if you want to search on all table instead of specific column
var count = $('.table').children('tbody').children('tr:first-child').children('td').length;
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_input_all");
var input_value = document.getElementById("search_input_all").value;
filter = input.value.toLowerCase();
if (input_value != '') {
table = document.getElementById("table-id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
var flag = 0;
for (j = 0; j < count; j++) {
td = tr[i].getElementsByTagName("td")[j];
if (td) {
var td_text = td.innerHTML;
if (td.innerHTML.toLowerCase().indexOf(filter) > -1) {
//var td_text = td.innerHTML;
//td.innerHTML = 'shaban';
flag = 1;
} else {
//DO NOTHING
}
}
}
if (flag == 1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
} else {
//RESET TABLE
$('#maxRows').trigger('change');
}
}
</script>
No comments :
Post a Comment