快捷導(dǎo)航

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

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

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

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

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

參考文檔 layui-laypage參數(shù)文檔

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

主要代碼如下：

<div id="demo"></div> //定義分頁(yè)
<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', //跟頁(yè)面前面div的id一樣
  pages: ${endPage} , //總頁(yè)數(shù)
  groups: 5 , //連續(xù)顯示分頁(yè)數(shù)
  jump: function(obj, first){
  //得到了當(dāng)前頁(yè)，用于向服務(wù)端請(qǐng)求對(duì)應(yīng)數(shù)據(jù)
  var curr = obj.curr -1;
  var self = this;
  $.ajax({
   //這里省略了ajax數(shù)據(jù)交互
  });
 });
});
</script>

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

創(chuàng)建Dao接口

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

編寫(xiě)Mapper.xml

這里主要用到了mysql的limit，limit從下標(biāo)0開(kāi)始，limit0,8表示的是從下標(biāo)0開(kāi)始，查詢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)建一個(gè)Page的pojo類

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

創(chuàng)建Service接口

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

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

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

編寫(xiě)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ù)為一頁(yè)
 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;
}

運(yùn)行結(jié)果

事實(shí)上，整體功能的實(shí)現(xiàn)在頁(yè)面與后臺(tái)用ajax傳遞數(shù)據(jù)那一塊花費(fèi)了一下時(shí)間，因?yàn)榈谝淮谓佑|到layui，也漸漸感受到了layui與傳統(tǒng)ajax數(shù)據(jù)傳遞的不同，layui對(duì)方法進(jìn)行了封裝，因此用ajax傳數(shù)據(jù)的時(shí)候也需依于框架進(jìn)行。

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

您可能感興趣的文章: