一、jq前端分页插件pagination使用

最新推荐文章于 2024-08-22 15:47:42 发布

悠然～.～

最新推荐文章于 2024-08-22 15:47:42 发布

阅读量1.6w

点赞数 1

分类专栏：前端-插件文章标签：前端 pagination 插件分页 ssm后端分页

本文链接：https://blog.csdn.net/lze693/article/details/54644869

版权

前端-插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端采用pagination分页插件，后端用ssm框架。

下载jquery.pagination.js.

normalize.css

pagination.css

其中 pagination.css修改你想要的样式

我用的是这个网页的分页插件http://www.jq22.com/jquery-info5697

下面讲代码（上面网页中api已经讲得非常清楚了我只讲与后端搭建）

前端：

当然首先得先引入js和css

再则写div

再配置pagination

源码：

<!DOCTYPE html>
<html lang="cn-ZH">

	<head>
		<meta charset="UTF-8">
		<title>Mss。-pagination</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">
	</head>

	<body>
	  <table width="80%" align="center">
    <tr>
      <td>id号</td>
      <td>名字</td>
      <td>密码</td>
    </tr>
    <tbody id="datalist1">
    </tbody>
  </table>
		<div class="wrapper">
			<div class="eg">
				<div class="M-box"></div>
				<div class="tips">当前是第<span class="now">1</span>页,总共<span class="total"></span>页,总共<span class="count"></span>条数据</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.pagination.js"></script>
		<script>
			$(function() {
				var totalPage = 1;//总共多少页
				var totalRecords = 1;//总共多少条
				var pageSize=4;//每页显示多少页
				loadList(1);
				function loadList(pno)
				{
				$.ajax({
					type:"post",
				    url:"/login/s/usercontroller/searchBusiEventInfo",
					dataType: "json",
					data: { 'pageNum': pno,'pageSize': pageSize},
					success:function(result) {
						console.log(result);
						console.log(pno);
						if (result.success) {
							var count = result.total;
		                    var data = result.rows;
		                    totalRecords = count;
		                    totalPage = Math.ceil(count / pageSize);
		                    var datalist="";
							$.each(data, function(i, item) {
								datalist+='<tr>'+
									      '<td>'+item.uid+'</td>'+
					            		      '<td>'+item.username+'</td>'+
					            		      '<td>'+item.userpassword+'</td>'+
					            		  '</tr>';
					        });
							$("#datalist1").html(datalist);
							$('.total').text(totalPage); 
							$('.count').text(count); 
							$('.M-box').pagination({
								pageCount: totalPage,
								current:pno,//当前第几页
								jump: true,
								coping: true,
								homePage: '首页',
								endPage: '末页',
								prevContent: '上页',
								nextContent: '下页',
								callback:PageClick
							});
						}			
					},
		            error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络连接异常，请重试！')
		            }
				});
				}
                //回调函数  
                PageClick = function(index){
                    $('.now').text(index.getCurrent()); 
 					loadList(index.getCurrent());//点击分页加载列表数据  */
               }
			});
		</script>
	</body>

</html>

后端：

写个分页拦截器用mybatis 分页插件进行分页

public class PageInterceptor extends HandlerInterceptorAdapter {

	private static final Logger logger = LoggerFactory.getLogger(PageInterceptor.class);
	
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		String pageNum = request.getParameter("pageNum");// 开始页数
		String pageSize = request.getParameter("pageSize");// 每页行数
		if (StringUtils.isNotBlank(pageNum) && StringUtils.isNotBlank(pageSize)) {
			try {
				PageHelper.startPage(Integer.parseInt(pageNum), Integer.parseInt(pageSize));
			} catch (Exception e) {
				logger.error(String.format("page分页拦截异常，原因：%s", e.getMessage()));
			}
		}
		return true;
	}
	
}

写个接口接收数据

	public PageResult4EUjson(){		
		List<Users> list =usersService.getAllUsers();
		logger.info("后端_用户分页显示"); 
		return ResResult.ok(list).toPageResult();
	}

效果图