现在的位置: 首页 > 程序人生 > 网页前端 > 正文
自己动手写分页组件
2014年04月27日 网页前端 ⁄ 共 2567字 评论数 3 ⁄ 被围观 2,352 views+

分页_table

 

其实分页组件很简单,也就是一个核心的js函数PagerInit就可以搞定了。 这个函数的功能就是根据确定显示多少个分页,以及每个分页上面的数字。

废话不多说,直接上js代码:

var pagecount = 1;   // 总页数
var totalnum = 0; //总页数
var type = 0;
var rowcount = 10;
var pagenumber = 1;   // 当前页

var limitnum = 7;
var step = limitnum - 1;
var start_step = parseInt(limitnum / 2);

var tableArray = new Array();

var Templat = '<a href="javascript:SetPageNum(1);" title="First Page"><< 首页</a>\
	<a href="javascript:SetPageNum(pagenumber - 1);" title="Previous Page"><< 上一页</a>\
	%content%\
	<a href="javascript:SetPageNum(pagenumber + 1);" title="Next Page">下一页 >></a>\
	<a href="javascript:SetPageNum(pagecount);" title="Last Page">末页 >></a>&nbsp;&nbsp;&nbsp;\
	<font style="color:#57a000;">共有%totalnum%条记录&nbsp;共%pagecount%页&nbsp;&nbsp;\
	当前<input type="text" value="%current_num%" maxlength="6" id="gotoval" style="width:20px; height:16px;">页</font>\
	<a href="javascript:GotoPage();" title="Next Page">GO</a>';

function GotoPage() {
    var gotopage = $("#gotoval").val();
    gotopage = parseInt(gotopage);
    if (isNaN(gotopage)) {
        alert("请输入1~" + pagecount + "之间的整数!");
        return;
    }
    if (gotopage < 1 || gotopage > pagecount) {
        alert("请输入1~" + pagecount + "之间的整数!");
        return;
    }
    SetPageNum(gotopage);
}

function PagerInit(gotopage) {
    gotopage = parseInt(gotopage);
    if (isNaN(gotopage)) {
        alert("请输入整数!");
        return;
    }
    //console.log(gotopage);
    if (gotopage <= 0) {
        alert("这是首页");
        return;
    } else if (gotopage > pagecount) {
        alert("这是末页");
        return;
    }
    var content = "";
    var start;
    if (gotopage > start_step) {
        start = gotopage - start_step;
    } else {
        start = 1;
    }
    var end = start + step;
    if (end > pagecount && pagecount >= limitnum) {
        end = pagecount;
        start = pagecount - step;
    } else if (end > pagecount && pagecount < limitnum) {
        end = pagecount;
        start = 1;
    }
    if (start > 1) {
        content += '<font style="color:#57a000;">...</font>';
    }

    for (var i = start; i <= end; ++i) {
        if (i == gotopage) {
            content += '<a href="javascript:SetPageNum(' + i + ');" class="number current" title="' + i + '">' + i + '</a>';
        } else {
            content += '<a href="javascript:SetPageNum(' + i + ');" class="number" title="' + i + '">' + i + '</a>';
        }
    }
    if (end < pagecount) {
        content += '<font style="color:#57a000;">...</font>';
    }

    var html_str = Templat;
    html_str = html_str.replace(/%content%/g, content);
    html_str = html_str.replace(/%totalnum%/g, totalnum);
    html_str = html_str.replace(/%pagecount%/g, pagecount);
    html_str = html_str.replace(/%current_num%/g, gotopage);

    $("#pager").html(html_str);
    pagenumber = gotopage;
    return;
}
// 页面加载刷新
$(document).ready(function() {
    SetPageNum(1);
});

// 回调  设置总页数,初始化分页
function SetTotalNum(num) {
    totalnum = num;
    pagecount = Math.ceil(totalnum / rowcount);
    PagerInit(pagenumber);
}

// 设置当前页,并发送请求
function SetPageNum(current) {
    if (isNaN(current)) {
        alert("请输入整数!");
        return;
    }
    if (current <= 0) {
        alert("这是首页");
        return;
    } else if (current > pagecount) {
        alert("这是末页");
        return;
    }
    pagenumber = current;
	// ajax发送请求,获取table数据
    GuildReviewSubmit();
}

演示地址

欢迎大家修改使用

原创文章,转载请注明: 转载自成长的企鹅

本文链接地址: 自己动手写分页组件

关于我:成长的企鹅简介

目前有 3 条留言 其中:访客:2 条, 博主:0 条 引用: 1

  1. 美女总裁 : 2015年10月07日22:49:34  -49楼 @回复 回复

    呵呵你真厉害,佩服哦

  2. 美女总裁 : 2015年10月07日22:49:46  -48楼 @回复 回复

查看来自外部的引用: 1

给我留言

留言无头像?


×