springboot分页展示功能_springboot集成html之分页功能实现

这篇文章主要介绍了关于springboot集成html之分页功能实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

说不清楚，直接上代码。和展示效果：

前台：

xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

陪米app后台主页

var pageNo = 1;

var pageSize = 8;

var pages = 0;

//

$(document).ready(function(){

var key = $("#keyword").val();

loadData(key,pageNo,pageSize);

});

function loadData(key,pageNo,pageSize){

$.ajax({

url:"/web/getReport",

type:"post",

data:{keyword:key,pageNo:pageNo,pageSize:pageSize},

success:function(data){

var json = eval('('+data + ')');

console.log(data);

var html="";

// var reportlisthtml='';

var maojungang = json.data;

//var message = json.message;

var totalCount = json.total;

pages = Math.ceil(totalCount/pageSize);

//alert(message);

for(var i in maojungang){

html=html+"

"+

"

"+maojungang[i].byReportUser+" "+maojungang[i].byReportName+" "+

"

"+""+maojungang[i].content+""+" "+

"

"+maojungang[i].timed+" "+

"

"+maojungang[i].friendId+" "+

"

"+maojungang[i].taskId+" "+

"

"+maojungang[i].reportUser+" "+maojungang[i].reportName+" "+"";

}

// $('#TableData').html(reportlisthtml);

$("#TableData").html(html);

var newText = "共" + totalCount + "条，" + "第" + pageNo + "页，" + "共" + pages + "页";

$("#summary").text(newText);

}

});

}

function search(){

// loadData($("#keyword").val());

var key = $.trim($("#keyword").val().trim());

loadData(key,pageNo,pageSize);

}

function index(){

pageNo = 1;

var key = $.trim($("#keyword").val().trim());

loadData(key,pageNo, pageSize);

}

function last(){

var key = $.trim($("#keyword").val().trim());

if(pageNo == 1){

return false;

} else{

pageNo--;

loadData(key,pageNo, pageSize);

}

}

function next(){

var key = $.trim($("#keyword").val().trim());

if(pageNo == pages){

return false;

} else{

pageNo++;

loadData(key,pageNo, pageSize);

}

}

function zuihou(){

pageNo = pages;

var key = $.trim($("#keyword").val().trim());

loadData(key,pageNo, pageSize);

}

function pageNumber(){

var pageNumber = $.trim($("#pageNumber").val().trim());

var key = $.trim($("#keyword").val().trim());

pageNo = pageNumber;

loadData(key,pageNo, pageSize);

}

//]]>

textarea{

height:50px;

width: 80%;

}

.tnd{

text-align:center;

width:100%;

height:50px;

border: solid;

padding:10px;

border: 2px solid #000000;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

background-color:aqua;

}

.tnds{

font-size:25px;

width:98.7%;

height:30px;

border: solid;

padding:10px;

border: 2px solid #000000;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

background-color:aqua;

color: #551A8B;

}

.tndss{

font-size:25px;

text-align:center;

width:98.7%;

height:800px;

border: solid;

padding:10px;

border: 2px solid #000000;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

background-color:aqua;

color: #551A8B;

}

.content{

float: left;

margin-left: 1.8%;

width:91%;

height: 900px;

margin-top: 88px;

text-align:center;

border: solid;

border: 2px solid #000000;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

}

.tab{

align="center";

cellspacing="0";

cellpadding="0";

height: 300px;

table-layout:fixed;

empty-cells:show;

border-collapse: collapse;

margin:0 auto;

}

陪米后台主页

举报信息查询

用户信息查询

不良信息删除

用户账户封禁

用户意见反馈

举报信息

请输入举报时间：

被举报人ID举报内容举报时间朋友圈ID任务ID举报人ID

• 首页
• 上一页
• 下一页
• 最后一页

跳转到

页

后台：

package com.hpm.blog.controller;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpSession;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.fasterxml.jackson.annotation.JsonFormat.Value;

import com.hpm.blog.model.AdminUser;

import com.hpm.blog.model.ReportVo;

import com.hpm.blog.model.ReturnResult;

import com.hpm.blog.service.AttentionService;

import com.hpm.blog.service.ReportService;

import com.hpm.blog.util.Constant;

import com.hpm.blog.util.Constants;

import com.hpm.blog.util.Page;

import com.hpm.blog.util.ResultData;

@Controller

@RequestMapping("/web/")

public class ReportController {

private static final Logger logger = LoggerFactory.getLogger(AttentionService.class);

@Autowired

private ReportService reportService;

@RequestMapping("getReport")

@ResponseBody

public ReturnResult getReport(HttpSession session,Model model,String keyword,String pageNo,String pageSize){

ReturnResult result = new ReturnResult();

try {

Page page = new Page();

page.setPageNo(Integer.valueOf(pageNo));

page.setPageSize(Integer.valueOf(pageSize));

AdminUser adminUser = (AdminUser) session.getAttribute(Constants.USER_SESSION);

List list = new ArrayList();

if(null != adminUser){

if(null == keyword || "".equals(keyword)){

list= reportService.queryAll(page);

int total = reportService.queryAllCount(page);

result.setTotal(total);

result.setData(list);

result.setCode(Constant.SUCCESS_CODE);

result.setMessage("查询成功！");

}else{

list= reportService.queryByKeyword(keyword,page);

int total = reportService.queryAllCountBykey(page,keyword);

result.setTotal(total);

result.setData(list);

result.setCode(Constant.SUCCESS_CODE);

result.setMessage("查询成功！");

}

}else{

result.setCode(Constant.ERROR_CODE);

result.setMessage("身份失效，请重新登录");

}

} catch (Exception e) {

// TODO: handle exception

logger.debug("error = " + e.getClass().getSimpleName()+" "+e.getMessage());

result.setCode(Constant.ERROR_CODE);

result.setMessage("信息获取失败！请稍后重试.....");

}

return result;

}

}

效果：

点击举报查询：

点击下一页：

输入页码跳转：

输入时间搜索：

带着时间参数分页：