NOTE!

Triggered Events

Demo




First Prev Next Last
Name Major Sex English Japanese Calculus Geometry
Name Major Sex English Japanese Calculus Geometry
Student01 Languages male 80 70 75 80
Student02 Mathematics male 90 88 100 90
Student03 Languages female 85 95 80 85
Student04 Languages male 60 55 100 100
Student05 Languages female 68 80 95 80
Student06 Mathematics male 100 99 100 90
Student07 Mathematics male 85 68 90 90
Student08 Languages male 100 90 90 85
Student09 Mathematics male 80 50 65 75
Student10 Languages male 85 100 100 90
Student11 Languages male 86 85 100 100
Student12 Mathematics female 100 75 70 85
Student13 Languages female 100 80 100 90
Student14 Languages female 50 45 55 90
Student15 Languages male 95 35 100 90
Student16 Languages female 100 50 30 70
Student17 Languages female 80 100 55 65
Student18 Mathematics male 30 49 55 75
Student19 Languages male 68 90 88 70
Student20 Mathematics male 40 45 40 80
Student21 Languages male 50 45 100 100
Student22 Mathematics male 100 99 100 90
Student23Mathematicsmale8277079
Student24Languagesfemale100911382
Student25Mathematicsmale22968253
Student26Languagesfemale37295659
Student27Mathematicsmale86826923
Student28Languagesfemale4425431
Student29Mathematicsmale77472238
Student30Languagesfemale19352310
Student31Mathematicsmale90271750
Student32Languagesfemale60753338
Student33Mathematicsmale4313715
Student34Languagesfemale77978144
Student35Mathematicsmale5815195
Student36Languagesfemale70617094
Student37Mathematicsmale6036184
Student38Languagesfemale6339011
Student39Mathematicsmale50463238
Student40Languagesfemale5175253
Student41Mathematicsmale43342878
Student42Languagesfemale11896095
Student43Mathematicsmale48921888
Student44Languagesfemale8225973
Student45Mathematicsmale91733739
Student46Languagesfemale481210
Student47Mathematicsmale8910611
Student48Languagesfemale90322118
Student49Mathematicsmale42494972
Student50Languagesfemale56376754
First Prev Next Last

Javascript


	

CSS

/* pager wrapper, div */
.tablesorter-pager {
  padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.tablesorter-pager {
  background-color: #e6eeee;
  margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.tablesorter-pager img {
  vertical-align: middle;
  margin-right: 2px;
  cursor: pointer;
}

/* pager output text */
.tablesorter-pager .pagedisplay {
  padding: 0 5px 0 5px;
  width: 50px;
  text-align: center;
}

/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
  margin: 0;
  padding: 0;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.tablesorter-pager.disabled {
  display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.tablesorter-pager .disabled {
  /* visibility: hidden */
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default;
}

HTML

<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>

<!-- Tablesorter: pager widget -->
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
<script src="js/widget-pager.js"></script>

<table class="tablesorter">
<!-- view page source to see the entire table -->
</table>

<!-- pager -->
<div id="pager" class="pager">
  <form>
    <img src="first.png" class="first"/>
    <img src="prev.png" class="prev"/>
    <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
    <img src="next.png" class="next"/>
    <img src="last.png" class="last"/>
    <select class="pagesize">
      <option selected="selected" value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
    </select>
  </form>
</div>

Pager Change Log