jquery 分页工具条简单,简约

最新推荐文章于 2022-06-02 20:33:17 发布

走错路的程序员

最新推荐文章于 2022-06-02 20:33:17 发布

阅读量3.1k

点赞数

文章标签：工具 jquery function javascript class null

本文链接：https://blog.csdn.net/phker/article/details/6903889

版权

前台分页工具条

/**分页工具条,前台界面显示效果及分页计算
*@param {pagebar}         string                              分页控件要渲染到的html元素的ID
*@param {pagesize}        int                                 每页大小
*@param {onpagechangefn}  function(currentpage, pagesize){ }  当页面更改时触发的回调函数 这个函数会接收到currentpage, pagesize两个参数
*/
function PageTab(pagebar, pagesize, onpagechangefn) {

    var html = ' <span><a href="javascript:void(null)" class="fristpage">首页</a></span> ' +
            '<span><a href="javascript:void(null)" class="upPage">上一页</a></span>' +
            '<input type="text" value="1" class="currentpage"  />/ ' +
            '<span class="totalpage">1</span> ' +
            '<span><a href="javascript:void(null)" class="gopage">跳转</a></span>' +
            '<span><a href="javascript:void(null)" class="nextpage">下一页</a></span>' +
            '<span><a href="javascript:void(null)" class="lastpage">尾页</a></span>' +
            '当前显示<span class="currentrows">0-0</span>' +
            '/共<span class="totalcount">20</span>条' +
            '<input type="hidden" class="pagesize"  value="8"/>'

    var pbar = $(pagebar);
    pbar.html(html);

    //更改总记录数
    this.setTotalCount = function(totalcount) {
        pbar.find(".totalcount").text(totalcount)//更改
    }

    //更改页大小
    this.setPageSize = function(pagesize) {
        pbar.find(".pagesize").val(pagesize)
    }

    this.setPageSize(pagesize);

    var currentpage, $currentpage;
    var pagesize;
    var totalcount;

    //取值
    function getv() {
        $currentpage = pbar.find(".currentpage");
        currentpage = $currentpage.val() * 1;

        pagesize = pbar.find(".pagesize").val() * 1;
        totalcount = pbar.find(".totalcount").text() * 1;
    }


    pbar.find(".fristpage").click(function() {
        $currentpage.val(1);
        gotopage();
    })

    pbar.find(".upPage").click(function() {
        getv();
        if (currentpage > 1) {
            $currentpage.val(currentpage - 1);
            gotopage();
        }
    })

    pbar.find(".nextpage").click(function() {
        getv();
        if (currentpage <= (totalcount / pagesize)*1) {
            $currentpage.val(currentpage + 1);
            gotopage();
        }
    })

    pbar.find(".lastpage").click(function() {
        $currentpage.val(Math.ceil(totalcount / pagesize));
        gotopage();
    })

    function gotopage() {
        getv();
        if (onpagechangefn) {
            onpagechangefn(currentpage, pagesize);
        }
    }
    pbar.find(".gopage").click(gotopage)

}

下面是使用示例,

<script src="js/pagetab.js" type="text/javascript"></script>
<body>

<div class="pagebar"> </div>
</body>
<script>

function  loaddata(currentpage, pagesize){
	alert("当前第几页" +currentpage);
	alert("每页" +pagesize + "行");
}
 var pageBar = new PageTab($(".pagebar"), 8, loaddata); \\初始化
 pageBar.setTotalCount(total)//设置总条数 
</script>

走错路的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 分页工具条简单,简约

前台分页工具条/**分页工具条,前台界面显示效果及分页计算*@param {pagebar} string 分页控件要渲染到的html元素的ID*@param {pagesize} int 每页大小*@param {onpag
复制链接

扫一扫