<!DOCTYPE html>
<html>
<head>
<title>Example of TablePagination</title>
<style>
table, table td{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
color: #202020;
width: 700px;
}
</style>
<script>
$(function() {
var paginate = new TablePagination();
//......element(s), rows/page, starting page
paginate.init('#dataTable', 10, 2);
});
function TablePagination() {
var $table;
var currentPage = 1;
this.init = function(ptr, count, startPage, createButtons) {
var obj = this;
if (typeof ptr == "string") {
$table = $(ptr);
} else if (typeof ptr == "object") {
$table = ptr;
}
if (startPage != undefined && parseInt(startPage) > 0) {
currentPage = startPage;
}
if (createButtons !== false) {
$table.after('' +
'<span style="color: blue; cursor: pointer;" class="TablePagination_previous">previous ' + count + '</span>' +
' | page <span class="TablePagination_currentPage">' + currentPage + '</span> | ' +
'<span style="color: blue; cursor: pointer;" class="TablePagination_next">next ' + count + '</span>' +
'');
}
$('.TablePagination_previous').click(function() {
if (currentPage > 1) {
currentPage--;
obj.show(currentPage);
$('.TablePagination_currentPage').text(currentPage);
}
});
$('.TablePagination_next').click(function() {
if (currentPage < $table.find('tr').length / count) {
currentPage++;
obj.show(currentPage);
$('.TablePagination_currentPage').text(currentPage);
}
});
obj.makePages(count);
obj.show(currentPage);
};
this.makePages = function(count) {
var i = 0;
$table.find('tr').each(function() {
if ($(this).index() % count == 0) {
i++;
}
$(this).addClass('TablePagination_page' + i);
});
};
this.show = function(page) {
$table.find('tr').hide();
$('.TablePagination_page' + page).show();
};
}
</script>
</head>
<body>
<h2>Example of Base Functionality using TablePagination</h2>
<table id="dataTable">
<tr>
<td>1</td>
<td>Jessamine</td>
<td>Green</td>
<td>Newcastle-upon-Tyne</td>
<td>Czech Republic</td>
</tr>
<tr>
<td>2</td>
<td>Teagan</td>
<td>Finch</td>
<td>Satara</td>
<td>Kuwait</td>
</tr>
<tr>
<td>3</td>
<td>Bianca</td>
<td>Ingram</td>
<td>Łódź</td>
<td>United States Minor Outlying Islands</td>
</tr>
<tr>
<td>4</td>
<td>Melissa</td>
<td>Chen</td>
<td>Opole</td>
<td>Brunei</td>
</tr>
<tr>
<td>5</td>
<td>Vivian</td>
<td>Murphy</td>
<td>Corbais</td>
<td>Albania</td>
</tr>
<tr>
<td>6</td>
<td>Nora</td>
<td>Quinn</td>
<td>Hamilton</td>
<td>Latvia</td>
</tr>
<tr>
<td>7</td>
<td>Lillian</td>
<td>Love</td>
<td>Brusson</td>
<td>Guatemala</td>
</tr>
<tr>
<td>8</td>
<td>Melodie</td>
<td>Berry</td>
<td>Wolfenbttel</td>
<td>Antarctica</td>
</tr>
<tr>
<td>9</td>
<td>Leilani</td>
<td>Howard</td>
<td>Francavilla in Sinni</td>
<td>Haiti</td>
</tr>
<tr>
<td>10</td>
<td>Lance</td>
<td>Allison</td>
<td>Nanaimo</td>
<td>Isle of Man</td>
</tr>
<tr>
<td>11</td>
<td>Mariam</td>
<td>Brennan</td>
<td>Umbertide</td>
<td>Gibraltar</td>
</tr>
<tr>
<td>12</td>
<td>Dahlia</td>
<td>Frederick</td>
<td>Queanbeyan</td>
<td>Gibraltar</td>
</tr>
<tr>
<td>13</td>
<td>Shelly</td>
<td>Whitaker</td>
<td>Santa Cruz de Tenerife</td>
<td>Cameroon</td>
</tr>
<tr>
<td>14</td>
<td>Stuart</td>
<td>Cochran</td>
<td>Awka</td>
<td>Lithuania</td>
</tr>
<tr>
<td>15</td>
<td>Vincent</td>
<td>Sharpe</td>
<td>Gasteiz</td>
<td>Nigeria</td>
</tr>
<tr>
<td>16</td>
<td>Price</td>
<td>Zimmerman</td>
<td>King Township</td>
<td>Kenya</td>
</tr>
<tr>
<td>17</td>
<td>Margaret</td>
<td>King</td>
<td>Bath</td>
<td>Dominican Republic</td>
</tr>
<tr>
<td>18</td>
<td>Maryam</td>
<td>Odom</td>
<td>Tropea</td>
<td>Tokelau</td>
</tr>
<tr>
<td>19</td>
<td>Keane</td>
<td>Hampton</td>
<td>Geelong</td>
<td>Aruba</td>
</tr>
<tr>
<td>20</td>
<td>Julian</td>
<td>Hester</td>
<td>Raymond</td>
<td>El Salvador</td>
</tr>
<tr>
<td>21</td>
<td>Hanna</td>
<td>Melendez</td>
<td>Ulloa (Barrial)</td>
<td>Bahamas</td>
</tr>
<tr>
<td>22</td>
<td>Michael</td>
<td>Howell</td>
<td>Neustrelitz</td>
<td>Cape Verde</td>
</tr>
<tr>
<td>23</td>
<td>Liberty</td>
<td>Langley</td>
<td>Attimis</td>
<td>United States Minor Outlying Islands</td>
</tr>
<tr>
<td>24</td>
<td>Adam</td>
<td>Blevins</td>
<td>Bad Drkheim</td>
<td>Panama</td>
</tr>
<tr>
<td>25</td>
<td>Rae</td>
<td>Allison</td>
<td>Torgny</td>
<td>Panama</td>
</tr>
<tr>
<td>26</td>
<td>Urielle</td>
<td>Guzman</td>
<td>Chtelet</td>
<td>Tajikistan</td>
</tr>
<tr>
<td>27</td>
<td>Echo</td>
<td>Spencer</td>
<td>Mackay</td>
<td>Colombia</td>
</tr>
<tr>
<td>28</td>
<td>Hyatt</td>
<td>Warner</td>
<td>Ambattur</td>
<td>Albania</td>
</tr>
<tr>
<td>29</td>
<td>Quemby</td>
<td>Witt</td>
<td>Terni</td>
<td>Bosnia and Herzegovina</td>
</tr>
<tr>
<td>30</td>
<td>Wyatt</td>
<td>Sanchez</td>
<td>Hrouxville</td>
<td>Turkmenistan</td>
</tr>
<tr>
<td>31</td>
<td>Joshua</td>
<td>Snyder</td>
<td>Sauris</td>
<td>Georgia</td>
</tr>
<tr>
<td>32</td>
<td>Kiara</td>
<td>Pearson</td>
<td>Ludhiana</td>
<td>Uganda</td>
</tr>
<tr>
<td>33</td>
<td>Callie</td>
<td>Gates</td>
<td>Dunbar</td>
<td>Algeria</td>
</tr>
<tr>
<td>34</td>
<td>Yetta</td>
<td>Jordan</td>
<td>Cabras</td>
<td>Swaziland</td>
</tr>
<tr>
<td>35</td>
<td>Medge</td>
<td>Figueroa</td>
<td>Lampernisse</td>
<td>Equatorial Guinea</td>
</tr>
<tr>
<td>36</td>
<td>Lacy</td>
<td>Gillespie</td>
<td>Newbury</td>
<td>Switzerland</td>
</tr>
<tr>
<td>37</td>
<td>Alfonso</td>
<td>Neal</td>
<td>Dudley</td>
<td>Angola</td>
</tr>
<tr>
<td>38</td>
<td>Genevieve</td>
<td>Cohen</td>
<td>Wangaratta</td>
<td>Saudi Arabia</td>
</tr>
<tr>
<td>39</td>
<td>Zeus</td>
<td>Blackwell</td>
<td>Armo</td>
<td>Samoa</td>
</tr>
<tr>
<td>40</td>
<td>Lee</td>
<td>Matthews</td>
<td>Vorst</td>
<td>Mauritania</td>
</tr>
<tr>
<td>41</td>
<td>Kyla</td>
<td>Padilla</td>
<td>Jonesboro</td>
<td>Ukraine</td>
</tr>
<tr>
<td>42</td>
<td>Ingrid</td>
<td>Wiley</td>
<td>Plauen</td>
<td>Ukraine</td>
</tr>
<tr>
<td>43</td>
<td>Zephr</td>
<td>Snider</td>
<td>Zamość</td>
<td>Korea, North</td>
</tr>
<tr>
<td>44</td>
<td>Ryder</td>
<td>Kane</td>
<td>Çermik</td>
<td>Bermuda</td>
</tr>
<tr>
<td>45</td>
<td>Otto</td>
<td>Hull</td>
<td>Windsor</td>
<td>Guadeloupe</td>
</tr>
<tr>
<td>46</td>
<td>Mikayla</td>
<td>Miranda</td>
<td>Glasgow</td>
<td>Bangladesh</td>
</tr>
<tr>
<td>47</td>
<td>Jade</td>
<td>Carson</td>
<td>Erciş</td>
<td>Tajikistan</td>
</tr>
<tr>
<td>48</td>
<td>Mallory</td>
<td>Foster</td>
<td>Rangiora</td>
<td>Barbados</td>
</tr>
<tr>
<td>49</td>
<td>Halla</td>
<td>West</td>
<td>Asse</td>
<td>Macao</td>
</tr>
<tr>
<td>50</td>
<td>Emery</td>
<td>Forbes</td>
<td>Deline</td>
<td>Barbados</td>
</tr>
<tr>
<td>51</td>
<td>Debra</td>
<td>Livingston</td>
<td>Toowoomba</td>
<td>Antigua and Barbuda</td>
</tr>
<tr>
<td>52</td>
<td>Zia</td>
<td>Barry</td>
<td>Curitiba</td>
<td>Paraguay</td>
</tr>
<tr>
<td>53</td>
<td>Conan</td>
<td>Henderson</td>
<td>Tufo</td>
<td>San Marino</td>
</tr>
<tr>
<td>54</td>
<td>Ezra</td>
<td>Ramos</td>
<td>Thorn</td>
<td>Tuvalu</td>
</tr>
<tr>
<td>55</td>
<td>Noel</td>
<td>Jacobs</td>
<td>Municipal District</td>
<td>Norfolk Island</td>
</tr>
<tr>
<td>56</td>
<td>Anthony</td>
<td>Dyer</td>
<td>Warrnambool</td>
<td>France</td>
</tr>
<tr>
<td>57</td>
<td>Acton</td>
<td>Velez</td>
<td>Tirrases</td>
<td>Uganda</td>
</tr>
<tr>
<td>58</td>
<td>Nissim</td>
<td>Greer</td>
<td>Courcelles</td>
<td>Djibouti</td>
</tr>
<tr>
<td>59</td>
<td>Nasim</td>
<td>Howard</td>
<td>Teltow</td>
<td>Saint Helena, Ascension and Tristan da Cunha</td>
</tr>
<tr>
<td>60</td>
<td>Sheila</td>
<td>Church</td>
<td>Mayerthorpe</td>
<td>Laos</td>
</tr>
<tr>
<td>61</td>
<td>Barry</td>
<td>Alvarez</td>
<td>Whitby</td>
<td>Costa Rica</td>
</tr>
<tr>
<td>62</td>
<td>Charles</td>
<td>Love</td>
<td>Cincinnati</td>
<td>Mozambique</td>
</tr>
<tr>
<td>63</td>
<td>Sarah</td>
<td>Salazar</td>
<td>Luttre</td>
<td>Aruba</td>
</tr>
<tr>
<td>64</td>
<td>Diana</td>
<td>Hudson</td>
<td>Völkermarkt</td>
<td>Panama</td>
</tr>
<tr>
<td>65</td>
<td>Sloane</td>
<td>Cote</td>
<td>Burntisland</td>
<td>Saint Vincent and The Grenadines</td>
</tr>
<tr>
<td>66</td>
<td>Sade</td>
<td>Roberts</td>
<td>Jasper</td>
<td>Guinea</td>
</tr>
<tr>
<td>67</td>
<td>Amethyst</td>
<td>Velazquez</td>
<td>Paradise</td>
<td>Cayman Islands</td>
</tr>
<tr>
<td>68</td>
<td>Amanda</td>
<td>Bird</td>
<td>Poucet</td>
<td>Mauritania</td>
</tr>
<tr>
<td>69</td>
<td>Brody</td>
<td>Newman</td>
<td>Opgrimbie</td>
<td>Virgin Islands, United States</td>
</tr>
<tr>
<td>70</td>
<td>Jolene</td>
<td>Cannon</td>
<td>Tarragona</td>
<td>Peru</td>
</tr>
<tr>
<td>71</td>
<td>Imelda</td>
<td>Sloan</td>
<td>Algeciras</td>
<td>Brunei</td>
</tr>
<tr>
<td>72</td>
<td>Catherine</td>
<td>Stone</td>
<td>Cariboo Regional District</td>
<td>French Polynesia</td>
</tr>
<tr>
<td>73</td>
<td>Lani</td>
<td>Sharpe</td>
<td>Guirsch</td>
<td>Liberia</td>
</tr>
<tr>
<td>74</td>
<td>Doris</td>
<td>Stafford</td>
<td>Pretoro</td>
<td>Falkland Islands</td>
</tr>
<tr>
<td>75</td>
<td>Hillary</td>
<td>Mcgee</td>
<td>Montemilone</td>
<td>Armenia</td>
</tr>
<tr>
<td>76</td>
<td>Adrian</td>
<td>Mcknight</td>
<td>Pointe-Claire</td>
<td>Italy</td>
</tr>
<tr>
<td>77</td>
<td>Xena</td>
<td>Burnett</td>
<td>Alassio</td>
<td>Vanuatu</td>
</tr>
<tr>
<td>78</td>
<td>Melvin</td>
<td>Booker</td>
<td>Annapolis Royal</td>
<td>Monaco</td>
</tr>
<tr>
<td>79</td>
<td>Aimee</td>
<td>Peterson</td>
<td>Eugene</td>
<td>Andorra</td>
</tr>
<tr>
<td>80</td>
<td>Lacey</td>
<td>Pennington</td>
<td>Hudson Bay</td>
<td>Turkmenistan</td>
</tr>
<tr>
<td>81</td>
<td>Kelly</td>
<td>Morrow</td>
<td>Weyburn</td>
<td>Togo</td>
</tr>
<tr>
<td>82</td>
<td>Maya</td>
<td>Hahn</td>
<td>Fort Wayne</td>
<td>Svalbard and Jan Mayen Islands</td>
</tr>
<tr>
<td>83</td>
<td>Leah</td>
<td>Crawford</td>
<td>Hannche</td>
<td>Holy See (Vatican City State)</td>
</tr>
<tr>
<td>84</td>
<td>Kevin</td>
<td>Holland</td>
<td>Kalken</td>
<td>Bermuda</td>
</tr>
<tr>
<td>85</td>
<td>Igor</td>
<td>Barnett</td>
<td>San Fratello</td>
<td>Brazil</td>
</tr>
<tr>
<td>86</td>
<td>Lars</td>
<td>Garcia</td>
<td>Felixstowe</td>
<td>Åland Islands</td>
</tr>
<tr>
<td>87</td>
<td>Rae</td>
<td>Giles</td>
<td>Taber</td>
<td>Tunisia</td>
</tr>
<tr>
<td>88</td>
<td>Zephr</td>
<td>Mann</td>
<td>Soye</td>
<td>Philippines</td>
</tr>
<tr>
<td>89</td>
<td>Sybill</td>
<td>Sampson</td>
<td>Gelsenkirchen</td>
<td>Niue</td>
</tr>
<tr>
<td>90</td>
<td>Noel</td>
<td>Vega</td>
<td>Grand Falls</td>
<td>Macedonia</td>
</tr>
<tr>
<td>91</td>
<td>Hannah</td>
<td>Stevens</td>
<td>Paupisi</td>
<td>Tuvalu</td>
</tr>
<tr>
<td>92</td>
<td>Sebastian</td>
<td>Beach</td>
<td>Biała Podlaska</td>
<td>Bouvet Island</td>
</tr>
<tr>
<td>93</td>
<td>Gabriel</td>
<td>Day</td>
<td>Cannole</td>
<td>Netherlands</td>
</tr>
<tr>
<td>94</td>
<td>Abra</td>
<td>Koch</td>
<td>San Jose</td>
<td>Cocos (Keeling) Islands</td>
</tr>
<tr>
<td>95</td>
<td>Cody</td>
<td>Mcconnell</td>
<td>Dandenong</td>
<td>Suriname</td>
</tr>
<tr>
<td>96</td>
<td>Coby</td>
<td>Hall</td>
<td>Alexandra</td>
<td>Poland</td>
</tr>
<tr>
<td>97</td>
<td>Edan</td>
<td>Juarez</td>
<td>Heidenheim</td>
<td>Guinea-Bissau</td>
</tr>
<tr>
<td>98</td>
<td>Joseph</td>
<td>Doyle</td>
<td>Port Alice</td>
<td>United Arab Emirates</td>
</tr>
<tr>
<td>99</td>
<td>Carly</td>
<td>Boyer</td>
<td>Solesino</td>
<td>Kuwait</td>
</tr>
<tr>
<td>100</td>
<td>Dieter</td>
<td>Carroll</td>
<td>Oliver</td>
<td>Cuba</td>
</tr>
</table>
</body>
</html>
|
Download
