使用js实现页面跳转

在script中写一个页面跳转函数，将form表单及页码传过去，实现页面跳转功能，可用于上一下、下一页，首页、尾页切换

  function page_nav(frm,num) {
            frm.pageIndex.value = num;
            frm.submit();
        }

实现用户输入页码跳转需要进行判断，判断输入的页码是否合法，所以另写一个js函数

// 页码跳转，跳转前验证
        function  jump_to(frm,pageno) {
            // 正则验证，只能是数字
            var regexp=/^[1-9]\d*$/;
　　　　　　　　//totalPage通过隐藏域的方式获取总页数，用于判断输入页码是否有效
            var totalPage = document.getElementById("totalPage").value;
            if(!regexp.test(pageno)){
                alert("请输入 正确的数字！");
                return false;
            }else if((pageno-totalPage) > 0){
                alert("总页码一共"+totalPage+"页，请输入正确的页码！");
                return false;
            }else{
                page_nav(frm,pageno);
            }
        }

jsp代码

<%@ page import="com.util.PageSupport" %>
<%@ page import="com.dao.BaseDao" %>
<%@ page import="com.pojo.Commodity" %>
<%@ page import="com.service.impl.CommodityServiceImpl" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: zengt
  Date: 2019-09-28
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        // 提交表单，传递页码
        function page_nav(frm,num) {
            frm.pageIndex.value = num;
            frm.submit();
        }
        // 页码跳转，跳转前验证
        function  jump_to(frm,pageno) {
            // 正则验证，只能是数字
            var regexp=/^[1-9]\d*$/;
            var totalPage = document.getElementById("totalPage").value;
            if(!regexp.test(pageno)){
                alert("请输入 正确的数字！");
                return false;
            }else if((pageno-totalPage) > 0){
                alert("总页码一共"+totalPage+"页，请输入正确的页码！");
                return false;
            }else{
                page_nav(frm,pageno);
            }
        }
    </script>
</head>
<body>
<form action="adsf.jsp" name="frm" class="frm" id="frm" method="post" >
<table border="1">
    <tr>
        <th>商品编号</th>
        <th>商品名</th>
        <th>商品单价</th>
    </tr>
    <%
        String currentPage = request.getParameter("pageIndex");
        String pagenum = request.getParameter("pagenum");
        int pageIndex=0;
        if (currentPage == null||currentPage=="") {
            // 首次进入
            currentPage = "1";
        }else{
            pageIndex = Integer.parseInt(currentPage);

        }

        BaseDao bd = new BaseDao();
        //当前页码

        // 获取新闻总数量
        int totalCount = bd.nums();
        //每页显示几条新闻，页面容量
        int pageSize = 10;
        // 获取总页数d
        int totalPage = PageSupport.setTotalPageCountByRs(totalCount,pageSize);
        // 判断页码
        if (pageIndex <= 0) {
            pageIndex = 1;
        } else if (pageIndex > totalPage) {
            pageIndex = totalPage;
        }

        List<Commodity> newsList = new CommodityServiceImpl().getPageList(pageIndex, pageSize);
        int i = 0;
        for (Commodity news : newsList) {
            i++;
    %>
    <tr>
        <td><a href=''><%=news.getC_id() %>
        </a></td>
        <td><%=news.getC_name() %>
        </td>
        <td><%=news.getPrice() %>
        </td>
    </tr>

    <%} %>
</table>
<div class="page-bar">
    <ul class="page-num-ul clearfix">
        <li>共<%=i%>条记录&nbsp;&nbsp; <%=pageIndex%>/<%=totalPage%>页</li>

        <input type="hidden" id="pageIndex" name="pageIndex" value="<%=pageIndex%>">
        <input type="hidden" id="totalPage" name="totalPage" value="<%=totalPage%>">
<%--        <a href="adsf.jsp?pageIndex=<%=pageIndex-1%>">上一页</a>--%>
<%--        <a href="adsf.jsp?pageIndex=<%=pageIndex+1%>">下一页</a>&nbsp;&nbsp;--%>
        <a href="javaScript:page_nav(document.forms[0],1)">首页</a>
        <a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1%>)">上一页</a>
        <a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1%>)">下一页</a>
        <a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a>
          跳转至  <input type="number" name="inputPage" id="inputPage" class="page-key" size="5" />页
        <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>


    </ul>
</div>
</form>
</body>
</html>

页面效果

点击GO跳转后页面

使用js实现页面跳转

猜你喜欢