idea to create an ssm project based on maven

In this paper, we use el expression to query and display the background data in jsp page.

1. Preconditions

2. Technical selection

  • Front end paging plug-in jquery paginator
  • Back end paging plug-in pagehelper

3. Import dependent js and css

  • bootstrap.min.3.3.5.css
  • jquery-1.11.2.min.js
  • jqPaginator.js [note that jqPaginator.js is imported here, not jquery.pagination.js]

4. Add jstl dependency in pom.xml


5. Create a page showstudents.jsp under webapp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="" %>
    <link rel="stylesheet" href="/css/bootstrap.min.3.3.5.css"/>
    <script src="/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/js/jqPaginator.js" type="text/javascript"></script>

<table class="table table-bordered table-striped">
        <th>User number</th>
        <th>User name</th>
    <c:forEach items="${pageInfo.list}" var="itemDto">
            <td class="text-center">${}</td>
            <td class="text-center">${}</td>

<script type="text/javascript">
    var if_firstime = true;
    window.onload = function () {
            totalPages: ${pageInfo.pages},
            visiblePages: 10,
            currentPage: ${pageInfo.pageNum},

            first: '<li class="first"><a href="javascript:void(0);">First page</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);">Previous page</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">next page</a></li>',
            last: '<li class="last"><a href="javascript:void(0);">Last page </a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num) {
                if (if_firstime) {
                    if_firstime = false;
                } else if (!if_firstime) {
                    var href = window.location.href.split("?")[0];
                    window.location.href = href;
<div class="pagination-layout">
    <div class="pagination">
        <ul class="pagination" total-items="pageInfo.totalRows" max-size="10" boundary-links="true">

6. Add "/ student/query/el"api to

    @RequestMapping(value = "/student/query/el", method = RequestMethod.GET)
    public String queryStudents1(int pageNum, int pageSize, ModelMap modelMap) throws Exception {
        PageHelper.startPage(pageNum, pageSize);
        List<Student> students = studentService.queryStudents();
        PageInfo<Student> pageInfo = new PageInfo<Student>(students);
        modelMap.put("pageInfo", pageInfo);
        return "forward:/showstudents.jsp";

7, test

Open browser, enter http://localhost:8088/student/query/el?pageSize=3&pageNum=1
The specific operations are as follows:

(test page)

So far, we have finished displaying user information in jsp page through el expression paging, and have done the test.

Keywords: Javascript JSP JQuery Java

Added by manichean on Sun, 08 Dec 2019 20:38:16 +0200