zoukankan      html  css  js  c++  java
  • bootstrap-thymeleaf-分页

    1.HTML代码

    <div th:fragment="paginater">
        <ul th:id="paginaterUlID" th:if="${null!=page}" class="pagination pagination-sm pull-right" style="margin: 0px 8px 0px 0px;">
            <li><a href="javascript:void(0);" th:onclick="|paginater(${page.pageNum},${page.pageSize},${id},${url})|"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></a></li>
            <li th:class="${page.isFirstPage}?'disabled':''" th:onclick="|paginater(1,${page.pageSize},${id},${url})|"><a href="javascript:void(0);" >首页</a></li>
            <li th:class="${page.hasPreviousPage}?'':'disabled'"><a href="javascript:void(0);" th:onclick="|paginater(${page.pageNum}-1,${page.pageSize},${id},${url})|">上一页</a></li>
            <li th:class="${i==page.pageNum?'active':''}" th:each="i:${#numbers.sequence(1,page.pages)}">
                <a th:if="${page.pageNum-2<i&amp;&amp;i<page.pageNum+6&amp;&amp;i!=page.pageNum}"
                   th:text="${i}" href="javascript:void(0);" th:onclick="|paginater(${i},${page.pageSize},${id},${url})|"></a>
                <a th:if="${i}==${page.pageNum}" href="" th:text="${i}"></a>
                <a th:if="${i}==${page.pageNum}+6" >...</a>
                <a th:if="${i==page.pages&amp;&amp;i!=page.pageNum&amp;&amp;page.pages>page.pageNum+6}"
                   th:text="${i}" href="javascript:void(0);" th:onclick="|paginater(${i},${page.pageSize},${id},${url})|"></a>
            </li>
            <li th:class="${page.hasNextPage}?'':'disabled'"><a href="javascript:void(0);" th:onclick="|paginater(${page.pageNum}+1,${page.pageSize},${id},${url})|">下一页</a></li>
            <li th:class="${page.isLastPage}?'disabled':''"><a href="javascript:void(0);" th:onclick="|paginater(${page.pages},${page.pageSize},${id},${url})|">尾页</a></li>
            <li class="disabled"><a th:text="${'共'+page.total+'条数据'}"></a></li>
            <li class="disabled"><a th:text="${'共'+page.pages+'页'}"></a></li>
            <li class="disabled"><a style="border-right: none;border-bottom: none;border-top: none;color:#23527c;">转到</a>
            </li>
            <li><a style="padding: 0px;margin: 0px;"><input
                    style=" 80px;height:28px;display: inline;padding: 0px;margin: 0px;border: none;color:#23527c;"
                    id="paginater_YM_ID" type="text" min="1" max="{$pagecount}"  name="pageindex" placeholder="页码"/></a></li>
            <li><a href="javascript:void(0);" th:onclick="|paginater('paginater_YM_ID',${page.pageSize},${id},${url})|"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a></li>
        </ul>
    </div>

    2.JS代码

    function paginater(pageNum,pageSize,id) {
        var form ;
        if(null==id||''==id){
           form = $("form").first();
        }else{
            form = $("#"+id);
        }
        if("paginater_YM_ID"==pageNum){
            pageNum = $("#paginater_YM_ID").val();
        }
        form.append("<input type='text' value='"+pageNum+"' id='pageNum' name='pageNum' style='display: none'/>");
        form.append("<input type='text' value='"+pageSize+"' id='pageSize' name='pageSize' style='display: none'/>");
        form.submit();
    }

    3.引用

    <div th:insert="/common/common::paginater"/>
  • 相关阅读:
    小程序 循环遍历 传参数 获取参数的方法
    小程序技巧 盒子布局
    小程序的初体验
    python制作网易云免费下载器
    数据结构实验报告之三元组顺序存储的稀疏矩阵练习(代码版)
    JavaFX作业8
    用JavaFX显示一个转动的风扇
    用JavaFX模拟一个交通信号灯
    数据结构作业周三必交
    大数据的就业观与考研观
  • 原文地址:https://www.cnblogs.com/ljb161108/p/11107811.html
Copyright © 2011-2022 走看看