java jquery分页_如何最简单的实现java分页

原标题：如何最简单的实现java分页

先说下思路吧，主要就是利用了jquery.pagination这个插件，这个插件的原理就是你只要给他一个必选的总条数参数，然后在回调函数去操作数据就可以了，后台只需要返回数据即可。

接下来我写下我自己学习的一个最简单实用的分页例子。

开发框架：后台springMVC，前端jquery，jquery.pagination， bootstrap。

效果图：

这里只说关于分页的内容，第一步当然是引入jquery.pagination， bootstrap的地址，

href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<

src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">>

<

src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">>

< src="pagination2/jquery.pagination.js">>

这里pagination的js文件我是下载到了本地

编写函数：

$('#Pagination').pagination(${total},

{

num_edge_entries: 2,

num_display_entries: 4,

callback: PageCallback,

items_per_page:2,

prev_text:'上一页',

next_text:'下一页'

}

total是后台取的数据总条数

编写回调函数：

function PageCallback(page_index,jq) {

$.post(

"fenye2.action",{yehao:page_index,key:$('#sousuo').val()},function(data){

$("tbody").empty()

var json=$.parseJSON(data)

$(json).each(function(){

$("tbody").append("

"

+this.name+

"

"

+this.sex+"

"

+this.age+

"

"

+this.id+

"

"

+this.teacher+

"

")

})

}

)

return false

}

这里回调函数的作用是发送ajax请求取得后台数据，用jquery显示在表格里面

后台代码：

@RequestMapping(value="/fenye2",method = RequestMethod.POST, produces = "text/html;charset=UTF-8")

public void fenYe2(int yehao,String key,HttpServletResponse resp, Model m){

List list=studentService.fen(yehao*2, key);

int total=list.size();

m.addAttribute("total",total);

JsonArray jsonArray=new JsonArray();

for (int i = 0; i < list.size(); i++) {

JsonObject jsonObject=new JsonObject();

jsonObject.addProperty("id", list.get(i).getId());

jsonObject.addProperty("name", list.get(i).getName());

jsonObject.addProperty("sex", list.get(i).isSex());

jsonObject.addProperty("age", list.get(i).getAge());

jsonObject.addProperty("teacher", list.get(i).getTeacher().getName());

jsonArray.add(jsonObject);

}

try {

resp.getWriter().write(jsonArray.toString());

} catch (IOException e) {

e.printStackTrace();

}

}

前台代码

编号姓名年龄性别我的老师

${stu.id}${stu.name }${stu.age }${stu.sex }${stu.teacher.name }

责任编辑：