Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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>[email protected]</td>
		<td>1-636-140-1210</td>
		<td>Oct 26, 2015</td>
	</tr>
	<tr>
		<td>Kuame Parsons</td>
		<td>[email protected]</td>
		<td>1-962-122-8834</td>
		<td>Aug 2, 2015</td>
	</tr>
	<tr>
		<td>Ira Parker</td>
		<td>[email protected]</td>
		<td>1-584-906-8572</td>
		<td>Sep 15, 2015</td>
	</tr>
	<tr>
		<td>Dante Carlson</td>
		<td>[email protected]</td>
		<td>1-364-156-9666</td>
		<td>Nov 28, 2015</td>
	</tr>
	<tr>
		<td>Nathan Bernard</td>
		<td>[email protected]</td>
		<td>1-646-420-3211</td>
		<td>Aug 4, 2016</td>
	</tr>
	<tr>
		<td>Dillon Poole</td>
		<td>[email protected]</td>
		<td>1-788-762-3800</td>
		<td>Apr 25, 2016</td>
	</tr>
	<tr>
		<td>Hu Leach</td>
		<td>[email protected]</td>
		<td>1-888-617-5106</td>
		<td>Nov 3, 2015</td>
	</tr>
	<tr>
		<td>Dean Lucas</td>
		<td>[email protected]</td>
		<td>1-176-725-3287</td>
		<td>Mar 10, 2016</td>
	</tr>
	<tr>
		<td>Dorian Durham</td>
		<td>[email protected]</td>
		<td>1-867-829-4207</td>
		<td>Nov 11, 2016</td>
	</tr>
	<tr>
		<td>Roth Ward</td>
		<td>[email protected]</td>
		<td>1-539-674-6286</td>
		<td>May 4, 2015</td>
	</tr>
	<tr>
		<td>Geoffrey Gilliam</td>
		<td>[email protected]</td>
		<td>1-450-585-0087</td>
		<td>Nov 28, 2016</td>
	</tr>
	<tr>
		<td>Vance Bonner</td>
		<td>[email protected]</td>
		<td>1-746-842-1533</td>
		<td>Jul 25, 2016</td>
	</tr>
	<tr>
		<td>Castor Rivera</td>
		<td>[email protected]</td>
		<td>1-134-497-7454</td>
		<td>Dec 3, 2016</td>
	</tr>
	<tr>
		<td>Marshall Wheeler</td>
		<td>[email protected]</td>
		<td>1-709-608-3138</td>
		<td>Dec 6, 2015</td>
	</tr>
	<tr>
		<td>Porter Woods</td>
		<td>[email protected]</td>
		<td>1-797-194-5400</td>
		<td>Jul 21, 2016</td>
	</tr>
	<tr>
		<td>Dexter Barnes</td>
		<td>[email protected]</td>
		<td>1-262-180-8026</td>
		<td>Sep 1, 2016</td>
	</tr>
	<tr>
		<td>Aaron Owen</td>
		<td>[email protected]</td>
		<td>1-236-283-7422</td>
		<td>Jul 26, 2016</td>
	</tr>
	<tr>
		<td>Malachi Mcmahon</td>
		<td>[email protected]</td>
		<td>1-973-844-7994</td>
		<td>Dec 31, 2015</td>
	</tr>
	<tr>
		<td>Ivan Vasquez</td>
		<td>[email protected]</td>
		<td>1-626-851-7695</td>
		<td>Feb 23, 2016</td>
	</tr>
	<tr>
		<td>Colby Cline</td>
		<td>[email protected]</td>
		<td>1-861-773-5057</td>
		<td>Nov 11, 2015</td>
	</tr>
	<tr>
		<td>Dale Crawford</td>
		<td>[email protected]</td>
		<td>1-620-744-5242</td>
		<td>Oct 8, 2016</td>
	</tr>
	<tr>
		<td>Griffith Flowers</td>
		<td>[email protected]</td>
		<td>1-690-390-5508</td>
		<td>Sep 12, 2015</td>
	</tr>
	<tr>
		<td>Stone Morris</td>
		<td>[email protected]</td>
		<td>1-214-162-0579</td>
		<td>Jan 10, 2016</td>
	</tr>
	<tr>
		<td>Bradley Mcfarland</td>
		<td>[email protected]</td>
		<td>1-619-732-1620</td>
		<td>Oct 29, 2016</td>
	</tr>
	<tr>
		<td>Sylvester Morse</td>
		<td>[email protected]</td>
		<td>1-661-248-5024</td>
		<td>Oct 18, 2016</td>
	</tr>
	<tr>
		<td>Cade Holman</td>
		<td>[email protected]</td>
		<td>1-162-976-4535</td>
		<td>Apr 1, 2015</td>
	</tr>
	<tr>
		<td>Rudyard Mayer</td>
		<td>[email protected]</td>
		<td>1-728-466-6663</td>
		<td>Nov 16, 2016</td>
	</tr>
	<tr>
		<td>Alexander Roberson</td>
		<td>[email protected]</td>
		<td>1-247-767-3540</td>
		<td>Nov 10, 2016</td>
	</tr>
	<tr>
		<td>Calvin Golden</td>
		<td>[email protected]</td>
		<td>1-760-667-4590</td>
		<td>Feb 27, 2016</td>
	</tr>
	<tr>
		<td>Mason Pugh</td>
		<td>[email protected]</td>
		<td>1-766-402-6701</td>
		<td>Jan 12, 2017</td>
	</tr>
	<tr>
		<td>Nissim Booth</td>
		<td>[email protected]</td>
		<td>1-130-931-4827</td>
		<td>Dec 9, 2015</td>
	</tr>
	<tr>
		<td>Phillip Poole</td>
		<td>[email protected]</td>
		<td>1-830-428-6433</td>
		<td>Aug 4, 2016</td>
	</tr>
	<tr>
		<td>Gareth Pollard</td>
		<td>[email protected]</td>
		<td>1-632-814-2661</td>
		<td>Jan 9, 2017</td>
	</tr>
	<tr>
		<td>Jacob Horne</td>
		<td>[email protected]</td>
		<td>1-529-104-7213</td>
		<td>Jan 24, 2016</td>
	</tr>
	<tr>
		<td>Igor Decker</td>
		<td>[email protected]</td>
		<td>1-221-669-5726</td>
		<td>Aug 29, 2015</td>
	</tr>
	<tr>
		<td>Nicholas Carver</td>
		<td>[email protected]</td>
		<td>1-519-668-4195</td>
		<td>Mar 10, 2016</td>
	</tr>
	<tr>
		<td>Colby Griffith</td>
		<td>[email protected]</td>
		<td>1-562-764-0884</td>
		<td>Nov 30, 2016</td>
	</tr>
	<tr>
		<td>Travis Head</td>
		<td>[email protected]</td>
		<td>1-220-349-5963</td>
		<td>Mar 11, 2016</td>
	</tr>
	<tr>
		<td>Mannix Savage</td>
		<td>[email protected]</td>
		<td>1-636-137-1798</td>
		<td>Sep 26, 2015</td>
	</tr>
	<tr>
		<td>Bernard Collier</td>
		<td>[email protected]</td>
		<td>1-383-465-5772</td>
		<td>Jan 14, 2016</td>
	</tr>
	<tr>
		<td>Beck Vance</td>
		<td>[email protected]</td>
		<td>1-792-259-9851</td>
		<td>Feb 17, 2017</td>
	</tr>
	<tr>
		<td>Macaulay Murray</td>
		<td>[email protected]</td>
		<td>1-779-142-8309</td>
		<td>Nov 9, 2016</td>
	</tr>
	<tr>
		<td>Chadwick Bennett</td>
		<td>[email protected]</td>
		<td>1-640-170-8919</td>
		<td>Nov 19, 2015</td>
	</tr>
	<tr>
		<td>Benedict Joyce</td>
		<td>[email protected]</td>
		<td>1-982-607-6613</td>
		<td>Apr 28, 2016</td>
	</tr>
	<tr>
		<td>Colin Rowe</td>
		<td>[email protected]</td>
		<td>1-225-773-8292</td>
		<td>Mar 25, 2016</td>
	</tr>
	<tr>
		<td>Brandon French</td>
		<td>[email protected]</td>
		<td>1-407-645-0660</td>
		<td>May 26, 2015</td>
	</tr>
	<tr>
		<td>Neil West</td>
		<td>[email protected]</td>
		<td>1-251-843-1655</td>
		<td>Jul 16, 2015</td>
	</tr>
	<tr>
		<td>Thomas West</td>
		<td>[email protected]</td>
		<td>1-786-660-6130</td>
		<td>Feb 21, 2016</td>
	</tr>
	<tr>
		<td>Lucas Bernard</td>
		<td>[email protected]</td>
		<td>1-899-356-0342</td>
		<td>Jan 23, 2016</td>
	</tr>
	<tr>
		<td>Ali Reilly</td>
		<td>[email protected]</td>
		<td>1-853-128-2109</td>
		<td>Nov 19, 2015</td>
	</tr>
	<tr>
		<td>Theodore Palmer</td>
		<td>[email protected]</td>
		<td>1-157-854-9417</td>
		<td>Mar 14, 2016</td>
	</tr>
	<tr>
		<td>Wesley Moore</td>
		<td>[email protected]</td>
		<td>1-280-601-8635</td>
		<td>Aug 7, 2016</td>
	</tr>
	<tr>
		<td>Victor Cleveland</td>
		<td>[email protected]</td>
		<td>1-348-493-1317</td>
		<td>Feb 1, 2017</td>
	</tr>
	<tr>
		<td>Mason Frye</td>
		<td>[email protected]</td>
		<td>1-553-372-6872</td>
		<td>Dec 14, 2016</td>
	</tr>
	<tr>
		<td>Garth Glover</td>
		<td>[email protected]</td>
		<td>1-674-742-2550</td>
		<td>Aug 4, 2015</td>
	</tr>
	<tr>
		<td>Oren Lawson</td>
		<td>[email protected]</td>
		<td>1-918-545-3934</td>
		<td>Nov 16, 2016</td>
	</tr>
	<tr>
		<td>Ivor Thomas</td>
		<td>[email protected]</td>
		<td>1-618-175-6929</td>
		<td>Aug 13, 2015</td>
	</tr>
	<tr>
		<td>Kelly Workman</td>
		<td>[email protected]</td>
		<td>1-883-616-6383</td>
		<td>Dec 23, 2016</td>
	</tr>
	<tr>
		<td>Lance Bonner</td>
		<td>[email protected]</td>
		<td>1-365-745-4938</td>
		<td>Nov 23, 2015</td>
	</tr>
	<tr>
		<td>Thane Oneill</td>
		<td>[email protected]</td>
		<td>1-858-232-8568</td>
		<td>Jan 17, 2016</td>
	</tr>
	<tr>
		<td>Curran Whitehead</td>
		<td>[email protected]</td>
		<td>1-238-516-8560</td>
		<td>May 4, 2016</td>
	</tr>
	<tr>
		<td>Barry Foreman</td>
		<td>[email protected]</td>
		<td>1-597-900-1913</td>
		<td>Sep 25, 2016</td>
	</tr>
	<tr>
		<td>Garth Blake</td>
		<td>[email protected]</td>
		<td>1-843-574-0482</td>
		<td>May 31, 2015</td>
	</tr>
	<tr>
		<td>Christopher Ballard</td>
		<td>[email protected]</td>
		<td>1-586-347-9206</td>
		<td>Mar 8, 2017</td>
	</tr>
	<tr>
		<td>Gareth Horne</td>
		<td>[email protected]</td>
		<td>1-934-604-0841</td>
		<td>Jan 10, 2016</td>
	</tr>
	<tr>
		<td>Murphy Gould</td>
		<td>[email protected]</td>
		<td>1-258-113-9485</td>
		<td>Sep 4, 2016</td>
	</tr>
	<tr>
		<td>Zephania Obrien</td>
		<td>[email protected]</td>
		<td>1-565-322-4592</td>
		<td>Jun 30, 2015</td>
	</tr>
	<tr>
		<td>Sebastian Davis</td>
		<td>[email protected]</td>
		<td>1-596-269-3513</td>
		<td>Jun 18, 2015</td>
	</tr>
	<tr>
		<td>Deacon Rodriquez</td>
		<td>[email protected]</td>
		<td>1-752-436-8434</td>
		<td>Aug 25, 2015</td>
	</tr>
	<tr>
		<td>Palmer Vaughan</td>
		<td>[email protected]</td>
		<td>1-365-105-7118</td>
		<td>Sep 30, 2016</td>
	</tr>
	<tr>
		<td>Garrett Phelps</td>
		<td>[email protected]</td>
		<td>1-911-608-5554</td>
		<td>Nov 23, 2015</td>
	</tr>
	<tr>
		<td>Vincent Barron</td>
		<td>[email protected]</td>
		<td>1-373-781-8939</td>
		<td>Feb 19, 2017</td>
	</tr>
	<tr>
		<td>Shad Hubbard</td>
		<td>[email protected]</td>
		<td>1-563-162-7634</td>
		<td>Jul 7, 2016</td>
	</tr>
	<tr>
		<td>Todd Vazquez</td>
		<td>[email protected]</td>
		<td>1-647-784-5955</td>
		<td>Jul 18, 2015</td>
	</tr>
	<tr>
		<td>Cade Mullins</td>
		<td>[email protected]</td>
		<td>1-262-815-5463</td>
		<td>Apr 1, 2016</td>
	</tr>
	<tr>
		<td>Cullen Gay</td>
		<td>[email protected]</td>
		<td>1-447-832-2739</td>
		<td>Sep 29, 2015</td>
	</tr>
	<tr>
		<td>Chase Chambers</td>
		<td>[email protected]</td>
		<td>1-151-663-4654</td>
		<td>Aug 5, 2016</td>
	</tr>
	<tr>
		<td>Hakeem Hammond</td>
		<td>[email protected]</td>
		<td>1-449-378-9773</td>
		<td>May 16, 2016</td>
	</tr>
	<tr>
		<td>Justin Stout</td>
		<td>[email protected]</td>
		<td>1-687-820-7974</td>
		<td>Nov 23, 2015</td>
	</tr>
	<tr>
		<td>Hakeem Larson</td>
		<td>[email protected]</td>
		<td>1-510-600-8899</td>
		<td>Aug 17, 2015</td>
	</tr>
	<tr>
		<td>Peter Anderson</td>
		<td>[email protected]</td>
		<td>1-250-764-1300</td>
		<td>Jun 18, 2016</td>
	</tr>
	<tr>
		<td>Marvin Preston</td>
		<td>[email protected]</td>
		<td>1-766-120-0796</td>
		<td>Nov 27, 2015</td>
	</tr>
	<tr>
		<td>Zachary Poole</td>
		<td>[email protected]</td>
		<td>1-603-891-3134</td>
		<td>Sep 21, 2015</td>
	</tr>
	<tr>
		<td>Lawrence Berger</td>
		<td>[email protected]</td>
		<td>1-261-614-8636</td>
		<td>Jan 1, 2016</td>
	</tr>
	<tr>
		<td>Carson Black</td>
		<td>[email protected]</td>
		<td>1-170-639-6825</td>
		<td>Sep 9, 2015</td>
	</tr>
	<tr>
		<td>Grady Ferguson</td>
		<td>[email protected]</td>
		<td>1-445-965-4679</td>
		<td>Aug 23, 2016</td>
	</tr>
	<tr>
		<td>Stuart Johnston</td>
		<td>[email protected]</td>
		<td>1-888-201-8554</td>
		<td>Jun 16, 2015</td>
	</tr>
	<tr>
		<td>Hoyt Thompson</td>
		<td>[email protected]</td>
		<td>1-787-909-6344</td>
		<td>Nov 8, 2016</td>
	</tr>
	<tr>
		<td>Carter George</td>
		<td>[email protected]</td>
		<td>1-108-298-1209</td>
		<td>Sep 20, 2015</td>
	</tr>
	<tr>
		<td>Hashim Roberson</td>
		<td>[email protected]</td>
		<td>1-662-166-3319</td>
		<td>Jun 26, 2015</td>
	</tr>
	<tr>
		<td>Cruz Collier</td>
		<td>[email protected]</td>
		<td>1-277-210-6159</td>
		<td>Feb 2, 2017</td>
	</tr>
	<tr>
		<td>Nigel Collier</td>
		<td>[email protected]</td>
		<td>1-501-647-3500</td>
		<td>Nov 20, 2015</td>
	</tr>
	<tr>
		<td>Abel Hendricks</td>
		<td>[email protected]</td>
		<td>1-661-985-0463</td>
		<td>Dec 19, 2015</td>
	</tr>
	<tr>
		<td>Fulton Espinoza</td>
		<td>[email protected]</td>
		<td>1-396-412-6389</td>
		<td>Mar 25, 2017</td>
	</tr>
	<tr>
		<td>Otto Ramos</td>
		<td>[email protected]</td>
		<td>1-249-633-9976</td>
		<td>Dec 21, 2016</td>
	</tr>
	<tr>
		<td>Griffin Joyce</td>
		<td>[email protected]</td>
		<td>1-321-798-8569</td>
		<td>Oct 5, 2016</td>
	</tr>
	<tr>
		<td>Alden Buckner</td>
		<td>[email protected]</td>
		<td>1-360-375-8997</td>
		<td>Apr 16, 2016</td>
	</tr>
	<tr>
		<td>Reese Hudson</td>
		<td>[email protected]</td>
		<td>1-218-544-5876</td>
		<td>Nov 29, 2016</td>
	</tr>
	<tr>
		<td>Reed Ramsey</td>
		<td>[email protected]</td>
		<td>1-624-968-2863</td>
		<td>Dec 1, 2015</td>
	</tr>
	<tr>
		<td>Arthur Blackwell</td>
		<td>[email protected]</td>
		<td>1-837-635-8180</td>
		<td>Mar 21, 2017</td>
	</tr>
	<tr>
		<td>Ivan Vasquez</td>
		<td>[email protected]</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
// [email protected]

              
            
!
999px

Console