基于增删查改功能的,用户列表分页显示、搜索功能实现

改动代码:
一、bean.PageInfo代码:

//PageInfo.java
public class PageInfo<T> {
    //存储用户列表
    private List<T> list;
    //单页的数据项数量
    private int size;
    //总页数
    private int totalPage;
    //数据项总数
    private int totalCount;
    //当前页数
    private int currentPage;

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    @Override
    public String toString() {
        return "PageInfo{" +
                "list=" + list +
                ", size=" + size +
                ", totalPage=" + totalPage +
                ", totalCount=" + totalCount +
                ", currentPage=" + currentPage +
                '}';
    }
}


二、UserDao中新增getTotalCount,修改findAll:

//UserDao.java
public interface UserDao {

    User findByUserName(String username);

    //List<User> findAll();
    //显示在同一页的UserList
    List<User> findAll(@Param("start") int start,@Param("username") String username);

    void add(User user);

    void deleteByID(int id);

    User selectByID(int id);

    void update(User user);

    //获取搜索的总数
    int getTotalCount(@Param("username")String username);


}

三、UserMapper新增sql语句

<mapper namespace="com.whut.dao.UserDao" >

    <select id="findAll" resultType="User">
        select * from user
        <if test="username!=null and username!=''">
            where username like concat("%",#{username},"%")
        </if>
        limit #{start},5
    </select>
    
    <select id="getTotalCount" resultType="int">
        select count(*) from user
        <if test="username!=null and username!=''">
            where username like concat("%",#{username},"%")
        </if>
    </select>
</mapper>

四、更新在UserServiceImpl.java与UserController.java中的findAll方法:

	//UserServiceImpl.java
	@Override
    public PageInfo<User> findAll(int currentPage, String username) {
        PageInfo<User> pageInfo = new PageInfo<>();
        pageInfo.setSize(5);
        //获取总共的记录条数
        int tc = userDao.getTotalCount(username);
        //获取总页数
        int tp = (int)Math.ceil(tc/5.0);
        pageInfo.setTotalCount(tc);
        //设置页数的范围
        if(currentPage<1){
            pageInfo.setCurrentPage(1);
        }else if(currentPage>tp){
            pageInfo.setCurrentPage(tp);
        }else{
            pageInfo.setCurrentPage(currentPage);
        }
        int start = (pageInfo.getCurrentPage()-1)*5;
        List<User> userList = userDao.findAll(start,username);
        pageInfo.setList(userList);
        return pageInfo;
    }
//UserController.java
	@RequestMapping("/findAll.do")
    public  ModelAndView findAll(@RequestParam(defaultValue = "1")int currentPage, String username,
                                 @RequestParam(defaultValue = "0")int type, HttpSession httpSession){
        if(type==1){
            httpSession.setAttribute("searchName",username);
        }else{
            username=(String) httpSession.getAttribute("searchName");
        }
        PageInfo<User> pageInfo = userService.findAll(currentPage,username);
        ModelAndView mv = new ModelAndView();
        mv.addObject("pageInfo",pageInfo);
        mv.setViewName("user-list");
        return mv;
    }

六、新增 user-list.jsp:

<form action="${pageContext.request.contextPath}/user/findAll.do?type=1"
  method="post">
		<div class="col-md-4 data1">
			<input type="text" class="form-control" name="username"
				   placeholder="username" value="">
		</div>
		<button type="submit" class="btn bg-maroon">搜索</button>
	</form>

<div class="box-tools pull-right">
	<ul class="pagination">
		<li><a href="/user/findAll.do" aria-label="Previous">首页</a></li>
		<li><a href="/user/findAll.do?currentPage=${pageInfo.currentPage-1}">上一页</a></li>
		<c:forEach begin="1" end="${pageInfo.totalPage}" var="pageNum">
			<li><a href="/user/findAll.do?currentPage=${pageNum}">${pageNum}</a></li>
		</c:forEach>
		<li><a href="/user/findAll.do?currentPage=${pageInfo.currentPage+1}">下一页</a></li>
		<li><a href="/user/findAll.do?currentPage=${pageInfo.totalPage}" aria-label="Next">尾页</a></li>
	</ul>
</div>

注:本文根据线上实习内容编写,如有雷同纯属同老师

基于HTML表格的数据增删查改分页查询是通过HTML、CSS、JavaScript等前端技术结合后端语言实现的一个功能强大的数据管理功能。在HTML中,我们可以通过<table>标签来创建表格,通过<tr>、<th>和<td>标签来创建表格行、表头和单元格。在数据增删查改方面,可以通过JavaScript来实现客户端的交互和数据处理,也可以通过后端语言比如PHP来实现与数据库的交互。 数据的增加可以通过在表格最后一行添加一个“新增”按钮,点击按钮后可以弹出一个表单用于输入新数据,然后通过JavaScript将新数据插入到表格中,或者通过后端语言将新数据插入到数据库中并刷新表格。 数据的删除可以通过在每行数据后添加一个“删除”按钮,点击按钮后可以通过JavaScript提示用户确认是否删除,然后再从表格中删除对应的数据,或者通过后端语言删除数据库中对应的数据并刷新表格。 数据的查询可以通过在页面上添加搜索框,用户可以在搜索框中输入关键词,然后通过JavaScript过滤表格中的数据并展示符合条件的数据,或者通过后端语言从数据库中查询符合条件的数据并刷新表格。 数据的修改可以通过在每行数据后添加一个“编辑”按钮,点击按钮后可以弹出一个表单用于修改数据,然后通过JavaScript实现数据的修改并更新到表格中,或者通过后端语言修改数据库中对应的数据并刷新表格。 对于分页查询,可以通过JavaScript实现前端分页功能,也可以通过后端语言实现后端分页功能,从而实现大量数据的分页展示和查询。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值