快捷導(dǎo)航

在SSM框架下用laypage和ajax實現(xiàn)分頁和數(shù)據(jù)交互的方法

更新時間：2019年09月27日 09:05:20 作者：Hello洪同學(xué)

今天小編大家分享一篇在SSM框架下用laypage和ajax實現(xiàn)分頁和數(shù)據(jù)交互的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

layui，一款前端框架，提供了豐富的組件和模板，layui提供的簡約后臺管理模板，對于后端學(xué)習(xí)者來說是個不錯的福音。這里記錄在SSM框架下使用layui的分頁組件laypage。(官網(wǎng)開發(fā)文檔)

環(huán)境 Spring+SpringMVC+Mybatis , jquery-3.1.0.min.js , mysql-connector-java-5.1.34

前端代碼主要參考的是layui官網(wǎng)給定的代碼，加載layui.css和layui.js；除此之外，介于接下來用ajax與后臺進行數(shù)據(jù)交互，因此這里也需要加載jquery的文件，我這里加載的是jquery-3.1.0-min.js。

主要代碼如下：

<div id="demo"></div> //定義分頁
<script type="text/javascript">
var url = "http://localhost:8080/HRM/";
$(document).ready(function(){
  layui.use(['form','laypage', 'layer'], function(){
  var laypage = layui.laypage,layer = layui.layer;
  laypage({
  cont: 'demo', //跟頁面前面div的id一樣
  pages: ${endPage} , //總頁數(shù)
  groups: 5 , //連續(xù)顯示分頁數(shù)
  jump: function(obj, first){
  //得到了當(dāng)前頁，用于向服務(wù)端請求對應(yīng)數(shù)據(jù)
  var curr = obj.curr -1;
  var self = this;
  $.ajax({
   //這里省略了ajax數(shù)據(jù)交互
  });
 });
});
</script>

后端采用SpirngMVC和Mybatis進行數(shù)據(jù)處理。

創(chuàng)建Dao接口

List<Jobinfo> selectPageInfoByDel(@Param("start") int start); //獲取頁面數(shù)據(jù)
int countNumber(); //記錄總的條數(shù)

編寫Mapper.xml

這里主要用到了mysql的limit，limit從下標(biāo)0開始，limit0,8表示的是從下標(biāo)0開始，查詢8條數(shù)據(jù)。

<select id="selectPageInfoByDel" resultMap="BaseResultMap" parameterType="java.lang.Integer">
  select id,c_id,job,number,salary,more_salary,date from jobinfo where is_del = 1 order by id DESC limit #{start,jdbcType=INTEGER},8
</select>
<select id="countNumber" resultType="java.lang.Integer">
  select count(*) from jobinfo where is_del =1
</select>

創(chuàng)建一個Page的pojo類

public class Page<T> implements Serializable {
 private static final long serialVersionUID = 337297181251071639L;
 private Integer page;//當(dāng)前頁
 private Integer rows;//頁大小
 private Integer totalRecord;// 總記錄數(shù)
 private Integer firstPage; //首頁
 private Integer endPage; //末頁 
 private List<T> list;//頁面數(shù)據(jù)列表
 //這里省略的get和set的方法
}

創(chuàng)建Service接口

//查看分頁的信息
public List<Jobinfo> selectPageInfo(int page);
//查看所有信息的總數(shù)
int getCount();

創(chuàng)建Service的實現(xiàn)類impl

//這里省略了Dao的實例化，只顯示service接口的實現(xiàn)方法
public List<Jobinfo> selectPageInfo(int page) {
 int rows = 8; //一頁顯示8條數(shù)據(jù)
 int start = page*rows; //這里表示數(shù)據(jù)庫從第幾條數(shù)據(jù)開始查詢（limit從下標(biāo)0開始）
 return jobDao.selectPageInfoByDel(start);
}
public int getCount() {
 return jobDao.countNumber();
}

編寫Controller

@RequestMapping("page")
public @ResponseBody Page<Jobinfo> selectPageInfo(HttpServletRequest request, Model model,@RequestParam("start") int start){
  List<Jobinfo> list= jobinfoService.selectPageInfo(start);
 Page<Jobinfo> pageInfo = new Page<Jobinfo>();
 int count = jobinfoService.getCount(); //獲取總數(shù)
 int endPage = 0;
 //8條數(shù)據(jù)為一頁
 if(jobinfoService.getCount()%8==0){
  endPage = jobinfoService.getCount()/8;
 }else{
  endPage = jobinfoService.getCount()/8 +1 ;
 } 
 pageInfo.setPage(start+1);
 pageInfo.setTotalRecord(count);
 pageInfo.setList(list);
 pageInfo.setRows(8);
 pageInfo.setFirstPage(1);
 pageInfo.setEndPage(endPage);
 return pageInfo;
}

運行結(jié)果

事實上，整體功能的實現(xiàn)在頁面與后臺用ajax傳遞數(shù)據(jù)那一塊花費了一下時間，因為第一次接觸到layui，也漸漸感受到了layui與傳統(tǒng)ajax數(shù)據(jù)傳遞的不同，layui對方法進行了封裝，因此用ajax傳數(shù)據(jù)的時候也需依于框架進行。

以上這篇在SSM框架下用laypage和ajax實現(xiàn)分頁和數(shù)據(jù)交互的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: