ComponentOne Studio MVC4 Classic ヘルプ
ページ付けされたテーブルの作成
MVC Classic ウィジェット > Wijpager > ページ付けされたテーブルの作成

wijpager ウィジェットでは、ページ付けされたテーブルを作成して、無駄のない、ページ付けされたインタフェースを作成しながら、画面の面積を節約できます。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/pager/PagedTable）にアクセスし、コントロールエクスプローラの Pager > Paged Table サンプルのライブデモをご覧ください。

  1. ASP.NET MVC 4 Wijmo アプリケーションを作成します。
  2. ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。
  3. 以下のマークアップをページの<body>タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div id="pager">
   </div>
  4. 以下のスクリプトを使用して、ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <table class="ui-widget ui-widget-content" rules="all" id="pagedTable">
        <thead class="ui-widget-header">
            <tr>
                <td> </td><th scope="col">会社名</th><th scope="col">従業員名</th><th scope="col">指名</th><th scope="col">住所</th><th scope="col">都市</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 Constitucion 2222</td><td>Mexico D.F.</td>
            </tr>
            <tr>
                <td>2</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>Mexico 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 snabbkop</td><td>Christina Berglund</td><td>Order Administrator</td><td>Berguvsvagen 8</td><td>Lulea</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 pere et fils</td><td>Frederique Citeaux</td><td>Marketing Manager</td><td>24, place Kleber</td><td>Strasbourg</td>
            </tr>
            <tr>
                <td>7</td><td>Bolido Comidas preparadas</td><td>Martin 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>Mexico 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>Comercio Mineiro</td><td>Pedro Afonso</td><td>Sales Associate</td><td>Av. dos Lusiadas, 23</td><td>Sao 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 Oros, 92</td><td>Sao 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 Rance</td><td>Assistant Sales Agent</td><td>184, chaussee de Tournai</td><td>Lille</td>
            </tr>
            <tr>
                <td>23</td><td>Folk och fa HB</td><td>Maria Larsson</td><td>Owner</td><td>Akergatan 24</td><td>Bracke</td>
            </tr>
            <tr>
                <td>24</td><td>Frankenversand</td><td>Peter Franken</td><td>Marketing Manager</td><td>Berliner Platz 43</td><td>Munchen</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>Galeria del gastronomo</td><td>Eduardo Saavedra</td><td>Marketing Manager</td><td>Rambla de Cataluna, 23</td><td>Barcelona</td>
            </tr>
            <tr>
                <td>29</td><td>Godos Cocina Tipica</td><td>Jose 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>Andre 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>5a 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 Paco, 67</td><td>Rio de Janeiro</td>
            </tr>
            <tr>
                <td>34</td><td>HILARION-Abastos</td><td>Carlos Hernandez</td><td>Sales Representative</td><td>Carrera 22 con Ave. Carlos Soublette #8-35</td><td>San Cristobal</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>Koniglich 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 Gonzalez</td><td>Accounting Manager</td><td>Carrera 52 con Ave. Bolivar #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>Mere Paillarde</td><td>Jean Fresniere</td><td>Marketing Assistant</td><td>43 rue St. Laurent</td><td>Montreal</td>
            </tr>
        </tbody>
    </table>
  5. 以下のスクリプトを使用して、ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <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>
  6. プログラムを実行します。 wijpager ウィジェットは、次の図のようになります。
関連トピック
Wijpopup

 

 

Copyright © GrapeCity inc. All rights reserved.