causeway-standard-theme/causeway/docs/components/pagination.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="pagination"></a>
      <header class="content-header">
        <h1 class="title">Pagination</h1>
      </header>
      <p>Provide pagination links for your site or app with the multi-page pagination component, or the simpler
        pager alternative.</p>

      <p>Use class <code>.active</code> on <code>&lt;li&gt;</code> tag for active page and class
        <code>.disabled</code> for disabled page.</p>
      <br/>

      <p>Example: </p>
      <ul class="pagination">
        <li><a href="#" class="glyphicon glyphicon-pagination-first"></a></li>
        <li class="disabled"><a href="#" class="glyphicon glyphicon-pagination-prev"></a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
        <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
      </ul>
      <p>Code: </p>
      <pre>
      <code>
        &lt;ul class=&quot;pagination&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-first&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-prev&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-next&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-last&quot;&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      </code>
      </pre>
      <br/>

      <p>For use in tables nest the code in <code>&lt;td&gt;</code> of <code>&lt;tfoot&gt;</code> in table</p>

      <p>Append class <code>.pull-left</code> for left-aligned and <code>.pull-right</code> for right-aligned.</p>

      <p>Example of pagination in table: </p>

      <div class="table-wrapper">
        <div class="table-content">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>
                Column 1
              </th>
              <th>
                Column 2
              </th>
              <th>
                Column 3
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                Cell 1
              </td>
              <td>
                Cell 2
              </td>
              <td>
                Cell 3
              </td>
            </tr>
            <tr>
              <td>
                Cell 4
              </td>
              <td>
                Cell 5
              </td>
              <td>
                Cell 6
              </td>
            </tr>
            <tr>
              <td>
                Cell 7
              </td>
              <td>
                Cell 8
              </td>
              <td>
                Cell 9
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
          <ul class="pagination pull-right">
            <li><span class="glyphicon glyphicon-pagination-first"></span></li>
            <li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
            <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
          </ul>
        </div>
      </div>
      <p>Code for right-aligned pagination: </p>
      <pre>
        <code>
        &lt;div class=&quot;table-wrapper&quot;&gt;
          &lt;div class=&quot;table-content&quot;&gt;
            &lt;table class=&quot;table table-striped&quot;&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;
                  Column 1
                &lt;/th&gt;
                &lt;th&gt;
                  Column 2
                &lt;/th&gt;
                &lt;th&gt;
                  Column 3
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Cell 1
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 2
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 3
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Cell 4
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 5
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 6
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Cell 7
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 8
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 9
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class=&quot;table-footer&quot;&gt;
            &lt;ul class=&quot;pagination pull-right&quot;&gt;
              &lt;li&gt;&lt;span class=&quot;glyphicon glyphicon-pagination-first&quot;&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;disabled&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-pagination-prev&quot;&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-next&quot;&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-last&quot;&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        </code>
      </pre>
    </section>
  </div>
</div>