springboot集成html之分页功能实现

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

前台：

 !DOCTYPE html  html xmlns= http://www.w3.org/1999/xhtml xmlns:th= http://www.thymeleaf.org  xmlns:sec= http://www.thymeleaf.org/thymeleaf-extras-springsecurity3  head  title 陪米app后台主页 /title  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  script type= text/javascript src= /js/jquery.js /script  script type= text/javascript src= /js/page_common.js /script  link href= /css/common_style_blue.css rel= stylesheet type= text/css /  link rel= stylesheet type= text/css href= /css/index_1.css /  script type= text/javascript  var pageNo = 1; var pageSize = 8; var pages = 0; // ![CDATA[  $(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+ tr + td +maojungang[i].byReportUser+ nbsp; +maojungang[i].byReportName+ nbsp; /td + td + textarea +maojungang[i].content+ /textarea + nbsp; /td + td +maojungang[i].timed+ nbsp; /td + td +maojungang[i].friendId+ nbsp; /td + td +maojungang[i].taskId+ nbsp; /td + td +maojungang[i].reportUser+ nbsp; +maojungang[i].reportName+ nbsp; /td + /tr 
 $( #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); //]]  /script 
 独孤九贱(5)_ThinkPHP5视频教程 
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《VeVb.com独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
 
  Peter-Zhu 2017-05-16 12:03:57 

 独孤九贱(4)_PHP视频教程 
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。PHP 出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
 
  Peter-Zhu 2017-03-20 22:47:17 

 独孤九贱(1)_HTML5视频教程 
《VeVb.com原创html5视频教程》课程特色：php 原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。...
 
  Peter-Zhu 2017-03-13 10:15:11 

 ThinkPHP5实战之[教学管理系统] 
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
 
  Peter-Zhu 2017-07-24 16:48:56 

 PHP入门视频教程之一周学会PHP 
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
 
 html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。