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 .
- Create an C1 ASP.NET MVC 5 Web Application.
- In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.
- Add the following markup within the
<body>tags of the page.<div id="pager"> </div> - Insert the following markup to create a table:
<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> - Run the program. The wijpager widget should resemble the following image:
