ssm:前端html页面+ajax，利用pageHelper分页

最新推荐文章于 2021-09-25 19:39:18 发布
最新推荐文章于 2021-09-25 19:39:18 发布
阅读量532 收藏 4
点赞数
文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45095712/article/details/116540586
版权

maven依赖

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.8</version>
</dependency>

mybatis.cfg.xml

<plugins>
        <!-- com.github.pagehelper为PageHelper类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--数据库方言-->
            <property name="helperDialect" value="mysql"/>
            <!--合理化分页-->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

controller

//查询全部城市地址
    @RequestMapping("/selectAllLocation")
    @ResponseBody
    public Msg selectAllLocation(@RequestParam(required = true,defaultValue = "1")Integer page) {
        //page：当前页
        PageHelper.startPage(page,10);
        List<Location> locationList = locationService.selectAllLocation();
        //非空返回200，为空返回100
        if (!locationList.isEmpty()) {
            //封装即可
            PageInfo<Location> locationPageInfo = new PageInfo<>(locationList);
            //返回值
            return Msg.success().add("locationPageInfo",locationPageInfo);
        } else return Msg.fail();
    }

对我而言，最烦人的就是前端的js

html

//修改地址信息
        $("#updateLocationInfo").click(function () {
            //点击每一个项目时的未登录拦截
            if (sessionStorage.getItem("login_admin_msg") == 202 || sessionStorage.getItem("admin_name") == null) {
                alert("请先登录！");
                window.location.href = "/admin/toIndex_admin";
            }
            //取消左侧所有li的active,增加点击地方的active
            $("ul#ul_1 li").attr("class", "");
            $("ul#ul_2 li").attr("class", "");
            $("ul#ul_3 li").attr("class", "");
            $("ul#ul_3").children("li:eq(2)").attr('class', 'active');
            //清空主页的中心内容
            $("div#main").empty();

            $.ajax({
                url: "/admin/selectAllLocation",
                type: "get",
                success: function (result) {
                    if (result.code == 200) {
                        var htmladd_0 = '';
                        $('div#main').empty();
                        $('div#main').append('<h1 class="page-header">修改地址信息</h1>');
                        htmladd_0 = '<table class="table" id="updateLocation_table">\n' +
                            '            <tr>\n' +
                            '                <th>城市编号</th>\n' +
                            '                <th>名称</th>\n' +
                            '                <th>风险等级</th>\n' +
                            '            </tr>\n' +
                            '        </table>';
                        $("div#main").append(htmladd_0);
                        $.each(result.extend.locationPageInfo.list, function (index, item) {
                            var loc_idTd = $("<td></td>").append(item.loc_id);
                            var loc_nameTd = $("<td></td>").append(item.loc_name);
                            var loc_risklevelTd = $("<td></td>").append(item.loc_risklevel);
                            //修改按钮
                            var editLocBtn = $("<button></button>")
                                .append("<span class='glyphicon glyphicon-pencil'></span>")
                                .addClass("btn btn-primary edit_location");
                            //添加id属性
                            editLocBtn.attr("edit_loc_id", item.loc_id);
                            //添加name属性
                            editLocBtn.attr("edit_loc_name", item.loc_name);
                            //添加数量属性
                            editLocBtn.attr("edit_loc_risklevel", item.loc_risklevel);
                            //删除按钮
                            var delLocBtn = $("<button ></button>").append("<span class='glyphicon glyphicon-trash'></span>")
                                .addClass("btn btn-danger del_location");
                            delLocBtn.attr("del_loc_id", item.loc_id);//添加属性


                            var opTd = $("<td></td>").append(editLocBtn).append(delLocBtn);
                            if (parseInt(item.loc_risklevel) == 0) {
                                $("<tr bgcolor='#baffaa'></tr>")
                                    .append(loc_idTd)
                                    .append(loc_nameTd)
                                    .append(loc_risklevelTd)
                                    .append(opTd)
                                    .appendTo("#updateLocation_table tbody");
                            }
                            if (parseInt(item.loc_risklevel) == 1) {
                                $("<tr bgcolor='#fff3c5'></tr>")
                                    .append(loc_idTd)
                                    .append(loc_nameTd)
                                    .append(loc_risklevelTd)
                                    .append(opTd)
                                    .appendTo("#updateLocation_table tbody");
                            }
                            if (parseInt(item.loc_risklevel) == 2 || parseInt(item.loc_risklevel) == 3) {
                                $("<tr bgcolor='#ffb5ab'></tr>")
                                    .append(loc_idTd)
                                    .append(loc_nameTd)
                                    .append(loc_risklevelTd)
                                    .append(opTd)
                                    .appendTo("#updateLocation_table tbody");
                            }
                        });
                        var locationPageInfo = result.extend["locationPageInfo"];

                        if (locationPageInfo.pageNum == 1) {
                            var page = '<ul class="pagination">\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.nextPage + ')">下一页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                                ' </ul>';
                        } else if (locationPageInfo.pageNum == locationPageInfo.pages) {
                            var page = '<ul class="pagination">\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.prePage + ')">上一页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                                ' </ul>';
                        } else {
                            var page = '<ul class="pagination">\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.prePage + ')">上一页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.nextPage + ')">下一页</a></li>\n' +
                                '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                                ' </ul>';
                        }
                        $("div#main").append(page);
                    } else if (result.code == 100) {
                        $("div#main").append('<div class="alert alert-success">\n' +
                            ' <strong>无城市信息</strong>\n' +
                            '</div>');
                    }
                }, error: function (result) {
                    alert("error!");
                }
            });
        });

