天天看點

httl 分頁 (page) 模闆httl分頁(page)模闆

httl分頁(page)模闆

HTTL(Hyper-Text Template Language)是一個高性能的開源JAVA模闆引擎,适用于動态HTML頁面輸出,可替代JSP頁面,指令和Velocity相似。

官網位址請點選->httl官網

demo已經在git上,位址:git碼雲 github位址

以下是我寫的一個分頁模闆效果圖:

httl 分頁 (page) 模闆httl分頁(page)模闆

分頁模闆pagination.httl代碼如下:

##用法參照 extendsDemo.httl   
##分頁模闆。。

<!--#macro(pagination(Integer pageCurrent, Integer totalPage, Integer rowSum,Integer pageRows,String actionUrl))-->
<div class="ui-page clearfix"> 

 <!--#if( (totalPage <= 0) || (pageCurrent > totalPage))-->
        <!--#set(Boolean needPagination = false)-->
    <!--#else-->
        <!--#set(Boolean needPagination = true)-->
        <!--#set(Integer startPage = pageCurrent - 4)-->
        <!--#if(startPage < 1)-->
            <!--#set(Integer startPage = 1)-->
        <!--#end-->
        <!--#set(Integer endPage = pageCurrent + 4)-->
        <!--#if(endPage > totalPage)-->
            <!--#set(Integer endPage = totalPage)-->
        <!--#end-->
    <!--#end-->

<b class="ui-page-skip">
 共${rowSum}條記錄,${totalPage}頁,每頁
 <select id="pageRows" class="ui-page-skipTo" onchange="toPage(1,'${actionUrl}')">
    <!-- #if(pageRows==25)-->
        <option value="10" >10</option>
        <option value="25" selected="selected">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    <!-- #else(pageRows==50)-->
        <option value="10" >10</option>
        <option value="25" >25</option>
        <option value="50" selected="selected">50</option>
        <option value="100">100</option>
    <!-- #else(pageRows==100)-->
        <option value="10" >10</option>
        <option value="25" >25</option>
        <option value="50">50</option>
        <option value="100" selected="selected">100</option>
    <!--#else -->
        <option value="10" selected="selected">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    <!-- #end -->
 </select>條 </b>
<div class="ui-page-wrap">


    <!--#if(needPagination)-->
    <b class="ui-page-num">
        <!--#if(pageCurrent <= 8)-->
            <!--##set(Integer startPage = 1)-->
        <!--#end-->

        <!--#if((totalPage - pageCurrent) < 8)-->
            <!--#set(Integer endPage = totalPage)-->
        <!--#end-->
        <!--#if(pageCurrent == 1)-->
             <b class="ui-page-prev"> &lt; </b>
        <!--#else-->
            <a href="#fakelink" class="ui-page-prev" onclick="toPage(${pageCurrent - 1},'${actionUrl}')">  &lt; </a>
        <!--#end-->

        <!--#if(pageCurrent > 8)-->
            <a href="#fakelink" onclick="toPage(1,'${actionUrl}')">1</a>
            <a href="#fakelink" onclick="toPage(2,'${actionUrl}')">2</a>
            <a href="#fakelink">…</a>
        <!--#end-->

        <!--#for(i : startPage..endPage)-->
            <!--#if(pageCurrent == i)-->
                <b class="ui-page-prev" >${i}</b>
            <!--#else-->
                <a href="#fakelink" onclick="toPage(${i},'${actionUrl}')">${i}</a>
            <!--#end-->
        <!--#end-->

        <!--#if((totalPage - pageCurrent) >= 8)-->
            <a href="#fakelink">…</a>
            <a href="#fakelink" onclick="toPage(${totalPage - 1},'${actionUrl}')">${totalPage - 1}</a>
            <a href="#fakelink" onclick="toPage(${totalPage},'${actionUrl}')">${totalPage}</a>
        <!--#end-->

        <!--#if(pageCurrent == totalPage)-->
            <a href="#fakelink" class="ui-page-prev"> &gt; </a>
        <!--#else-->
            <a href="#fakelink" class="ui-page-prev" onclick="toPage(${pageCurrent + 1},'${actionUrl}')"> &gt;</a>
        <!--#end-->
     </b>
    <!--#end-->
     <!-- /if -->

</div>
</div> <!-- /pagination -->

<script type="text/javascript" src="${request.contextPath}/script/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//分頁 請求
    function toPage(pageCur,actionUrl)
    {
        $("#p_pageRows").val($("#pageRows").val());
        $("#p_pageCurrent").val(pageCur);
        $('#search_form').attr('action', actionUrl);
        $("#search_form").submit();

        }
</script>
<!--#end-->

           

httl.properties 配置檔案中需要加上配置:

import.macros+=/demo/view/common/pagination.httl 
           

頁面上引入分頁時:

$!{pagination(page.pageCurrent,page.total,page.rowSum,page.pageRows,"query")}
           

詳細用法請參照 demo裡面的 extendsDemo.httl。

demo已經在git上,git碼雲位址 , github位址