解决bootStrap分页jqPaginator的初始化及利用append动态渲染table数据
有骏祥
1、我用的是bootstrap，所以首先导入css样式
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
2、将js导入项目并引入js
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jqPaginator.js"></script>
3、简单的demo代码如下（前端代码）
<body>
<div >
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-striped" id="ds_table" data-toggle="table">
<thead >
<tr>
<th>
序号
</th>
<th>
区域
</th>
<th>
检测时间
</th>
<th>
PM10数据
</th>
<th>
PM2.5数据
</th>
<th>
监测站
</th>
</tr>
</thead>
<tbody id="tbody">
// 这个tbody是用来存放数据的，
</tbody>
</table>
</div>
</div>
</div>
</div>
4、存放页码的div
<div class="page " style="text-align: center">
<ul class="pagination" id="pagination"></ul>
</div>
5、js代码
<script>
$(function(){
//当前页，第一次访问的时候,调用这个方法将1和true传入sendRequest方法中。
sendRequest(1,true);//
});
function del(id) {//删除的方法
alert(id);
}
function edit(id) {//编辑的方法
alert(id);
}
function sendRequest(num,isfirst) {//isfirst：是否是第一次访问
$.ajax({
url: "http://localhost:8080/index",
//将page传入后台，pageSize我在后台定义过了，后台用的是mybatis的pageHelperfenye
data: "page=" + num,
type: "GET",
dataType: "json",
success: function (result) {
var total = result.total; //数据总条数
var pageSize = result.pageSize; //每页显示多少条数据，定义的是5条
var tbody = document.getElementsByTagName("tbody")[0]; //通过id获取tbody
tbody.innerHTML = ""; //将tbody为空，
console.log(result.list); //测试
for ( var index in result.list) { //for循环，实现动态渲染数据到tbody
var account = result.list[index];
$("#tbody").append( //用append追加数据，不会覆盖数据，不要忘了上边还有一个 tbody.innerHTML="";
"<tr>\n" +
"<td>" + account.id + "</td>\n" +
"<td>" + account.district.name + "</td>\n" +
"<td>" + account.monitorTime + "</td>\n" +
"<td>" + account.pm10 + "</td>\n" +
"<td>" + account.pm25 + "</td>\n" +
"<td>" + account.monitoringStation + "</td>" +
"<td>"+"<button class=\"btn dropdown-toggle\" οnclick=edit('"+account.id+"') >编辑"+"</button>"+"</td>"+
"<td>"+"<button class=\"btn dropdown-toggle\" οnclick=del('"+account.id+"') >删除"+"</button>"+"</td>"+
"</tr>")
}
if (isfirst) { //isfirst是否是第一次访问，如果第一次 的话,上边传的是true;
$('#pagination').jqPaginator({ //这个是bootstrap提供的初始化的操作，文档上有
//totalPages: 7, //最大页数，只要给他总数据条数和每页显示数量就行了，他自己会算最大页数的
visiblePages: 5, //页码数量
totalCounts:total, //数据总条数
pageSize:pageSize,//每页显示几条内容
currentPage: num, //当前页
//下边的是bootstrap所提供的参数
first: '<li class="first"><a href="javascript:;">首页</a></li>',
prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
last: '<li class="last"><a href="javascript:;">末页</a></li>',
page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
onPageChange: function (num, type) {//这个方法是，如果你点击页码，下一页的话就会触发
//页面变化回调函数
if (type == "change") { //如果点击页数，type=change
//alert(num);
sendRequest(num, false);//num是页数
}
},
error: function () {
alert("错误请求")
}
});
}
}
})
}
</script>
6、后台代码。
我用的是springboot+mybatis，一个简单的演示。
6.1. 分页用的是pageHelper分页助手
先导入依赖
<!-- pageHelper分页助手--->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<!-- 1. SpringBoot核心依赖. -> spring-boot-starter-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- 2. SpringBoot的测试启动器. -> spring-boot-starter-test-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- 3. MySQL驱动. -> mysql-connector-java-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.19</version>
</dependency>
<!-- 4. Druid连接池. -> druid-spring-boot-starter-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.10</version>
</dependency>
<!-- 5. Mybatis框架. -> mybatis-spring-boot-starter-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<!-- 6. lombok. -> lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
6.2、application.yml文件配置
#用的Druid数据库连接池
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql:///air?serverTimezone=UTC
username: root
password: root
type: com.alibaba.druid.pool.DruidDataSource
#这个是mybatis的配置。映射的mapper的路径，起的别名
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.qf.entity
#开启驼峰命名
configuration:
map-underscore-to-camel-case: true
#这个是日志级别，
logging:
level:
com.qf.mapper: debug
#分页助手必须要的配置，mybatis文档上有，直接拿来用
pagehelper:
helperDialect: mysql
reasonable: true
support-methods-arguments: true
params: count=countSql
6.3、controller代码
package com.qf.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.qf.entity.Air;
import com.qf.service.AirService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
public class AirController {
@Autowired
private AirService airService;
@GetMapping("/index")
@ResponseBody
public PageInfo<Air> findAll( @RequestParam("page") Integer page){
System.out.println("page:"+page);
PageHelper.startPage(page,5);
List<Air> all = airService.findAll();
PageInfo<Air> result = new PageInfo<>(all);
return result;
}
}
主要是记录append的用法，动态渲染table数据，以及bootstrap分页的使用。
类似资料：