分页中每个按钮调用的js函数

//分页
    function selectPage(result) {
        $.ajax({
            url: "/admin/selectAllLocation?page=" + result,
            type: "get",
            success: function (result) {
                if (result.code == 200) {
                    var htmladd_0 = '';
                    $('div#main').empty();
                    $('div#main').append('<h1 class="page-header">修改地址信息</h1>');
                    htmladd_0 = '<table class="table" id="updateLocation_table">\n' +
                        '            <tr>\n' +
                        '                <th>城市编号</th>\n' +
                        '                <th>名称</th>\n' +
                        '                <th>风险等级</th>\n' +
                        '            </tr>\n' +
                        '        </table>';
                    $("div#main").append(htmladd_0);
                    $.each(result.extend.locationPageInfo.list, function (index, item) {
                        var loc_idTd = $("<td></td>").append(item.loc_id);
                        var loc_nameTd = $("<td></td>").append(item.loc_name);
                        var loc_risklevelTd = $("<td></td>").append(item.loc_risklevel);
                        //修改按钮
                        var editLocBtn = $("<button></button>")
                            .append("<span class='glyphicon glyphicon-pencil'></span>")
                            .addClass("btn btn-primary edit_location");
                        //添加id属性
                        editLocBtn.attr("edit_loc_id", item.loc_id);
                        //添加name属性
                        editLocBtn.attr("edit_loc_name", item.loc_name);
                        //添加数量属性
                        editLocBtn.attr("edit_loc_risklevel", item.loc_risklevel);
                        //删除按钮
                        var delLocBtn = $("<button ></button>").append("<span class='glyphicon glyphicon-trash'></span>")
                            .addClass("btn btn-danger del_location");
                        delLocBtn.attr("del_loc_id", item.loc_id);//添加属性


                        var opTd = $("<td></td>").append(editLocBtn).append(delLocBtn);
                        if (parseInt(item.loc_risklevel) == 0) {
                            $("<tr bgcolor='#baffaa'></tr>")
                                .append(loc_idTd)
                                .append(loc_nameTd)
                                .append(loc_risklevelTd)
                                .append(opTd)
                                .appendTo("#updateLocation_table tbody");
                        }
                        if (parseInt(item.loc_risklevel) == 1) {
                            $("<tr bgcolor='#fff3c5'></tr>")
                                .append(loc_idTd)
                                .append(loc_nameTd)
                                .append(loc_risklevelTd)
                                .append(opTd)
                                .appendTo("#updateLocation_table tbody");
                        }
                        if (parseInt(item.loc_risklevel) == 2 || parseInt(item.loc_risklevel) == 3) {
                            $("<tr bgcolor='#ffb5ab'></tr>")
                                .append(loc_idTd)
                                .append(loc_nameTd)
                                .append(loc_risklevelTd)
                                .append(opTd)
                                .appendTo("#updateLocation_table tbody");
                        }
                    });
                    var locationPageInfo = result.extend["locationPageInfo"];

                    if (locationPageInfo.pageNum == 1) {
                        var page = '<ul class="pagination">\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.nextPage + ')">下一页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                            ' </ul>';
                    } else if (locationPageInfo.pageNum == locationPageInfo.pages) {
                        var page = '<ul class="pagination">\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.prePage + ')">上一页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                            ' </ul>';
                    } else {
                        var page = '<ul class="pagination">\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + 1 + ')">首页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.prePage + ')">上一页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pageNum + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link"><span>第' + locationPageInfo.pages + '页</span></a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.nextPage + ')">下一页</a></li>\n' +
                            '    <li class="page-item"><a class="page-link" οnclick="selectPage(' + locationPageInfo.pages + ')">尾页</a></li>\n' +
                            ' </ul>';
                    }
                    $("div#main").append(page);
                } else if (result.code == 100) {
                    $("div#main").append('<div class="alert alert-success">\n' +
                        ' <strong>无城市信息</strong>\n' +
                        '</div>');
                }
            }, error: function (result) {
                alert("error!");
            }
        });
    }

