JS实现前端分页

最新推荐文章于 2025-03-03 17:21:59 发布

tansci

最新推荐文章于 2025-03-03 17:21:59 发布

阅读量3k

点赞数

分类专栏： JS 文章标签： JS HTML

本文链接：https://blog.youkuaiyun.com/typ1805/article/details/89343126

版权

JS 专栏收录该内容

12 篇文章

订阅专栏

一、HTML部分

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
    <script src="js/jquery.js"></script>
	<style type="text/css">
		a{text-decoration: none;}
		table {border-collapse:collapse;width: 100%;font-size: 14px;}
		th{background-color: #ddd;}
		table, td, th {border:1px solid #e7e8ec;}
		th,tr{height: 40px;}
		td {text-align: center;}
		tr:hover{background-color: #f9f4f3;}
		.barcon {width: 1000px;margin: 0 auto;text-align: center;}
		.barcon2 {float: right;}
		.barcon2 ul {margin: 20px 0;padding-left: 0;list-style: none;text-align: center;}
		.barcon2 li {display: inline;}
		.barcon2 a {font-size: 16px;font-weight: normal;display: inline-block;padding: 5px;padding-top: 0;color: black;border: 1px solid #ddd;background-color: #fff;}
		.barcon2 a:hover{background-color: #eee;}
		.ban {opacity: .4;}
	</style>
</head>
<body>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
	<thead>
	<tr align="center">
		<th width="150" height="33" class="td2">序号</th>
		<th width="300" class="td2">用户名</th>
		<th width="250" class="td2">权限</th>
		<th width="250" class="td2">操作</th>
	</tr>
	</thead>
	<tbody id="myTable">
	<tr align="center">
		<td class="td2" height="33" width="150">1</td>
		<td class="td2" >admin</td>
		<td class="td2" >管理员</td>
		<td class="td2" ><a href="###">修改</a></td>
	</tr>
	</tbody>
</table>
<div id="barcon" class="barcon" >
	<div id="barcon2" class="barcon2">
		<ul>
			<li><a href="###" id="prePage">上一页</a></li>
			<li id="barcon1"></li>
			<li><a href="###" id="nextPage">下一页</a></li>
			<li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
			<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
		</ul>
	</div>
</div>
</body>
</html>

二、JS逻辑

<script>
     // 初始化数据
    function dynamicAddUser(num){
        for(var i=1;i<=num;i++)
        {
            var trNode=document.createElement("tr");
            $(trNode).attr("align","center");
            //序号
            var tdNodeNum=document.createElement("td");
            $(tdNodeNum).html(i+1);
            tdNodeNum.style.width = "150px";
            tdNodeNum.style.height = "33px";
            tdNodeNum.className = "td2";
            //用户名
            var tdNodeName=document.createElement("td");
            $(tdNodeName).html("lzj"+i);
            tdNodeName.style.width = "300px";
            tdNodeName.className = "td2";
            //权限
            var tdNodePri=document.createElement("td");
            tdNodePri.style.width = "250px";
            tdNodePri.className = "td2";
            var priText=document.createElement("span");
            $(priText).css({"display":"inline-block","text-align":"center"});
            $(priText).text("普通用户");
            tdNodePri.appendChild(priText);
            //操作
            var tdNodeOper = document.createElement("td");
            tdNodeOper.style.width = "170px";
            tdNodeOper.className = "td2";
            var editA = document.createElement("a");
            $(editA).attr("href", "###").text("编辑");
            $(editA).css({ display: "inline-block" });
            tdNodeOper.appendChild(editA);

            trNode.appendChild(tdNodeNum);
            trNode.appendChild(tdNodeName);
            trNode.appendChild(tdNodePri);
            trNode.appendChild(tdNodeOper);
            $("#myTable")[0].appendChild(trNode);
        }
    }
    $(function(){
        dynamicAddUser(80);
        goPage(1,10);
    })

    /**
     * 分页函数
     * pno--页数
     * psize--每页显示记录数
     * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
     * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
     **/
    var pageSize=10;//每页显示行数
    var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
    var totalPage;//总页数
    function goPage(pno,psize){
        var itable = document.getElementById("myTable");
        var num = itable.rows.length;//表格所有行数(所有记录数)

        pageSize = psize;//每页显示行数
        //总共分几页
        if(num/pageSize > parseInt(num/pageSize)){
            totalPage=parseInt(num/pageSize)+1;
        }else{
            totalPage=parseInt(num/pageSize);
        }
        var currentPage = pno;//当前页数
        currentPage_=currentPage;
        var startRow = (currentPage - 1) * pageSize+1;
        var endRow = currentPage * pageSize;
        endRow = (endRow > num)? num : endRow;

        $("#myTable tr").hide();
        for(var i=startRow-1;i<endRow;i++) {
            $("#myTable tr").eq(i).show();
        }

        var tempStr = currentPage+"/"+totalPage;
        document.getElementById("barcon1").innerHTML = tempStr;

        if(currentPage>1){
            $("#firstPage").on("click",function(){
                goPage(1,psize);
            }).removeClass("ban");
            $("#prePage").on("click",function(){
                goPage(currentPage-1,psize);
            }).removeClass("ban");
        }else{
            $("#firstPage").off("click").addClass("ban");
            $("#prePage").off("click").addClass("ban");
        }

        if(currentPage<totalPage){
            $("#nextPage").on("click",function(){
                goPage(currentPage+1,psize);
            }).removeClass("ban")
            $("#lastPage").on("click",function(){
                goPage(totalPage,psize);
            }).removeClass("ban")
        }else{
            $("#nextPage").off("click").addClass("ban");
            $("#lastPage").off("click").addClass("ban");
        }
    }

    function jumpPage() {
        var num=parseInt($("#num").val());
        if(num != currentPage_ && !isNaN(num) && num <= totalPage && num > 0) {
            goPage(num,pageSize);
        }
    }
</script>

效果如图：