基于LayPage的Java分页技术实现

 

基于LayPage的Java分页技术实现

基于LayPageJava分页技术实现

 

LayPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。

#1首先需要了解一下LayPage的基本语法,做一做开工前的预备工作,LayPage的详细语法文档如图1-1所示:



1-1 laypage语法

#2 准备所需要的开发组件,首先获取LayPage的插件包,就一个laypage.js文件,下载地址为:http://res.layui.com/download/laypage-v1.3.zip ,然后是jquery的包,下载地址为:http://jquery.com/download/ 

#3 在你的eclipse中创建一个动态web项目,把laypagjaquery的包放入到项目的WebContent根目录下,如图1-2所示:

1-2 插件包存放位置

具体的文件夹名称自己定义,我这里放在了JavaScript目录下,接下来创建一个jsp页面,页面中需要包括两个元素,一个是table,一个放置分页标签的div,其中table是用来放置分页的数据,div所对应的就是laypag中的cont。例如我所编写的代码如图1-3所示:

 

 

1-3 jsp页面代码

 

#4 接下来是编写laypag的核心代码,官方网站只给出了简单的demo作为演示,没有详细说明进行分页后数据表格的数据替换,现在给出一个完整的代码,作为参考,如图1-4所示。

 

1-4 分页脚本代码

Args数组是数据表格需要显示的列名称,官网给的是使用$.getJSON(url,data,callback);方法来获取后台查询的值,我这是进行了改造,以方便后台进行操作,totalSize为后台出入的数据记录总数,使用Math.ceil()函数来求去分页的总数。$(#tabPos).html(PackageData(res))用来执行点击分页按钮后用新获取的数据来替换原来表中的数据。

#5 后台的写法,本次Demo后台使用的是spring MVC来完成的,具体的配置信息在这里不再累赘,直接看最核心的代码部分,其余的都省略掉...。创建一个Controller,名字自定义,方法如图1-5所示:

 

1-5 后端实现方法

这里没有使用@ResponseBody标签,直接通过response进行数据回写,使用了net.sf.json 包中提供的JSONArray.fromObject(Object obj)方法来讲Java对象转换成Json格式的字符串,然后回写到页面中。最后运行的效果如图1-6和图1-7所示:

 

1-6 第一页分页效果图

 

1-7 第二页分页效果



最后附上源码清单:

mineLaypage.js

/**

 * @Author:谭朝红

 * @DateTime:2016-09-22

 * @Description:分页处理插件

 * @Version:1.0.0

 */

$(document).ready(function() {

GetList();

});

var pageSize = 10;// 每页显示的条数

function GetList(curr) {

 

$.ajax({

type : 'GET',

async : false,// 异步锁定

url : $("#ctx").val() + '/grade/ajaxGradeList.do',// 后盾处理数据,返回json格式

data : {

page : curr,

pageSize : pageSize

},

contentType : "application/json;charset=utf-8",

success : function(data) {

var count = $("#totalSize").val();

var pageCount = Math.ceil(count / pageSize);

var res = eval("(" + data + ")");

laypage({

cont : $("#page"),

pages : pageCount,

curr : curr || 1,

first : '首页',

last : '尾页',

prev : '上一页',

next : '下一页',

skip : true,

skin:'#039BE5',

groups : 3,

jump : function(obj, first) {

if (!first) {

GetList(obj.curr);

}

}

});

$("#tabPos").html(PackageData(res));

}

});

}

var args = [ 'id', 'gradeno', 'gradename', 'gradealice' ];

function PackageData(res) {

var content = "";

$.each(res, function(i, o) {

content += "<tr>"

for (var n = 0; n < args.length; n++) {

var arg = args[n];

content += "<td>" + o[arg] + "</td>";

}

content += "</tr>"

});

return content;

}


 

GradeController.java

 

@Controller

@RequestMapping("/grade")

public class GradeController {

 

@Autowired

private GradeService gradeService;

部分省略......

/**

 * 异步获取分页数据

 * @param requestrequest对象

 * @param responseresponse对象

 * @param page分页的起始页

 * @param pageSize分页的大小

 * @returnGrede集合

 */

@RequestMapping(value="/ajaxGradeList.do",method=RequestMethod.GET)

public void ajaxGradeList(HttpServletRequest request,HttpServletResponse response,

@RequestParam(value="page",defaultValue="1")int page,

@RequestParam(value="pageSize",defaultValue="10")int pageSize){

List<Grade> pageGradeList =

  this.gradeService.pageGrade(page, pageSize, "gradeno", false);

try {

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

out.write(JSONArray.fromObject(pageGradeList).toString());

} catch (IOException e) {

e.printStackTrace();

}

}

   部分省略......

 

}


 

Grade.jsp

 

部分省略....

<table class="table table-hover datatable table-auto">

<!--用户表格  -->

<thead>

<tr>

<th data-type="number" width="350">系统编号</th>

<th data-type="string">年级序号</th>

<th data-type="string">年级名称</th>

<th data-type="string">年级别名</th>

</tr>

</thead>

<tbody id="tabPos">

</tbody>

</table>

<div id="page" style="margin-top:5px;text-align: right;"></div>

 

部分省略.....