Pagination Table

HTML

              
                

		<div class="container">
		<h2>Select Number Of Rows</h2>
				<div class="form-group"> 	<!--		Show Numbers Of Rows 		-->
			 		<select class  ="form-control" name="state" id="maxRows">
						 <option value="5000">Show ALL Rows</option>
						 <option value="5">5</option>
						 <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>
						</select>
			 		
			  	</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>
	<tr>
		<td>Ivan Vasquez</td>
		<td>eu.lacus.Quisque@Nunc.org</td>
		<td>1-626-851-7695</td>
		<td>Feb 23, 2016</td>
	</tr>
      </tbody>

</table>

<!--		Start Pagination -->
			<div class='pagination-container' >
				<nav>
				  <ul class="pagination">
            
            <li data-page="prev" >
								     <span> < <span class="sr-only">(current)</span></span>
								    </li>
				   <!--	Here the JS Function Will Add the Rows -->
        <li data-page="next" id="prev">
								       <span> > <span class="sr-only">(current)</span></span>
								    </li>
				  </ul>
				</nav>
			</div>

</div> <!-- 		End of Container -->



<!--  Developed By Yasser Mas -->

CSS

              
                body{

    background-color: #eee; 
}

table th , table td{
    text-align: center;
}

table tr:nth-child(even){
    background-color: #BEF2F5
}

.pagination li:hover{
    cursor: pointer;
}
		table tbody tr {
			display: none;
		}

JS

              
                          getPagination('#table-id');
					//getPagination('.table-class');
					//getPagination('table');

		  /*					PAGINATION 
		  - on change max rows select options fade out all rows gt option value mx = 5
		  - append pagination list as per numbers of rows / max rows option (20row/5= 4pages )
		  - each pagination li on click -> fade out all tr gt max rows * li num and (5*pagenum 2 = 10 rows)
		  - fade out all tr lt max rows * li num - max rows ((5*pagenum 2 = 10) - 5)
		  - fade in all tr between (maxRows*PageNum) and (maxRows*pageNum)- MaxRows 
		  */
		 

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> ID </th>');

  var id = 0;

  $('table tr:gt(0)').each(function() {
    id++;
    $(this).prepend('<td>' + id + '</td>');
  });
});

//  Developed By Yasser Mas
// yasser.mas2@gmail.com

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions