Pagination

<ul class="pg">
    <li class="pg-li pg-disabled pg-first">
        <span class="pg-li-i" title="Go to first page">
            First ›
        </span>
    </li>

    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=1" title="Go to page 1">
            1
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=2" title="Go to page 2">
            2
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=3" title="Go to page 3">
            3
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link pg-li-i--a" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=4" title="Go to page 4">
            4
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=5" title="Go to page 5">
            5
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=6" title="Go to page 6">
            6
        </a>
    </li>

    <li class="pg-li pg-next pg-last">
        <a class="pg-li-i pg-li-i--link" href="#" title="Go to next page">
            Last »
        </a>
    </li>
</ul>

<ul class="pg">
    <li class="pg-li pg-previous pg-first">
        <a class="pg-li-i pg-li-i--link" href="?page=11">« First</a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="?page=0" title="Go to previous page" rel="prev">
            <span class="visually-hidden" style="display:none;">Previous page</span>
            <span aria-hidden="true">‹‹</span>
        </a>
    </li>

    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=9" title="Go to page 9">
            9
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link pg-li-i--a" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=10" title="Go to page 10">
            10
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=11" title="Go to page 11">
            11
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=12" title="Go to page 12">
            12
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=13" title="Go to page 13">
            13
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=14" title="Go to page 14">
            14
        </a>
    </li>

    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="?page=2" title="Go to next page" rel="next">
            <span class="visually-hidden" style="display:none;">Next page</span>
            <span aria-hidden="true">››</span>
        </a>
    </li>
    <li class="pg-li pg-disabled pg-last">
        <span class="pg-li-i" title="Go to first page">‹ Last</span>
    </li>
</ul>

<ul class="pg">
    <li class="pg-li pg-previous pg-first">
        <a class="pg-li-i pg-li-i--link" href="?page=11">« First</a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="?page=0" title="Go to previous page" rel="prev">
            <span class="visually-hidden" style="display:none;">Previous page</span>
            <span aria-hidden="true">‹‹</span>
        </a>
    </li>

    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=9" title="Go to page 9">
            9
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=10" title="Go to page 10">
            10
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=11" title="Go to page 11">
            11
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link pg-li-i--a" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=12" title="Go to page 12">
            12
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=13" title="Go to page 13">
            13
        </a>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="http://search.boston.gov?q&#x3D;city+clerk&amp;page=14" title="Go to page 14">
            14
        </a>
    </li>

    <li class="pg-li pg-ellipsis" role="presentation">
        <span class="pg-li-i" title="Go to first page">…</span>
    </li>
    <li class="pg-li">
        <a class="pg-li-i pg-li-i--link" href="?page=2" title="Go to next page" rel="next">
            <span class="visually-hidden" style="display:none;">Next page</span>
            <span aria-hidden="true">››</span>
        </a>
    </li>
    <li class="pg-li pg-next pg-last">
        <a class="pg-li-i pg-li-i--link" href="?page=19">Last »</a>
    </li>
</ul>