手动实现表格分页功能

最新推荐文章于 2022-11-21 15:13:33 发布

lost_wen

最新推荐文章于 2022-11-21 15:13:33 发布

阅读量890

点赞数

分类专栏： javascript 文章标签：分页

本文链接：https://blog.csdn.net/lost_wen/article/details/53908875

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在浏览器端实现分页，一次性获取全部数据，根据当前页数和每页记录数选择性显示/隐藏

<td colspan="9">
	<span class="pull-left">
	  共 <label id="rowNum"></label>条记录，第 <label id="currentPage"></label>页/共<label id="pageSize"></label>页   每页显示：
	<select id="pageSel">
		<option value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
		<option value="50">50</option>
	</select>
	</span>
	<span class="pull-right" id="paging">
	</span>
</td>
/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
	var itable = document.getElementById("serviceList");
    var num = itable.rows.length; //表格所有行数(所有记录数)
    console.log(num);
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页
    if(num/pageSize > parseInt(num/pageSize)){
            totalPage=parseInt(num/pageSize)+1;
       }else{
           totalPage=parseInt(num/pageSize);
       }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
    var endRow = currentPage * pageSize;//结束显示的行
    endRow = (endRow > num)? num : endRow;    40
    console.log(endRow);
    //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "";
        }else{
            irow.style.display = "none";
        }
    }
    document.getElementById("rowNum").innerHTML=num;
    document.getElementById("currentPage").innerHTML=currentPage;
    document.getElementById("pageSize").innerHTML=totalPage;
    var tempStr = "";
    if(currentPage>1){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a> | ";
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a> | "
    }else{
        tempStr += "首页 | ";
        tempStr += "上一页 | ";
    }

    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a> | ";
        tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>  ";
    }else{
        tempStr += "下一页 | ";
        tempStr += "尾页  ";
    }

    document.getElementById("paging").innerHTML = tempStr;

}


$("#pageSel").change(function(){	//选择每页显示页数后触发，重新分页
	var pageSize=this.value;
	goPage(1,pageSize);
});