File: example.html

Recommend this page to a friend!
  Classes of Jackson Knowlton   JavaScript Table Pagination   example.html   Download  
File: example.html
Role: Example script
Content type: text/plain
Description: example file
Class: JavaScript Table Pagination
Show paginated tables with limited number of rows
Author: By
Last change:
Date: 8 years ago
Size: 17,914 bytes
 

Contents

Class file image Download
<!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>' + '&nbsp; | page <span class="TablePagination_currentPage">' + currentPage + '</span> | &nbsp;' + '<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>&#321;ód&#378;</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&#347;&#263;</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&#351;</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&#322;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>