當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap table后端分页（ssm版）

發布時間：2023/12/10 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap table后端分页（ssm版）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說明
bootstrap table可以前端分頁，也可以后端sql用limit分頁。
這里講的是后端分頁，即實用limit。性能較好，一般均用這種
源碼下載地址：https://git.oschina.net/dshvv/pagination_byjava.git
該文主要講后端分頁：
1、前端每點擊翻頁按鈕，就會向后端發出一次請求，后端只查詢當前頁數所需要的幾條數據
2、查詢也是后端，會進入服務器

源碼?

html

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html><head><meta charset="utf-8"><title>圖片上傳</title><script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script><link rel="stylesheet" href="<%=basePath%>/plugs/bootstrap/css/bootstrap.min.css"><script type="text/javascript" src="<%=basePath%>/plugs/bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet" href="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.css"><script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.js"></script><script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table-locale-all.min.js"></script></head><body><div class="container" style="margin-top:100px"><div class="row"><div class="col-xs-6 pull-right"><div class="input-group"><input type="text" class=" form-control" name="age" placeholder="請輸入年齡"><input type="text" class=" form-control" name="name" placeholder="請輸入姓名"><span class="input-group-btn"><button class="btn btn-default search" type="button">Go!</button></span></div></div><div class="col-xs-12"><table class="table table-striped table-bordered table-hover" ></table></div></div></div><script type="text/javascript">class BstpTable{constructor(obj) {this.obj=obj;}inint(searchArgs){//---先銷毀表格 ---this.obj.bootstrapTable('destroy'); //---初始化表格,動態從服務器加載數據--- this.obj.bootstrapTable({//【發出請求的基礎信息】 url: '<%=basePath%>student/selectByFy',method: 'post',contentType: "application/x-www-form-urlencoded",//【查詢設置】/* queryParamsType的默認值為 'limit' ,在默認情況下傳給服務端的參數為：offset,limit,sort設置為 '' 在這種情況下傳給服務器的參數為：pageSize,pageNumber */queryParamsType:'', queryParams: function queryParams(params) { var param = { pageNumber: params.pageNumber, pageSize: params.pageSize}; for(var key in searchArgs){param[key]=searchArgs[key]} return param; }, //【其它設置】 locale:'zh-CN',//中文支持 pagination: true,//是否開啟分頁（*） pageNumber:1,//初始化加載第一頁，默認第一頁 pageSize: 3,//每頁的記錄行數（*） pageList: [2,3,4],//可供選擇的每頁的行數（*） sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） showRefresh:true,//刷新按鈕//【樣式設置】 height: 300,//table的高度//按需求設置不同的樣式：5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger']; rowStyle: function (row, index) {var style = "";if (row.name=="小紅") {style='success';}return { classes: style }},//【設置列】 columns: [{field: 'id',title: 'id'}, {field: 'name',title: '姓名'},{field: 'age',title: '年齡'},{field: 'tool',title: '操作', align: 'center',formatter:function(value,row,index){var element = "<a class='edit' data-id='"+row.id +"'>編輯</a> "+ "<a class='delet' data-id='"+row.id +"'>刪除</a> ";return element; } }]})}}var bstpTable=new BstpTable($("table"));bstpTable.inint({})$(".search").click(function(){var searchArgs={name:$("input[name='name']").val(),age:$("input[name='age']").val()}bstpTable.inint(searchArgs)})</script></body> </html>

controller

package com.dsh.controller;import java.util.HashMap; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.dsh.service.StudentService;@Controller @RequestMapping("student") public class StudentController {@Autowiredprivate StudentService studentService;@RequestMapping("selectByFy")@ResponseBodypublic Map<String,Object> selectByFy(int pageSize,int pageNumber,String name,Integer age){/*所需參數*/Map<String, Object> param=new HashMap<String, Object>();int a=(pageNumber-1)*pageSize;int b=pageSize;param.put("a", a);param.put("b", b);param.put("name", name);param.put("age", age);return studentService.selectByFy(param);} }

service

package com.dsh.service.imp;import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dsh.mapper.StudentCustomMapper; import com.dsh.pojo.Student; import com.dsh.service.StudentService;@Service public class StudentServiceImp implements StudentService {@Autowiredprivate StudentCustomMapper studentDao;@Overridepublic Map<String,Object> selectByFy(Map<String, Object> param) {//bootstrap-table要求服務器返回的json須包含：totlal，rowsMap<String,Object> result = new HashMap<String,Object>();int total=studentDao.selectByFy(null).size();List<Student> rows=studentDao.selectByFy(param);result.put("total",total);result.put("rows",rows);return result;} }

mapper.xml（即dao）

<?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.dsh.mapper.StudentCustomMapper" ><select id="selectByFy" resultType="com.dsh.pojo.Student" parameterType="Map">SELECT *FROM student<if test="a!=null"><where> <if test="name!=null and name!=''"> name=#{name}</if><if test="age!=null and age!=''">AND age=#{age}</if></where>LIMIT #{a},#{b}</if></select> </mapper>

轉載于:https://www.cnblogs.com/dshvv/p/9646174.html

總結

以上是生活随笔為你收集整理的Bootstrap table后端分页（ssm版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：算法笔记（一）（教你系统学习基础算法）
下一篇： UDS诊断协议规范与要求