SSM整合--ajax实现分页功能()

接口：

public int count();//查询分页总记录数
public List<smbms_user> pageOne(Map<String,Object> map);//获取单页数据

小配置：

   <!--Ajax??-->
<select id="count" resultType="int">
    SELECT COUNT(*)  FROM  smbms_user
</select>
<select id="pageOne" resultType="smbms_user">
    SELECT * FROM smbms_user limit #{PageIndex},#{PageSize}
</select>

实体类：

service层：

     接口：

     

public int count();//查询分页总记录数
public page pageOne(int PageIndex, int PageSize);

接口实现：

/* Ajax分页*/
public int count() {
    return userDao.count();
}
public page pageOne(int pageIdex, int pagesize) {
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("PageIndex",pageIdex*pagesize);
    map.put("PageSize",pagesize);
    page pg=new page();
    pg.setPageIdex(pageIdex);
    pg.setPagesize(pagesize);
    int count=userDao.count();
    pg.setTotalRecords(count);
    int totalPage=pg.getTotalRecords()%pg.getPagesize()==0?pg.getTotalRecords()/pg.getPagesize():pg.getTotalRecords()/pg.getPagesize()+1;
    pg.setIntalpage(totalPage);
    List<smbms_user> user=userDao.pageOne(map);
    pg.setList(user);
    return pg;

Controller：

@Controller()
@RequestMapping("/user")
public class userController {
/*植入service*/
    @Resource(name = "userService")
    UserService service;

 /*Ajax分页
让用户看到该视图*/
@RequestMapping("/showUserList")
public String showUserList()
{
    return "userlist1";
}
@ResponseBody
@RequestMapping(value = "/getUserInfo",method = RequestMethod.POST)
public Object getUserInfo(@RequestParam(defaultValue = "1")int pageIdex,@RequestParam(defaultValue = "2") int pagesize){
    return service.pageOne(pageIdex,pagesize);
}

}

xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd

       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd

        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd

         http://www.springframework.org/schema/mvc
         http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--包扫描器-->
    <context:component-scan base-package="bdqn"></context:component-scan>
    <!--mvc注解驱动  作用：创建7个HttpMessaeingConvert-->
    <mvc:annotation-driven></mvc:annotation-driven>
    <!--视图解析器-->

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!--1.识别jdbc.properties-->
    <context:property-placeholder location="classpath:database.properties"></context:property-placeholder>


    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${database.driver}"></property>
        <property name="url" value="${database.url}"></property>
        <property name="username" value="${database.username}"></property>
        <property name="password" value="${database.password}"></property>
    </bean>
    <!--3.配置SqlSessionFactoryBean-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--引用数据源组件-->
        <property name="dataSource" ref="dataSource"></property>
        <!--引用mybatis配置文件中的配置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"></property>
    </bean>

<!--4.dao 实现类，映射文件的扫描可以动态的在内存中构建接口的实现类，代理对象-->
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="bdqn.dao"></property>
</bean>

    <!--06.事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>

    <!-- 07.AspectJ AOP 配置事务 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager"></tx:advice>

</beans>

Mybatis-Config：

<?xml version="1.0" encoding="UTF-8" ?>
        <!DOCTYPE configuration
                PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
                "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
      <typeAliases>
           <package name="bdqn.entity"></package>
      </typeAliases>
</configuration>

databais-propertices：

database.driver=com.mysql.jdbc.Driver
database.url=jdbc:mysql://localhost:3306/smbms
database.username=root
database.password=1234

页面(ajax)：

<%@ page pageEncoding="utf-8"  isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js1/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js1/jQuery1.11.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js1/jquery.pagination.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(function($){
            //加载数据
            load(0);
            function  load(index) {
                $.ajax({
                    url:"/user/getUserInfo",
                    type:"post",
                    data:{"pageIdex":index},
                    success:function (data){
                        $('#list-content').html('');
                        //模拟ajax去后端读取页数，获取数据并渲染列表的过程
                        $.each(data.list,function (i,dom) {
                            $('#list-content').append('<tr><td>' + dom.id + '</td><td>' + dom.userCode + '</td><td>' + dom.userName + '</td><td>' + dom.gender + '</td><td>' + dom.birthday + '</td><td>' + dom.phone + '</td><td>' + dom.address + '</td>' +
                                '<td><a href="${pageContext.request.contextPath}/user/All/'+dom.id+'"><img src="../../img/read.png" alt="查看" title="查看"/></a>'+
                                '<a  href="${pageContext.request.contextPath}/user/getAll/'+dom.id+'"><img src="../../img/xiugai.png" alt="修改" title="修改"/></a>'+
                                '<a href="${pageContext.request.contextPath}/user/dellUser/'+dom.id+'" class="removeUser"><img src="../../img/schu.png"  alt="删除" title="删除"/></a>'+
                                '</td></tr>');
                        });
                        //渲染分页
                        $('#pagination').pagination(data.totalRecords, {
                            current_page : index, //当前页索引
                            items_per_page : data.pagesize, //每页记录数
                            num_display_entries :2, //显示页码块数量
                            callback :load,
                            load_first_page : true,
                            prev_text : 'Previous',
                            next_text : 'Next'

                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>
    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
        <a href="login.html">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li><a href="billList.html">账单管理</a></li>
                <li><a href="providerList.html">供应商管理</a></li>
                <li  id="active"><a href="">用户管理</a></li>
                <li><a href="password.html">密码修改</a></li>
                <li><a href="login.html">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面</span>
        </div>
        <form method="post" action="${pageContext.request.contextPath}/user/name">
            <div class="search">
                <span>用户名：</span>
                <input type="text"  name="name" placeholder="请输入用户名"/>
                <input type="submit" value="查询"/>
                <a href="${pageContext.request.contextPath}/user/userAdd">添加用户</a>
            </div>
        </form>
        <!--用户-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">用户id</th>
                <th width="10%">用户编码</th>
                <th width="20%">用户名称</th>
                <th width="10%">性别</th>
                <th width="10%">年龄</th>
                <th width="10%">电话</th>
                <th width="10%">用户类型</th>
                <th width="30%">操作</th>
            </tr>
            <tbody id="list-content"></tbody>
            <tr>
            </tr>
        </table>

        <div class="pagination" id="pagination" style="margin:4px 0 0 0"></div>

    </div>
</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

<footer class="footer">
    版权归北大青鸟
</footer>

<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/js.js"></script>
<script src="${pageContext.request.contextPath}/js/time.js"></script>

</body>
</html>

效果图