Msg.java

package com.rzab.pojo;

import java.util.HashMap;
import java.util.Map;

public class Msg {
    //返回编码：100成功，200失败:
    private int code;
    //返回成功或失败的信息:成功，失败
    private String msg;
    //返回的结果集
    private Map<String,Object> extend=new HashMap<String,Object>();
    //setter and getter
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map<String, Object> getExtend() {
        return extend;
    }
    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
    //成功
    public static Msg success() {
        Msg result=new Msg();
        result.setCode(200);
        result.setMsg("处理成功！");
        return result;

    }

    //失败
    public static Msg fail() {
        Msg result=new Msg();
        result.setCode(100);
        result.setMsg("处理失败！");
        return result;
    }
    //添加返回的数据
    public Msg add(String key,Object value) {
        this.getExtend().put(key, value);
        return this;
    }

    @Override
    public String toString() {
        return "Msg{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", extend=" + extend +
                '}';
    }
}
热着爱吧
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5简单的jq分页效果,jquery实现的分页显示功能示例
weixin_36354355的博客
06-03 642
本文实例讲述了jquery实现的分页显示功能。分享给大家供大家参考，具体如下：我们在显示文章列表的时候，通常需要分页显示。一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。html代码js代码$(function(){showPage(1);});function showPage(page...
app_management_system:基于SSM的App信息管理系统，前端采用Layui + Ajax，后端基于SSM+MySQL+PageHelper
05-14
app_management_systemApp信息管理系统一、开发工具InteliJ IDEA 2019Maven 3.6.1二、.功能介绍1. 增删改查2. 分页查询3. ajax三、技术支持1.... 分页插件 PageHelper6. 逆向工程-mybatis-generator四、项目截图
实现分页展示 -- mybatis插件pagehelper -- ajax异步
qq_44058265的博客
09-25 523
文章目录添加依赖分页插件的配置1. 实现分页展示 -- mybatis插件pagehelper1.1 业务逻辑层 -- ProductInfoService接口中，添加分页功能splitPage1.2 业务逻辑层 -- ProductInfoServiceImpl中，实现splitPage，完成分页1.3 界面控制层 -- ProductInfoAtion中，添加splitPage，传递数据到前台product.jsp1.4 product.jsp前台接收数据1.5 分页的AJAX实现1.6 界面控制层 -
Servlet+Html5+ajax 实现简单分页
zhouzhiwengang的专栏
08-17 4215
Servlet ------dao层package com.vixuan.dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import c
后端学习-学生成绩管理系统(html+ajax+servlet实现)
NH4L的博客
12-06 6351
一、前言 本学生成绩管理系统运用html+ajax+servlet,未使用任何框架，且未用jsp实现，前后端数据统一用json传输(Gson包)。 本系统基于上次的纯前端学生成绩系统实现。 整体结构： 二、主要功能实现 1.成绩列表 为了方便ajax和servlet之间的json传输，于是创建实体类StudentInfo，方便后续直接利用Gson将Student类转化为对应的json,下述代码未给...
前台html+ajax 后台 servlet交互
亦寒的博客
08-08 5026
前台html+ajax 后台 servlet交互
ssm-crud:SSM + Maven + BootStrap 整合案例
05-19
分页 - pagehelper 逆向工程 - MyBatis Generator 二、环境搭建： 创建一个maven工程 引入项目依赖的jar包 spring springmvc mybatis 数据库连接池，驱动包 其他（jstl，servlet-api，junit） 引入bootstrap前端框架...
atguigu_ssm_crud：Atguigu-SSM-CRUD一个最基本的CRUD系统，采用IDEA + Maven构建，采用前交叉交互功能，前端采用BootStrap + Ajax逐步请求DOM渲染，采用SpringMVC + MyBatis + Mysql8.0 + Servlet + Jsp ，符合REST风格URL规范，并加入了Hibernate提供的数据校正功能，支持PageHelper的分页功能，很适合SSM阶段性练习。同时用到了很多前端操作以及BootStrap组件，也有利于学习JS和前
02-03
SSM-CRUD（） 一，开发工具 InteliJ IDEA 2019 Maven 3.6.1 二，。功能介绍 1.增删改查 2.分页查询 3.数据校验 前端验证（JS） 初步验证（JSR303） 4. ajax 5. Rest风格URI： 使用Http协议请求方式的动词，来表示对...
PageHelper实现前端分页
06-02
使用Mabatis中的分页插件PageHelper实现分页功能，此插件使用简单加快项目的开发效率。
Java项目:点餐系统(java+Springboot+ssm+mysql+maven)
03-15
本系统中的购物车功能设计、io流读写图片存放本地、订单导出、“echarts插件实现订单信 息统计、后台批量操作、pagehelper实现分页等细节值得 学习。 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + mysql + ...
ssm 整合+分页
02-11
资源包括spring4，struts2，mybatis3的整合，有完善的分页、还有上传下载，clob字段的操作，当然不会少基本的增删改查，注释详细。
html+ajax+ssm写的增删改查
04-02
通过父子页面来实现：增删改查，子页面通过文本框，来获取父页面的数据，不过网页特别的简陋。
html ajax分页,简单ajax 分页
weixin_42492543的博客
06-20 265
简单分页：效果图：思路：数据渲染=》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator()点击分页和下一页的时候，重新请求数据渲染，对应的数据重新遍历。代码实现：html:分页测试integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" cr...
Spring Boot系列（七）、SpringBoot整合PageHelper分页组件以及前端js分页插件
一宿君
08-10 785
七、SpringBoot整合pageHelper分页组件以及前端js分页插件1、PageHelper简介2、PageHelper支持物理分页的数据库3、SpringBoot集成PageHelper 1、PageHelper简介 我们知道mysql实现分页查询，要使用limit分页公式：curPage是当前第几页；pageSize是一页多少条记录，limit (curPage-1)*pageSize,pageSize； select * from dept order by deptno desc limi
ssm+Jquery+Ajax+pagehelper（后端）分页查询（详细步骤）
qq_37259112的博客
09-28 1636
本篇文章分两部分，这是后端部分，还有页面部分 后端实现分页必须下载 page.jar包然后build Path 到工程中 分页插件pagehelper.jar： https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper/pagehelper/http://repo1.mave...
一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js
noteless的博客
12-04 7690
之前做分页功能一直都没有找到一个比较合适的完整的方式,现整理下完整的流程.给大家展示一个完整的流程 项目:springMVC+mybatis+mysql 我们需要使用到的插件主要有: PageHelper:主要用于后台分页 以及pageUtils.js脚本,用于前台分页 --------------------------------------------------------...
ssm实现分页
crazy_lala的博客
07-05 2332
之前实现分页，都是写好后端就行，今天要自己全面实现一个分页，不知从何下手，也查了很多，但是基本都是说什么重构框架，自己写sql，计算前一页，前端 js 实现之类的，看的是云里雾里，后来也成功实现了分页，在此记录一下，希望能对大家有帮助。 一、maven pom文件中导入依赖（若没有使用响应的maven构建项目，导入相应的jar包即可） <dependency> <gro...
ssm——整合，前端页面设计，分页
zhiyikeji的博客
11-29 4237
1.创建mave项目 1.先创建一个maven项目，创建完成之后， 右单击项目-&amp;gt;Build Path-&amp;gt;Config Build Path-&amp;gt;Java Build Path-&amp;gt;Libaryies-&amp;gt;Add Libary -&amp;gt;Server Runtime选择你安装tomcat 然后点击Apply; 2.右单击项目-&amp;gt;Build Path-&am
SSM-7 前端AJAX 获取数据并展示
rendiqi的博客
06-27 6024
拖了两天，继续。前段基于bootstrap  参考一些模板代码，简单架构起来一些页面，然后是数据呈现的问题了。    实用ajax方式获取数据，应该是比较方便的。 jsp页面
SSM+SHRIO+AJAX+MD5的登录详细代码
最新发布
06-11
以上是基于SSM+Shiro+Ajax+MD5的登录的详细代码，其中包括了前端页面代码、后端代码、实体类代码和配置文件代码。该代码实现了基本的登录功能，包括了用户名密码校验、验证码校验、MD5加密等功能。可以根据需求进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值