胸腺和引导分页

时间:2019-04-16 14:55:05

标签: pagination bootstrap-4 thymeleaf

我正在尝试使用分页,但想限制显示的链接数,以便在当前页面的任一侧都有前3个页面链接,后3个页面链接和页面编号的页面链接。我正在寻找的示例如下所示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-xs-12">
  <nav aria-label="pagination">
    <ol class="pagination justify-content-center">
      <li class="page-item  notactive">
        <a class="page-link" href="?page=7" tabindex="-1">Previous</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="0" href="?page=1">1</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="1" href="?page=2">2</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="2" href="?page=3">3</a>
      </li>
      <li class="page-item ">
        <span class="page-link" data-slide-to="3">...</span>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="7" href="?page=8">8</a>
      </li>
      <li class="page-item active">
        <a class="page-link" data-slide-to="8" href="?page=9">9</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="9" href="?page=10">10</a>
      </li>
      <li class="page-item ">
        <span class="page-link">...</span>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="12" href="?page=13">13</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="13" href="?page=14">14</a>
      </li>
      <li class="page-item notactive">
        <a class="page-link" data-slide-to="14" href="?page=15">15</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page=10">Next</a>
      </li>
    </ol>
  </nav>

</div>

我的代码如下:

<nav aria-label="pagination">
    <ol class="pagination justify-content-center">
        <li class="page-item " th:classappend="${1==pagination.getPage()} ? disabled">
            <a class="page-link" th:href="'?page='+${pagination.getPage()-1}" tabindex="-1" >Previous</a>
        </li>

        <li class="page-item"   th:classappend="${i==pagination.getPage()} ? active : notactive">
            <th:block th:if='${pagination.getTotalPages() > 10}'>
                <a th:if='${i <= 3}' class="page-link"  th:href="'?page='+${i}" th:text="${i}" >1</a>
                <a th:if='${i > 3 && (i < (pagination.getPage()-1)}' class="page-link"  >...</a>
                <a th:if='${i > 3 && (i > (pagination.getPage()+1)}' class="page-link"  >...</a>
                <a th:if='${i > 3 && (i == pagination.getPage()-1) or i == pagination.getPage() or i == (pagination.getPage()+1)) }' class="page-link"  th:href="'?page='+${i}" th:text="${i}" >1</a>
                <a th:if='${i > 3 && i < (pagination.getTotalPages() - 3) }' class="page-link" th:href="'?page='+${i}" th:text="${i}" >1</a>
            </th:block>
            <th:block th:if='${pagination.getTotalPages() <= 10}'>
                <a  class="page-link" th:data-slide-to="${i-1}" th:href="'?page='+${i}" th:text="${i}" >1</a>
            </th:block>
        </li>
        <li class="page-item" th:classappend="${pagination.getTotalPages()==pagination.getPage()} ? disabled">
            <a class="page-link" th:href="'?page='+${pagination.getPage()+1}" >Next</a>
        </li>
    </ol>
</nav>

但是,我收到以下错误消息:

org.springframework.expression.spel.SpelParseException:表达式[i> 3 &&(i <(pagination.getPage()-1)] @ 38:EL1044E:意外地用完了输入 < / p>

关于如何使它工作的任何想法?

0 个答案:

没有答案