SubList分页-016-index.jsp(完结)

  • 效果
    SubList分页-016-index.jsp(完结)_第1张图片

SubList分页-016-index.jsp(完结)_第2张图片

测试代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>    


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <style type="text/css">
            table {
                /*合并单元格*/
                /*border-collapse: collapse;*/
                /*border: 1px solid #000;*/
                background-color: chocolate;
                width: 800px;
                text-align: center;
                margin: 0 auto;
                border-spacing: 1px;
                margin-top: 200px;
            }

            table tr {
                background-color: white;
            }

            .choose {
                /*background-color: blue;*/
                margin: 0 auto;
                width: 260px;
                /*background-color: aqua;*/
            }

            .choose input[type=text] {
                width: 200px;
            }

            .choose select {
                width: 205px;
            }

            .choose input[type=submit] {
                float: right;
                width: 60px;
                margin-top: 10px;
                font-size: 20px;
            }

            .pageDiv {
                text-align: center;
                margin-top: 100px;
            }
        style>

        <script type="text/javascript">
            // 获取当前页(每一次点击都是一次请求,都会重新赋值的)
            var currentPage = ${result.currentPage};

            // 一共多少页数据
            var totalPage = ${result.totalPage};

            // 提交表单方法
            function submitForm(actionUrl) {
                var formElement = document.getElementById("studentSeacher");
                // 设置action
                formElement.action = actionUrl;
                // 提交
                formElement.submit();
            }

            // 第一页
            function firstPage() {
                if (currentPage == 1) {
                    alert("已经是第一页了");
                    return false;
                } else {
                    // 提交数据,附加currentPage参数
                    submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=1");
                }
            }

            // 下一页
            function nextPage() {
                if( currentPage == totalPage) {
                    alert("已经是最后一页");
                } else {
                    // 提交数据,附加currentPage参数
                    submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + (currentPage+1));
                }
            }

            // 上一页
            function prevPage() {
                if( currentPage == 1) {
                    alert("已经是第一页");
                } else {
                    // 提交数据,附加currentPage参数
                    submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + (currentPage-1));
                }
            }

            // 最后一页
            function endPage() {
                if (currentPage == totalPage) {
                    alert("已经是最后一页了");
                    return false;
                } else {
                    // 提交数据,附加currentPage参数
                    submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + totalPage);
                }
            }
        script>
    head>
    <body>

        <%
            if( request.getAttribute("result") != null ) {
                System.out.println("result: " + request.getAttribute("result"));
            }

        %>
        <form action="<%= request.getContextPath() %>/subListServlet" method="post" id="studentSeacher" >
            <div class="choose">
                姓名:
                
                
                <input type="text" name="name" id="name" <c:if test="${parameter.name != null }"> value="${parameter.name }" c:if> />
                <br />
                性别:

                <select name="gender" id="gender">
                    <option value="-1">全部option>
                    
                    <option value="1" <c:if test="${parameter.gender == 1 }"> selected c:if> >男option>
                    <option value="2" <c:if test="${parameter.gender == 2 }"> selected c:if> >女option>
                select>
                <br />
                <input type="submit" value="查询"/>
            div>
        form>


        
        <c:if test="${fn:length(result.dataList) eq 0 }">
            <span>没有结果span>
        c:if>

        
        <c:if test="${fn:length(result.dataList) gt 0 }">
            <table>
                <caption>学生信息表caption>
                <tr>
                    <th>姓名th>
                    <th>性别th>
                    <th>年龄th>
                    <th>住址th>
                tr>


                
                <c:forEach items="${result.dataList }" var="student">

                    <tr>
                        <td>
                            <c:out value="${student.name }">c:out>
                        td>
                        <td>
                            <c:if test="${student.gender == 1}">c:if>
                            <c:if test="${student.gender == 2}">c:if>
                        td>
                        <td>
                            <c:out value="${student.age }">c:out>
                        td>
                        <td>
                            <c:out value="${student.address }">c:out>
                        td>
                    tr>
                c:forEach>
            table>

        c:if>
        <div class="pageDiv">

            <br />
            当前共${result.totalRecord }条记录,共${result.totalPage }页,当前第${result.currentPage }页
            <a href="#" onclick="firstPage()">首页a>
            <a href="#" onclick="prevPage()">上一页a>
            <a href="#" onclick="nextPage()">下一页a>
            <a href="#" onclick="endPage()">尾页a>
        div>
    body>
html>

源码下载

关注下方的微信公众号,回复:java_div_page.code



SubList分页-016-index.jsp(完结)_第3张图片



欢迎加入交流群:451826376


更多信息:www.itcourse.top

完整教程PDF版本下载

你可能感兴趣的:(Java实现分页(前台+后台))