一、jq前端分頁外掛pagination使用

阿新 • • 發佈：2019-01-15

前端採用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();
	}

效果圖

一、jq前端分頁外掛pagination使用

一、jq前端分頁外掛pagination使用

四、jq前端分頁外掛jqgrid

前端分頁外掛pagination

一款不錯的jQuery分頁外掛--pagination

angularJS前端分頁外掛

前端分頁外掛 laypage.js laypage.css

複雜查詢分頁顯示前端實現-使前端分頁外掛myPagination

前端分頁外掛常見問題總結

Spring Boot系列教程十一： Mybatis使用分頁外掛PageHelper

ajax非同步分頁外掛pagination詳解

jq的分頁插件(pagination.min.js)

使用pagination分頁外掛實現ajax分頁

Jquery 分頁外掛，帶你一步一步接入後臺資料

VUE-002-前端分頁（el-pagination）展示資料

前端小結2--jQuery分頁外掛JPaginate的詳細使用

angular的tm-pagination分頁外掛一個頁面使用多個分頁的問題

分頁外掛pagehelper初使用，前端傳遞當前頁碼與每頁條數後臺接受實現分頁

springboot2.0.5整合mybatis（PageHelper分頁外掛、generator外掛使用）

Spring Boot2 + Mybatis 整合(Mybatis自動生成外掛、分頁外掛)

Mybatis-Plus來學習一下！程式碼生成、分頁外掛？

一、jq前端分頁外掛pagination使用

相關推薦