Products
GG网络技术分享 2025-03-18 16:14 1
内容多了，我们就会想要去做分页，既能提升用户体验，又减少页面体积，提升加载速度。那么Java中怎么实现分页功能呢?今天华清Java学院就和大家分享一下Java中如何实现分页功能。
Java实现分页功能的具体思路：
这里先说下Java实现分页的具体思路，主要就是利用了jquery.pagination这个插件，这个插件的原理就是你只要给他一个必选的总条数参数，然后在回调函数去操作数据就可以了，后台只需要返回数据即可。
Java实现分页功能的具体案例：
开发框架：后台springMVC，前端jquery，jquery.pagination， bootstrap。
①效果图：
这里只说关于分页的内容，第一步当然是引入jquery.pagination， bootstrap的地址
这里pagination的js文件我是下载到了本地
②编写函数：
$(\'#Pagination\').pagination(${total},
{
num_edge_entries: 2,
num_display_entries: 4,
callback: PageCallback,
items_per_page:2,
prev_text:\'上一页\',
next_text:\'下一页\'
}
total是后台取的数据总条数
③编写回调函数
这里回调函数的作用是发送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<Student> 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();
}
}
前台代码
本文实例讲述了jQuery插件simplePagination的使用方法。分享给大家供大家参考，具体如下：
正在熟悉项目上的代码，新添加了一个需要，需要对表单进行分页，之前的代码中是有分页的代码的，看了老半天，也没看太明白。之前的项目比较久远，继续熟悉代码。
simplePagination的使用
HTML页面，
| <div class=\"row\"> <div class=\"col-sm-12 col-sm-12\"> <table class=\"table table-striped table-hover table-bordered\" data-toggle=\"table\" data-url=\"data2.json\" data-pagination=\"true\"> <thead> <tr> <th data-hide=\"phone\" >可用区</th> <th data-hide=\"phone\">渠道</th> <th data-hide=\"phone\">引用可用区</th> <th data-hide=\"phone\">引用渠道</th> </tr> </thead> <tbody id=\"region_price_list-data\"> </tbody> <div class=\"row\"> |
因为项目里用到EJS--HTML模板，记得在一开始就引用SimplePagination插件，这个比较简单，就不细说了。
JS代码
| var page_count = 0; // 定义分页的页数 var limit = 0 ; // 定义分页的条数 var regionLogListFunc = function(pageNumber){ if(pageNumber=== undefined){ pageNumber = 1; } // 页数判断和定义 $get(\"/regionCopyList?page_number=\"+ pageNumber,function(data,status){ var #### = jQuery(\"####-##\"); // 获取Table中 tbody的id值 var updateRegionlogList = \'\' // for in 遍历 对传入的数据进行显示 for (var i in data){ #### +=\'<tr class= \"odd gradeX\">\'; ##### +=\'<td data-hide =\"phone\">\'+data[i].##+\'</td>\'; ##### +=\'<td data-hide =\"phone\">\'+data[i].##\'</td>\'; #### +=\'<td data-hide =\"phone\">\'+data[i].##+\'</td>\'; #### +=\'<td data-hide =\"phone\">\'+data[i].##+\'</td>\'; updateRegionlogList +=\'</tr>\'; } regionPriceList.empty(); // 添加更新的数据 regionPriceList.append(updateRegionlogList); }); var onPageClick = regionLogListFunc; // 获取DOM文档ID jQuery(\"#pagination\").pagination({ item :<%=z###%>, //ejs模板 itemsOnPage :<%=#####t%> ,//ejs模板 cssStyle :\'light-theme\', onPageClick :onPageClick, onInit :regionLogListFunc, }); }); |
另外一种写法是
| var page_index; var itemsOnPage = 1; $(function() { $(\"#pagination\").pagination({ items: {$page_count}, 总页数 itemsOnPage: itemsOnPage, cssStyle: \'light-theme\', onInit: changePage, // 初始化函数 onPageClick: changePage //点击时触发函数 }); }); function changePage(page_index,event){ listTable.gotoPage(page_index); //gotoPage函数调用ajax获取数据 填充页面 document.getElementById(\'pageCurrent\').innerHTML=page_index; return true; } |
希望本文所述对大家jQuery程序设计有所帮助。
Demand feedback
