ssm分页条件查询（纯ajax写不含任何样式）

最新推荐文章于 2023-02-08 11:21:03 发布

冷冻上帝

最新推荐文章于 2023-02-08 11:21:03 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/lenglengya/article/details/91388825

版权

首先啊！我用的ssm框架，我得springmvc应该是4.0的，然后在这个xml文件里加如下代码，作用是用到@ResponseBody自动把返回值转化为json：

 <bean
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
            	<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
               <!--   <ref bean="mappingJacksonHttpMessageConverter" />-->
            </list>
        </property>
    </bean>

还有用到fastjson jar包，主要的是最后三个，第一个我看也是fastjson，我就贴上来了，不知道少第一个会不会出错

	<dependency>
	    <groupId>com.alibaba</groupId>
	    <artifactId>fastjson</artifactId>
	    <version>1.2.4</version>
	</dependency>
	<dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-core</artifactId>
     <version>2.7.3</version>
   </dependency>
  <dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.7.3</version>
  </dependency>
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.7.3</version>
	</dependency>

然后是工具类分页的工具类：

public class PageHolder<T> {

    private int curPage;// 当前页
    private int pageNum;// 每页条数
    private int totalCount;// 总记录数
    private int totalPage;// 总页数
    private int offset;// 起始记录数
    private List<T> data;// 数据

    public PageHolder(int curPage, int pageNum, int totalCount) {
        this.curPage = curPage;
        this.pageNum = pageNum;
        this.totalCount = totalCount;
        init();
    }

    private void init() {
        processTotalPage();
        processOffset();
    }

    private void processTotalPage() {
        this.totalPage = (totalCount % pageNum) == 0 ? totalCount / pageNum : totalCount / pageNum + 1;
    }

    private void processOffset() {
        this.offset = (curPage - 1) * pageNum;
    }

    public int getCurPage() {
        return curPage;
    }

