分页组件mricode
分页插件下载
如何使用
首先导入css和js
<link href="mricode.pagination.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="mricode.pagination.js"></script>
创建分页显示标签
<div id="page" class="m-pagination"></div>
Ajax分页
初始化
<script>
$(function () {
// 发送ajax查询需要的数据以及记录总数
$("#page").pagination({
pageIndex : 0,
pageSize: 5,
remote: {
url: '${pageContext.request.contextPath}/page/loadIndexInfo',
success: function (data) {
// data为ajax返回数据
console.log(data);
var html = template("artmodel",data);
$('#artul').html("");
$('#artul').append(html);
}
}
});
})
</script>
这里的分页组件与我们之前自己手写的分页原理相同，但ajax需要发送的参数以及相应数据mricode已经帮我们设计好了，我们只需要返回相应的数据，以及在前端完成页面的渲染即可
渲染采取我们之前学习的arttemplate模板
分页原理
// 发ajax查询
$.get(
"${pageContext.request.contextPath}/page",
{
"pageIndex" : 0,
"pageSize" : 5
},
function (res) {
// 5条记录+total
console.log(res.list);// [{…}, {…}, {…}, {…}, {…}]
console.log(res.total);
for(i in res.list){
$('#box').append(res.list[i].ename+","+res.list[i].deptno+","+res.list[i].sal+"<br>")
}
var x = 0;
// 处理分页
if(res.total%5!=0){
x = Math.ceil(res.total/5);// 4
}else{
x = res.total/5;// 15/5 3
}
for(var i = 0;i < x;i++){
$('#page').append('<a href="javascript:;" aid="'+i+'" style="margin-right: 20px">'+(i+1)+'</a>');
}
},
"json"
)
$(document).on('click','a',function () {
$.get(
"${pageContext.request.contextPath}/page",
{
"pageIndex" : $(this).attr('aid'),
"pageSize" : 5
},
function (res) {
// 5条记录+total
console.log(res.list);
console.log(res.total);
$('#box').html('');
for(i in res.list){
$('#box').append(res.list[i].ename+","+res.list[i].deptno+","+res.list[i].sal+"<br>")
}
var x = 0;
// 处理分页
if(res.total%5!=0){
x = Math.ceil(res.total/5);
}else{
x = res.total/5;
}
$('#page').html('');
for(var i = 0;i < x;i++){
$('#page').append('<a href="javascript:;" aid="'+i+'" style="margin-right: 20px">'+(i+1)+'</a>');
}
},
"json"
)
});
@WebServlet(name = "PageServlet",urlPatterns = "/page")
public class PageServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求参数
String pageIndex = request.getParameter("pageIndex");// 0 1
String pageSize = request.getParameter("pageSize");// 5
Page page = new Page();
page.setPageIndex(Integer.parseInt(pageIndex)*Integer.parseInt(pageSize));// 0*5,5 1*5,5 2*5,5
page.setPageSize(Integer.parseInt(pageSize));// 5
// 给Dao
ArticleDao articleDao = new ArticleDaoImpl();
List<Map<String, Object>> list = articleDao.getPage(page); // 5条记录
int total = articleDao.getTotal(); // 一共有多少条
PageInfo pageInfo = new PageInfo();
pageInfo.setList(list);
pageInfo.setTotal(total);
response.getWriter().println(JSON.toJSONString(pageInfo));
}
}
@Override
public List<Map<String, Object>> getPage(Page page) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Map<String, Object>> list = new ArrayList<>();
try {
conn = DBUtils.getInstance().getConnection();
ps = conn.prepareStatement("select ename,sal,deptno from emp limit ?,?");
ps.setInt(1,page.getPageIndex());// 2*5
ps.setInt(2,page.getPageSize());
rs = ps.executeQuery();
while(rs.next()){
Map<String, Object> map = new HashMap<>();
map.put("ename",rs.getString("ename"));
map.put("sal",rs.getDouble("sal"));
map.put("deptno",rs.getInt("deptno"));
list.add(map);
}
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
e.printStackTrace();
} finally {
DBUtils.getInstance().close(conn);
DBUtils.getInstance().close(rs);
DBUtils.getInstance().close(ps);
}
return list;
}
@Override
public int getTotal() {
int count = 0;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Map<String, Object>> list = new ArrayList<>();
try {
conn = DBUtils.getInstance().getConnection();
ps = conn.prepareStatement("select count(*) counts from emp");
rs = ps.executeQuery();
if(rs.next()){
count = rs.getInt("counts");
}
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
e.printStackTrace();
} finally {
DBUtils.getInstance().close(conn);
DBUtils.getInstance().close(rs);
DBUtils.getInstance().close(ps);
}
return count;
}
这里，我们只需要理解分页的原理：每次点击分页按钮，发送自己对应的aid作为第x页的标识，再发送每页显示的数据，servlet调dao层完成查询，响应给前台对应的数据和总记录数，前台对数据进行遍历并根据总记录数渲染分页按钮
网友评论