当前位置: 首页 > 工具软件 > Pagination.js > 使用案例 >

jquery.pagination.js + 异步加载数据.每点击页码一次,发起一次请求

井洲
2023-12-01

一.引入jquery.pagination.js , pagination.css

二. html

//显示数据	
<div  class="list">
	<ul></ul>
</div>

//分页

<div class="eg" style="display: inline-table;    margin-bottom: 20px;    margin-left: 10px;margin-right: 10px;">
       <div class="m-style M-box4"></div>
</div>

三.js

//内容总数
var newIdMax=${count};	
//总页数
var pageCount=${pageCount};	

//初始化分页
 $('.M-box4').pagination({
            pageCount: pageCount,
			jump: true,
			count: 2,
            callback: function (api) {   
                    var data = {
                    pageNum: api.getCurrent()
                    
                };
            //获取数据
               getDate(data);
            }
			    
        });
   
   // 获取每页数据
   function getDate(data){
   
   		  $.getJSON(
                    'url',
                    data,
                    function (list) {
                    	console.log(list);
                        setListDate(list);
                        
                    });
   
   }    
   
        
   
   //显示每页数据     
   function  setListDate(list){
 	var $list = $(".list ul");
 	$list.empty();
   	for(var j = 0; j<list.length;j++){
   			var $content = $('<li></li>');
   			$list.append($content);
   		}
   }
   
   // 第一页数据
   var data = {
         pageNum: 1     
                };
   getDate(data);
 类似资料: