The wijpager widget allows you to create a paged table to save screen real estate while creating a clean, paged interface. See the Pager > Paged Table sample of the Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/pager/PagedTable .
<body>
tags of the page.
<div id="pager">
</div>
<table class="ui-widget ui-widget-content" rules="all" id="pagedTable">
<thead class="ui-widget-header">
<tr>
<td> </td><th scope="col">Company Name</th><th scope="col">Contact Name</th><th scope="col">Contact Title</th><th scope="col">Address</th><th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td>
</tr>
<tr>
<td>1</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td><td>Owner</td><td>Avda. de la Constitución 2222</td><td>México D.F.</td>
</tr>
<tr>
<td>2</td><td>Antonio Moreno Taquería</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>México D.F.</td>
</tr>
<tr>
<td>3</td><td>Around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>London</td>
</tr>
<tr>
<td>4</td><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Order Administrator</td><td>Berguvsvägen 8</td><td>Luleå</td>
</tr>
<tr>
<td>5</td><td>Blauer See Delikatessen</td><td>Hanna Moos</td><td>Sales Representative</td><td>Forsterstr. 57</td><td>Mannheim</td>
</tr>
<tr>
<td>6</td><td>Blondel père et fils</td><td>Frédérique Citeaux</td><td>Marketing Manager</td><td>24, place Kléber</td><td>Strasbourg</td>
</tr>
<tr>
<td>7</td><td>Bólido Comidas preparadas</td><td>Martín Sommer</td><td>Owner</td><td>C/ Araquil, 67</td><td>Madrid</td>
</tr>
<tr>
<td>8</td><td>Bon app'</td><td>Laurence Lebihan</td><td>Owner</td><td>12, rue des Bouchers</td><td>Marseille</td>
</tr>
<tr>
<td>9</td><td>Bottom-Dollar Markets</td><td>Elizabeth Lincoln</td><td>Accounting Manager</td><td>23 Tsawassen Blvd.</td><td>Tsawassen</td>
</tr>
<tr>
<td>10</td><td>B's Beverages</td><td>Victoria Ashworth</td><td>Sales Representative</td><td>Fauntleroy Circus</td><td>London</td>
</tr>
<tr>
<td>11</td><td>Cactus Comidas para llevar</td><td>Patricio Simpson</td><td>Sales Agent</td><td>Cerrito 333</td><td>Buenos Aires</td>
</tr>
<tr>
<td>12</td><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Marketing Manager</td><td>Sierras de Granada 9993</td><td>México D.F.</td>
</tr>
<tr>
<td>13</td><td>Chop-suey Chinese</td><td>Yang Wang</td><td>Owner</td><td>Hauptstr. 29</td><td>Bern</td>
</tr>
<tr>
<td>14</td><td>Comércio Mineiro</td><td>Pedro Afonso</td><td>Sales Associate</td><td>Av. dos Lusíadas, 23</td><td>São Paulo</td>
</tr>
<tr>
<td>15</td><td>Consolidated Holdings</td><td>Elizabeth Brown</td><td>Sales Representative</td><td>Berkeley Gardens 12 Brewery</td><td>London</td>
</tr>
<tr>
<td>16</td><td>Drachenblut Delikatessen</td><td>Sven Ottlieb</td><td>Order Administrator</td><td>Walserweg 21</td><td>Aachen</td>
</tr>
<tr>
<td>17</td><td>Du monde entier</td><td>Janine Labrune</td><td>Owner</td><td>67, rue des Cinquante Otages</td><td>Nantes</td>
</tr>
<tr>
<td>18</td><td>Eastern Connection</td><td>Ann Devon</td><td>Sales Agent</td><td>35 King George</td><td>London</td>
</tr>
<tr>
<td>19</td><td>Ernst Handel</td><td>Roland Mendel</td><td>Sales Manager</td><td>Kirchgasse 6</td><td>Graz</td>
</tr>
<tr>
<td>20</td><td>Familia Arquibaldo</td><td>Aria Cruz</td><td>Marketing Assistant</td><td>Rua Orós, 92</td><td>São Paulo</td>
</tr>
<tr>
<td>21</td><td>FISSA Fabrica Inter. Salchichas S.A.</td><td>Diego Roel</td><td>Accounting Manager</td><td>C/ Moralzarzal, 86</td><td>Madrid</td>
</tr>
<tr>
<td>22</td><td>Folies gourmandes</td><td>Martine Rancé</td><td>Assistant Sales Agent</td><td>184, chaussée de Tournai</td><td>Lille</td>
</tr>
<tr>
<td>23</td><td>Folk och fä HB</td><td>Maria Larsson</td><td>Owner</td><td>Åkergatan 24</td><td>Bräcke</td>
</tr>
<tr>
<td>24</td><td>Frankenversand</td><td>Peter Franken</td><td>Marketing Manager</td><td>Berliner Platz 43</td><td>München</td>
</tr>
<tr>
<td>25</td><td>France restauration</td><td>Carine Schmitt</td><td>Marketing Manager</td><td>54, rue Royale</td><td>Nantes</td>
</tr>
<tr>
<td>26</td><td>Franchi S.p.A.</td><td>Paolo Accorti</td><td>Sales Representative</td><td>Via Monte Bianco 34</td><td>Torino</td>
</tr>
<tr>
<td>27</td><td>Furia Bacalhau e Frutos do Mar</td><td>Lino Rodriguez</td><td>Sales Manager</td><td>Jardim das rosas n. 32</td><td>Lisboa</td>
</tr>
<tr>
<td>28</td><td>Galería del gastrónomo</td><td>Eduardo Saavedra</td><td>Marketing Manager</td><td>Rambla de Cataluña, 23</td><td>Barcelona</td>
</tr>
<tr>
<td>29</td><td>Godos Cocina Típica</td><td>José Pedro Freyre</td><td>Sales Manager</td><td>C/ Romero, 33</td><td>Sevilla</td>
</tr>
<tr>
<td>30</td><td>Gourmet Lanchonetes</td><td>André Fonseca</td><td>Sales Associate</td><td>Av. Brasil, 442</td><td>Campinas</td>
</tr>
<tr>
<td>31</td><td>Great Lakes Food Market</td><td>Howard Snyder</td><td>Marketing Manager</td><td>2732 Baker Blvd.</td><td>Eugene</td>
</tr>
<tr>
<td>32</td><td>GROSELLA-Restaurante</td><td>Manuel Pereira</td><td>Owner</td><td>5ª Ave. Los Palos Grandes</td><td>Caracas</td>
</tr>
<tr>
<td>33</td><td>Hanari Carnes</td><td>Mario Pontes</td><td>Accounting Manager</td><td>Rua do Paço, 67</td><td>Rio de Janeiro</td>
</tr>
<tr>
<td>34</td><td>HILARIÓN-Abastos</td><td>Carlos Hernández</td><td>Sales Representative</td><td>Carrera 22 con Ave. Carlos Soublette #8-35</td><td>San Cristóbal</td>
</tr>
<tr>
<td>35</td><td>Hungry Coyote Import Store</td><td>Yoshi Latimer</td><td>Sales Representative</td><td>City Center Plaza 516 Main St.</td><td>Elgin</td>
</tr>
<tr>
<td>36</td><td>Hungry Owl All-Night Grocers</td><td>Patricia McKenna</td><td>Sales Associate</td><td>8 Johnstown Road</td><td>Cork</td>
</tr>
<tr>
<td>37</td><td>Island Trading</td><td>Helen Bennett</td><td>Marketing Manager</td><td>Garden House Crowther Way</td><td>Cowes</td>
</tr>
<tr>
<td>38</td><td>Königlich Essen</td><td>Philip Cramer</td><td>Sales Associate</td><td>Maubelstr. 90</td><td>Brandenburg</td>
</tr>
<tr>
<td>39</td><td>La corne d'abondance</td><td>Daniel Tonini</td><td>Sales Representative</td><td>67, avenue de l'Europe</td><td>Versailles</td>
</tr>
<tr>
<td>40</td><td>La maison d'Asie</td><td>Annette Roulet</td><td>Sales Manager</td><td>1 rue Alsace-Lorraine</td><td>Toulouse</td>
</tr>
<tr>
<td>41</td><td>Laughing Bacchus Wine Cellars</td><td>Yoshi Tannamuri</td><td>Marketing Assistant</td><td>1900 Oak St.</td><td>Vancouver</td>
</tr>
<tr>
<td>42</td><td>Lazy K Kountry Store</td><td>John Steel</td><td>Marketing Manager</td><td>12 Orchestra Terrace</td><td>Walla Walla</td>
</tr>
<tr>
<td>43</td><td>Lehmanns Marktstand</td><td>Renate Messner</td><td>Sales Representative</td><td>Magazinweg 7</td><td>Frankfurt a.M.</td>
</tr>
<tr>
<td>44</td><td>Let's Stop N Shop</td><td>Jaime Yorres</td><td>Owner</td><td>87 Polk St. Suite 5</td><td>San Francisco</td></tr>
<tr>
<td>45</td><td>LILA-Supermercado</td><td>Carlos González</td><td>Accounting Manager</td><td>Carrera 52 con Ave. Bolívar #65-98 Llano Largo</td><td>Barquisimeto</td>
</tr>
<tr>
<td>46</td><td>LINO-Delicateses</td><td>Felipe Izquierdo</td><td>Owner</td><td>Ave. 5 de Mayo Porlamar</td><td>I. de Margarita</td>
</tr>
<tr>
<td>47</td><td>Lonesome Pine Restaurant</td><td>Fran Wilson</td><td>Sales Manager</td><td>89 Chiaroscuro Rd.</td><td>Portland</td>
</tr>
<tr>
<td>48</td><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Marketing Manager</td><td>Via Ludovico il Moro 22</td><td>Bergamo</td>
</tr>
<tr>
<td>49</td><td>Maison Dewey</td><td>Catherine Dewey</td><td>Sales Agent</td><td>Rue Joseph-Bens 532</td><td>Bruxelles</td>
</tr>
<tr>
<td>50</td><td>Mère Paillarde</td><td>Jean Fresnière</td><td>Marketing Assistant</td><td>43 rue St. Laurent</td><td>Montréal</td>
</tr>
</tbody>
</table>
6. Use the following script to initialize the widget:
<script id="scriptInit" type="text/javascript">
var $rows;
var pageSize = 5;
$(document).ready(function () {
$rows = $("#pagedTable >tbody >tr");
$("#pager").wijpager({ pageCount: Math.ceil($rows.length / pageSize) || 1,
mode: "numericFirstLast", pageIndexChanged: onPageIndexChanged
});
onPageIndexChanged();
});
function onPageIndexChanged() {
var pageIndex = $("#pager").wijpager("option", "pageIndex");
var showFrom = pageIndex * pageSize;
var showTo = showFrom + pageSize;
$.each($rows, function (index, tr) {
if (index >= showFrom && index < showTo) {
$(tr).show();
} else {
$(tr).hide();
}
});
};
</script>