    public int getPageNum() {
        return pageNum;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public int getOffset() {
        return offset;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

还有返回封装类：

package com.jk.shop.model;

public class ResultData<T> {
	 /**
     * 信息状态码，0表示成功，1表示失败
     */
    private Integer code;
    /**
     * 提示信息
     */
    private String msg;
    /**
     * 返回的对象,因为有分页信息，方便返回json数据见名之意，这里直接变量名为pageInfo。
     */
    private T pageInfo;

    /**
     * 成功时调用的函数
     * @param object 要返回的对象
     * @return
     */
    public static ResultData<Object> success(Object object) {
        ResultData result = new ResultData();
        result.setCode(200);
        result.setMsg("成功");
        result.setPageInfo(object);
        return result;
    }

    /**
     * 成功时，如果没有要返回的对象，调用此方法
     * @return
     */
    public static ResultData<Object> success() {
        ResultData result = new ResultData();
        result.setCode(200);
        result.setMsg("成功");
        result.setPageInfo(null);
        //return success(null);
        return result;
    }

    /**
     * 失败时调用的函数
     * @return
     */
    public static ResultData<Object> fail() {
        ResultData result = new ResultData();
        result.setCode(100);
        result.setMsg("失败");
        return result;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getPageInfo() {
        return pageInfo;
    }

    public void setPageInfo(T pageInfo) {
        this.pageInfo = pageInfo;
    }

    @Override
    public String toString() {
        return "ResultData{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", pageInfo=" + pageInfo +
                '}';
    }
}

然后是前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户列表</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var curPage = 1;
	listFlow(curPage,name);
})
</script>
<script type="application/javascript" id="my">
    var curPage = 1
    var pageNum = 5 // 每页条数
    var totalPage = 1
    var name=$("#name").val()
    // 首页
    function first() {
        curPage = 1
        
        listFlow(curPage,name)
    }

    // 尾页
    function last() {
        curPage = totalPage
        listFlow(curPage,name)
    }

    // 上一页
    function pre() {
        if (1 >= curPage){
            return false        
　　　　　}
        curPage -= 1
        listFlow(curPage,name)
    }

    // 下一页
    function next() {
        if (curPage >= totalPage) {
            return false
        }
        curPage += 1
        listFlow(curPage,name)
    }

    // 当前页 / 总页数
    function curPageAndTotalPage(a, b) {
      $('#curPage_totalPage').html(a + '/' + b)
    }

    function getPageNum(pageNumN) {
        pageNum = pageNumN
        listFlow(curPage,name)
    }

    function listFlow(curPage,name) {
        $.ajax({
            type: 'post',
            dataType: 'json',
            //contentType:"application/json;charset=UTF-8",
            url: '<%=request.getContextPath() %>/kehu/pageKepu.do',
            data: {
                name:$("#name").val(),
                curPage: curPage,
                pageNum: 5
            },
            success: function (pageInfo) {
				console.log(pageInfo)
                var flows = pageInfo.pageInfo.data

                totalPage = pageInfo.pageInfo.totalPage
                curPage=pageInfo.pageInfo.curPage
                curPageAndTotalPage(curPage, totalPage)

                var msg = '没有任何数据'

                for (var i=0; i< flows.length; i++){
                    var flow = flows[i]
                    msg += "<tr>"
                    msg += "<td>"+ flow.name +"</td>"
                    msg += "<td>"+ flow.khlxr +"</td>"
                    msg += "<td>"+ flow.khphone +"</td>"
                    msg += "<td>"+ flow.ye +"</td>"
                    msg += "<td>"+ flow.usertyoe +"</td>"
                    msg += "<td>"+ flow.xsr +"</td>"
                    msg += "<td>"+ flow.lable +"</td>"
                   msg += "<td><a href='javascript:void(0)' onclick=deleteEmp('"+flow.id+"')>删除</a>&nbsp;&nbsp;<a href=<%=request.getContextPath()%>/kehu/updateView.do?id="+flow.id+">修改</a></td>"
                    msg += "</tr>"
                }					
                $("#flowListDiv").html(msg)
            }
        })
    }
    
	function deleteEmp(id){
		    $.ajax({
		        url : "<%=request.getContextPath()%>/kehu/deleteKehu.do",
		        type : "POST",
		        data : {
		            "id" : id
		        },
		        success : function(data) {
		            if(data=="fail"){
		            alert("请先删除此客户下关联的子号码！");
		            }else{
		            	// 删除成功后刷新页面
			            window.location.reload();
		            }
		        },
		        error : function() {
		            alert("请求失败");
		        },
		        dataType : "json"
		    });
	}
    
</script>
</head>
<body>
   客户民称：<input name="name" id="name" type="text" value="${name}"/><button type="button" onClick="listFlow(curPage,name)" >查询</button>
<a href="<%=request.getContextPath()%>/kehu/Jumpinsert.do">增加客户</a>   
<table id="tb"  width="900" border="1" cellspacing="0" cellpadding="0">
	<thead>
   <tr>
     <td>客户名称</td>
		<td>联系人</td>
		<td>联系号码</td>
		<td>余额</td>
		<td>用户类型</td> 
		<td>销售人</td>
		<td>标签</td>
		<td>操作</td>
   </tr>
	</thead >
	<tbody id="flowListDiv">
	</tbody>
   </table>
	<table>
	<tr>
	<td><input type="button" onclick="first()" value="首页"></td>
	<td><input type="button" onclick="last()" value="尾页"></td>
	<td><input type="button" onclick="pre()" value="上一页"></td>
	<td><input type="button" onclick="next()" value="下一页"></td>
	<td>当前页：</td>
	<td id="curPage_totalPage"></td>
	</tr>
	</table>

  </body>
</html>

然后是controller的和sql.xml，service和持久层，我就不写了，没啥逻辑，自动生成就行，

@Controller
@RequestMapping("/kehu")
public class KehuController {
	@Autowired
	private KehuService kehuService;
	@Autowired
	private ZihaomaService zihaomaService;
	
	
	/**
	 * 调到查询页面
	 * @return
	 */
	@RequestMapping(value="/jumppage")
	public String jumppage(){
		
		return "kehu/list2";
	}
	 
	/**
	 * 分页查询
	 * @param name
	 * @param curPage
	 * @param pageNum
	 * @return
	 */
	@RequestMapping(value="/pageKepu")
	@ResponseBody
	public ResultData<Object> pageKepu(@RequestParam(value="name",required=false)String name,@RequestParam(value="curPage",required=false)Integer curPage,@RequestParam(value="pageNum",required=false)Integer pageNum){
		KehuExample kehuExample=new KehuExample();
		kehuExample.setName(name);
		
		//查询总条数，记住带查询条件，就算是空也没事，sql.xml做判断
		int totalCount = kehuService.selectcount(kehuExample);
		
		
		PageHolder<KehuExample> pageinfo=new PageHolder<KehuExample>(curPage, pageNum,totalCount);
		
		//这个就是查询分页的（带查询参数和一些分页用到的参数）
		List<KehuExample> list=kehuService.findPageListBySQL(pageinfo.getOffset(),pageNum,name);
		pageinfo.setData(list);
		return ResultData.success(pageinfo);
	}

这是查询总条数的sql：

 <select id="countByExample" parameterType="com.jk.shop.model.kehu.KehuExample" resultType="java.lang.Long">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Tue Jun 04 14:26:44 CST 2019.
    -->
    select count(*) from kehu
    <where>
    <if test="name != null and name !=''">
   	name like "%"#{name}"%"
    </if>
    </where>
  </select>

这是分页的sql：

<select id="findPageListBySQL" resultMap="BaseResultMap">
  select * from kehu where 1=1 <if test="name !=null and name !=''">and name like "%"#{name,jdbcType=VARCHAR}"%"</if> limit #{offset,jdbcType=INTEGER},#{pageNum,jdbcType=INTEGER}
  </select>

然后是页面效果
在这里插入图片描述
ok啦，应该有的地方写的用的笨方法，如果有好的方法，请评论哦~