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

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

下载jquery.pagination.js.

        normalize.css

        pagination.css

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

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

        

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

       前端:

               当然首先得先引入js和css

                <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">

                <script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>

               再则写div

               <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>

              再配置pagination

              <script>
$(function() {
var totalPage = 1;//总共多少页
var totalRecords = 1;//总共多少条
var pageSize=4;//每页显示多少页
loadList(1);//初始化显示第一页
function loadList(pno)
{
$.ajax({
type:"post",
   url:"/login/s/usercontroller/searchBusiEventInfo",//ajax获取地址
dataType: "json",
data: { 'pageNum': pno,'pageSize': pageSize},//传给后端的参数
success:function(result) {//成功后返回json数据
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>

           源码:

            

<!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();
	}


        效果图


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值