bootstrap-pagination外掛進行分頁demo
阿新 • • 發佈：2018-12-20
1.效果圖：
2.引入的東西：bootstrap,bootstrap-pagiontor,當然bootstrap-poginator我已上傳csdn,需要的話可以下載，當然也可以百度下載
3.實現功能：a:完成動態資料的分頁 b:實現模糊查詢分頁功能
4.頁面程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="js/bootstrap.min.css"></link> </head> <body> <div style="margin-top: 15px;margin-bottom: 15px;margin-left: 35px;"> <input type="text" style="height: 30px;" id="inputValue" placeholder="輸入班級名稱模糊查詢"/> <button id="ssub" style="height: 30px;width: 60px;border: 1px solid #67847e;background: #67847e;color: #fff">搜尋</button> </div> <!-- 分頁容器：顯示資料 --> <div> <table class="table table-bordered"> <thead> <tr> <td>編號</td> <td>班級名稱</td> <td>輔導員名稱</td> <td>輔導員編號</td> <td>貸款人數</td> <td>教師名稱</td> </tr> </thead> <tbody id="htmlDiv"> </tbody> </table> </div> <!-- 分頁容器： 顯示分頁按鈕--> <div class="col-lg-12" align="center"> <!-- 注意:3版本的分頁容器標籤是<ul>，2版本的容器標籤是<div> --> <ul id="mypage"></ul> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-paginator.min.js"></script> <script> $(function() { var valueInput= $("#inputValue").val(); pageStart(valueInput);//開始分頁 }); function pageStart(valueInput) { //分頁函式 $.ajax({ //去後臺查詢第一頁資料 type : "post", url : "../../botstrapPagation", dataType : "json", data : {'page' : '1','pageSize':'5','inputValue':valueInput}, //引數：當前頁為1 success : function(data) { appendHtml(data.data)//處理第一頁的資料 var options = {//根據後臺返回的分頁相關資訊，設定外掛引數 bootstrapMajorVersion : 3, //如果是bootstrap3版本需要加此標識，並且設定包含分頁內容的DOM元素為UL,如果是bootstrap2版本，則DOM包含元素是DIV currentPage : data.page, //當前頁數 totalPages : parseInt(data.count/5)+1, //總頁數 numberOfPages :5,//展示多少頁 itemTexts : function(type, page, current) {//設定分頁按鈕顯示字型樣式 switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } }, onPageClicked : function(event, originalEvent, type, page) {//分頁按鈕點選事件 $.ajax({//根據page去後臺載入資料 url : "../../botstrapPagation", type : "post", dataType : "json", data : {"page" : page,'pageSize':'5','inputValue':valueInput}, success : function(data) { appendHtml(data.data);//處理資料 } }); } }; $('#mypage').bootstrapPaginator(options);//設定分頁 } }); } ////展示拼接資料 function appendHtml(list) { var htmlStr=""; $("#htmlDiv").empty(); for(var i=0;i<list.length;i++){ htmlStr+='<tr><td>'; htmlStr+=list[i].idx; htmlStr+='</td><td>'; htmlStr+=list[i].className; htmlStr+='</td><td>'; htmlStr+=list[i].fdyName; htmlStr+='</td><td>'; htmlStr+=list[i].fdyNum; htmlStr+='</td><td>'; htmlStr+=list[i].loanSumNum; htmlStr+='</td><td>'; htmlStr+=list[i].teacherName; htmlStr+='</td></tr>' } $("#htmlDiv").append(htmlStr); } //點選搜尋框 $("#ssub").click(function(){ var valx=$("#inputValue").val(); pageStart(valx); }) </script> </body> </html>
5.controller程式碼：
@ResponseBody @RequestMapping("/botstrapPagation") public Map<String,Object> botstrapPagation(String page,String pageSize,String inputValue){ Map<String,Object> map=new HashMap<String,Object>(); List<ClassTable> list= dataShowService.findData(page,pageSize,inputValue); int count =dataShowService.findAlls(inputValue); map.put("data",list); map.put("count",count); map.put("page",page); return map; }
6.service程式碼：
List<ClassTable> findData( String page,String pageSize, String inputValue);
int findAlls(String inputValue);7.serviceImpl
@Override public List<ClassTable> findData(String page, String pageSize,String inputValue) { int page1=Integer.parseInt(page); int pageSize1=Integer.parseInt(pageSize); page1=(page1-1)*pageSize1; return dataShowServiceMapper.findData(page1,pageSize1,inputValue); } @Override public int findAlls(String inputValue) { return dataShowServiceMapper.findAlls(inputValue); }
8.dao
List<ClassTable> findData(@Param("page") int page1, @Param("pageSize") int pageSize1, @Param("inputValue")String inputValue);
int findAlls(String inputValue);9.mapper
<select id="findData" resultType="com.ansheng.entity.ClassTable">
select * from classtable
<if test='inputValue!="" or inputValue!=null'>
where className LIKE '%${inputValue}%'
</if>
limit #{page},#{pageSize}
</select>
<select id="findAlls" resultType="java.lang.Integer">
select count(*) from classtable
<if test='_parameter != "" and _parameter != null'>
where className LIKE '%${_parameter}%'
</if>
</select>