SSM框架+pagehelper分頁+layUI的table數據表格實現分頁demo

實現table的分頁,如果查詢的數據是多表查詢,分頁查詢時只有第一頁,解決方法:可以對查詢的數據正常分頁,再寫個SQL語句查詢數據總個數

配置:SqlSessionFactoryBean中

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"></property>
    <property name="typeAliasesPackage" value="com.jsqj.regcontrol.bean">
    </property>
    <!-- 傳入PageHelper 分頁插件 -->
    <property name="plugins">
        <array>
            <!-- 傳入插件的對象 -->
            <bean class="com.github.pagehelper.PageInterceptor">
                <property name="properties">
                    <props>
                        <!--數據庫類型-->
                        <prop key="helperDialect">mysql</prop>
                        <!--頁碼超出範圍自動修正-->
                        <prop key="reasonable">true</prop>
                    </props>
                </property>
            </bean>
        </array>
    </property>
</bean>

不使用maven,需要添加jar包(版本根據情況)
jsqlparser-1.0.jar
pagehelper-5.1.4.jar

demo結構

DAO層:
public class Student {
    private String id;

    private String name;

    private Integer age;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id == null ? null : id.trim();
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name == null ? null : name.trim();
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

**mapper層;**
public interface StudentMapper {

    List<Student> selectAll();

    int count();
}

**service層**
public interface StudentService {

    List<Student> selectAll(Integer pageNum,Integer pageSize);

    int count();
}

**serviceImpl層**
@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper stu;

    @Override
    public List<Student> selectAll(Integer pageNum,Integer pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        List<Student> students = stu.selectAll();
        return students;
    }

    @Override
    public int count() {
        return stu.count();
    }
}

**controller層**
@RestController
@RequestMapping("/findAll")
public class FindAll {
    @Autowired
    private StudentServiceImpl stu;

    /**
     * layui中table表分頁,默認是page=1,limit=10,與pagehaper參數對應,
     * layui中還需要數據的總個數count
     * @param pageNum
     * @param pageSize
     * @return
     * @throws Exception
     */
    @ResponseBody
    @RequestMapping("/student")
    public String student(@RequestParam("page") Integer pageNum, @RequestParam("limit") Integer pageSize) throws Exception {
        List<Student> students = stu.selectAll(pageNum, pageSize);
        int count = stu.count();
        JSONObject json = new JSONObject();
        json.put("code", 0);
        json.put("count", count);
        json.put("data", students);
        return json.toString();
    }
}

**xml文件**
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.dao.StudentMapper" >
  <resultMap id="BaseResultMap" type="com.example.bean.Student" >
    <result column="id" property="id" jdbcType="VARCHAR" />
    <result column="name" property="name" jdbcType="VARCHAR" />
    <result column="age" property="age" jdbcType="INTEGER" />
  </resultMap>
  
  <select id="selectAll" resultMap="BaseResultMap">
    select * from student
  </select>
  <select id="count" resultType="java.lang.Integer" >
    select count(*) from student
  </select>
</mapper>

**HTML頁面和數據綁定**
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意:如果你直接複製所有代碼到本地,上述css路徑需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test"></table>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接複製所有代碼到本地,上述js路徑需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/findAll/student'
            ,cols: [
                [
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'name', width:80, title: '姓名'}
                ,{field:'age', width:80, title: '年齡', sort: true}
                ]
            ]
            ,page: true//開啓分頁,默認page=1,limit=10
        });
    });
</script>

</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章