使用jQueryTemplate分页

使用jQueryTemplate分页

web开发总离不开分页, 本文总结了可以直接使用的分页代码块, 可以直接当做工具使用.

• 在HTML页面定义模板
• 在ajax返回处渲染模板
• js优化页面体验

---

在HTML页面定义模板

<div id="myPagination"></div>
<textarea id="pager_template" style="display: none;">
    {#if $T.data.total > 0}
        共有 <span>{$T.data.total}</span> 条记录
        <button class="btn btn-white pageButton" type="button" page="1">首页</button>
        <button class="btn btn-white {#if $T.data.pageNum==1} curr-disable {#/if} pageButton"  type="button" page="{$T.data.pageNum-1}">上一页</button>
        {#foreach $T.data.navigatepageNums as p}
            <button class="btn btn-white pageButton {#if $T.data.pageNum==$T.p} curr-page {#/if}" type="button" title="{$T.p}" page="{$T.p}">{$T.p}</button>
        {#/for}
        <button class="btn btn-white {#if $T.data.pageNum==$T.data.pages} curr-disable {#/if}  pageButton" type="button" page="{$T.data.pageNum+1}">下一页</button>
        <button class="btn btn-white pageButton" type="button" page="{$T.data.pages}">尾页</button>
        <input type="hidden" id="totalPage" value="{$T.data.pages}">
        跳转<input style="width: 43px;" type="text" size="3"  id="inputPageNo" placeholder="{$T.data.pageNum}" oldValue="{$T.data.pageNum}"  value="{$T.data.pageNum}" onkeyup="clearNoNum(this,0);" onafterpaste="clearNoNum(this,0);"> /<span class="all-page">{$T.data.pages}</span>页，每页显示
        <input style="width: 43px;" type="text" size="3" id="inputPageSize" placeholder="{$T.data.pageSize}" oldValue="{$T.data.pageSize}" value="{$T.data.pageSize}" onkeyup="clearNoNum(this,0);" onafterpaste="clearNoNum(this,0);">条
    {#/if}
</textarea>

在ajax返回处渲染模板

post(url,
     data,
     function(result){
            $("#myPagination").setTemplateElement("pager_template");
            $("#myPagination").processTemplate(result);
        });

js优化页面体验

function pageFunInit(searchFun) {
    $("div").delegate(".pageButton", "click", function (e) {
        e.stopPropagation();
        if ($(this).hasClass("curr-disable")) {
            return;
        }
        $("#pageNo").val($(this).attr("page"));
        $("#pageSize").val($("#inputPageSize").val());
        searchFun();
    });

    $("div").delegate("#inputPageSize", "keydown", function (e) {
        e.stopPropagation();
        if (e.keyCode == 13) {
            var oldPageSize = $(this).attr("oldValue");
            var pageSize = $(this).val();
            if (oldPageSize == pageSize) {
                return;
            }
            var time = new Date();
            var maxPageSize = 100;
            if (time.getHours() > 8 && time.getHours() < 12) {
                maxPageSize = 1000;
            }
            if (pageSize * 1 > maxPageSize) {
                pageSize = maxPageSize;
            }
            if (pageSize * 1 < 1) {
                pageSize = 1;
            }
            $("#pageNo").val("1");
            $("#pageSize").val(pageSize);
            searchFun();
        }
    });

    $("div").delegate("#inputPageNo", "keydown", function (e) {
        e.stopPropagation();
        if (e.keyCode == 13) {
            var oldPageNo = $(this).attr("oldValue");
            var totalPage = $("#totalPage").val();
            var pageNo = $(this).val();
            if (oldPageNo == pageNo) {
                return;
            }
            if (pageNo * 1 > totalPage * 1) {
                pageNo = totalPage;
            }
            if (pageNo < 1) {
                pageNo = 1;
            }
            $("#pageNo").val(pageNo);
            $("#pageSize").val($("#inputPageSize").val());
            searchFun();
        }
    });
}