说明
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>

        <!-- jq -->

        <script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>

        <!-- bootstrap -->

        <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 {

    @Autowired

    private StudentService studentService;

    @RequestMapping("selectByFy")

    @ResponseBody

    public  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 {

    @Autowired

    private StudentCustomMapper studentDao;

    @Override

    public Map<String,Object> selectByFy(Map<String, Object> param) {

        //bootstrap-table要求服务器返回的json须包含：totlal，rows

        Map<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>

Bootstrap table后端分页（ssm版）的更多相关文章

  1. [转]Bootstrap table后端分页（ssm版）

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  2. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  3. Bootstrap table前端分页（ssm版）

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

  4. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  5. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  6. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  7. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

  8. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

  9. bootstrap table数据分页查询展示

    index.php <html> <head> <link rel="stylesheet" href="./css/bootstrap.m ...

随机推荐

  1. 实现Runnable接口和继承Thread类区别

    如果一个类继承Thread,则不适合资源共享.但是如果实现了Runable接口的话,则很容易的实现资源共享. 实现Runnable接口比继承Thread类所具有的优势: 1):适合多个相同的程序代码的 ...

  2. MongoDB 用户角色

    Read:允许用户读取指定数据库 readWrite:允许用户读写指定数据库 dbAdmin:允许用户在指定数据库中执行管理函数,如索引创建.删除,查看统计或访问system.profile user ...

  3. Websphere停止服务不用输入账号密码

    启用了安全性的WebSphere Application Server,在日常维护中经常在停止服务的时候需要输入用户名和密码.停止的方式如下:[root@was /]# /opt/IBM/WebSph ...

  4. Runtime 运行时之一：类与对象

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时能够更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交 ...

  5. 1948 NOI 嘉年华

    1948 NOI 嘉年华 2011年NOI全国竞赛  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Descript ...

  6. 部署软件RDMA的步骤

    date:  2018-08-28   19:46:56 参考原文原文:http://corasql.blog.51cto.com/5908329/1930455                    ...

  7. Fluent Nhibernate Mapping for Sql Views

    Views are mapped the same way tables are mapped except that you should put Readonly() in the mapping ...

  8. 【BZOJ3518】点组计数 欧拉函数

    [BZOJ3518]点组计数 Description 平面上摆放着一个n*m的点阵(下图所示是一个3*4的点阵).Curimit想知道有多少三点组(a,b,c)满足以a,b,c三点共线.这里a,b,c ...

  9. Android DatepickerDialog（日期选择器）的使用

    效果图如下: 日期和时间选择对话框,首先是要获得当前时间,这里用 java类中的Calendar来获得日期和时间(也可以用Date,但是不提倡,Date部分方法已经注释为过时), Calendar是一 ...

  10. Mac/Xcode - 开发技巧快捷键

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...