java+jquery分页

最新推荐文章于 2022-10-26 21:04:42 发布

wl_Honest

最新推荐文章于 2022-10-26 21:04:42 发布

阅读量561

点赞数

分类专栏： ajax SSM

本文链接：https://blog.csdn.net/wl_Honest/article/details/81279091

版权

SSM 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

首先，引入jquery和jquery.page文件

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

<script src="<%=basePath %>js/jquery.page.js"></script>

<link href="<%=basePath %>css/jquery.page.css" rel="stylesheet">

（因为我用的是ssm框架，为了能正确引用到js和css文件，这里的<%=basePath %>是我指定的路径，下面贴出来供参考）

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
%>

接下来写body部分：

<body>
    <table class="table table-striped">
    	<thead>
    	<tr>
    		<td>id</td>
    		<td>name</td>
    		<td>email</td>
    		<td>sex</td>
    	</tr>
    	</thead>
    	<tbody id="tb">
    	</tbody>
    </table>
    <div id="pages"></div>
  </body>

其中 <div id="pages"></div>就是显示分页的地方，引入了jquery.page.js和jquery.page.css后需在要分页的jsp中添加如下js代码：

$("#pages").Page({
    totalPages: total/5,//total Pages
    liNums: total,//the li numbers(advice use odd)
    activeClass: 'activP', //active class style
    //firstPage: '首页',//first button name
    //lastPage: '末页',//last button name
    prv: '<<',//prev button name
    next: '>>',//next button name
    hasFirstPage: false,//whether has first button
    hasLastPage: false,//whether has last button
    hasPrv: true,//whether has prev button
    hasNext: true,//whether has next button
    callBack : function(page){
        //callBack function，page:active page

    }
});

其中total是从后台传来的值，callBack:function(page){}中的page是点击的页数，这里写好后开始写java代码：

@RequestMapping("/list")
	public String list(Model model){
		List<User> users = userService.list();//查找所有用户
		int total = users.size();//用户数量
		model.addAttribute("total",total);
		return "list";//返回list.jsp
	}

/**
	 * 查出所有用户(分页)
	 * @param request
	 * @return
	 */
	@RequestMapping("/ajaxList")
	@ResponseBody
	public Map<String,Object> ajaxList(HttpServletRequest request){
		//获取当前页数
		int index = Integer.parseInt(request.getParameter("index"));
		//获取每页记录数 
		int count = Integer.parseInt(request.getParameter("count"));
		Map<String,Object> map =new HashMap<String, Object>();
		List<User> list = userService.ajaxList(index,count);
		map.put("userList",list);
		return map;
	}

最后，完善js代码，在之前的callBack:function(page){}里用ajax实现异步刷新：

callBack : function(page){
        //callBack function，page:active page
        $.ajax({
        	url:"ajaxList",
        	data:{"index":(page-1)*5,"count":5},//index:当前页数;count:每页记录数;
        	type:"POST",
        	dataType:"json",
        	success:function(data){
        		var userList = data.userList;
        		$("#tb").html("");
        		$.each(userList,function(i, item) {
        			var html = "<tr><td>"+item.id+"</td>"+"<td>"+item.username+"</td>"+"<td>"+item.email+"</td>"+"<td>"+item.sex+"</td>"+"<td></tr>";
        			$("#tb").append(html);
        		});
        	},
        	erro:function(){
        		alert("请稍后再试!");
        	}
        });

此外，添加下面的代码，使得第一次进入页面时有值：

var total = ${total};
  	
  	$(function(){
  		$.ajax({
        	url:"ajaxList",
        	data:{"index":0,"count":5},//index:当前页数;count:每页记录数;
        	type:"POST",
        	dataType:"json",
        	success:function(data){
        		var userList = data.userList;
        		$("#tb").html("");
        		$.each(userList,function(i, item) {
        			var html = "<tr><td>"+item.id+"</td>"+"<td>"+item.username+"</td>"+"<td>"+item.email+"</td>"+"<td>"+item.sex+"</td>"+"<td></tr>";
        			$("#tb").append(html);
        		});
        	},
        	erro:function(){
        		alert("请稍后再试!");
        	}
        });
  	});

最后附上jquery.page.js和jquery.page.css的链接：

链接：https://pan.baidu.com/s/1KjYEuFJEWie8kg61PHPLIg 密码：zslg

wl_Honest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java+jquery分页

首先，引入jquery和jquery.page文件&lt;script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script src="&lt;%=basePath %&gt;js/jquery.page.js"&gt;&lt;/script&gt;&
复制链接

扫一扫

专栏目录