jQuery paging分页讲解

淩亂°似流年 2022-02-23 04:38 274阅读 0赞

下面的jsonArray对象是ajax访问该方法的接收的返回值data  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
解释：这里ajax接收到controller层返回的data数据是一个存储n多个map对象的对象，所以下面的data\[data.length-1\]是指最后一个data里存储的最后一个map对象，然后下面的\[‘pageSize’\]是代表取这个map对象的key为“pageSize”的元素的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
**完整代码如下：** 可以看到该方法名是ajaxFirst,但是在 callback: function(currentPage) \{  
ajaxFirst(currentPage);  
\}中递归引用了ajaxFirst(),callback:function(page,size,count)  
翻页时的回调方法，page为当前页码,size为每页条数，count为总页数,就是说我们每次点击下面的1，2，3，…时，都会回调该callback()方法，然后执行该方法体里的ajaxFirst（）  
![在这里插入图片描述][20190406182823505.png]

//首页文章分页请求
    function ajaxFirst(currentPage) {
    	//加载时请求
    	$.ajax({
    		type: 'POST',
    		url: '/myArticles',
    		dataType: 'json',
    		data: {
    			rows: "10",
    			pageNum: currentPage
    		},
    		success: function(data) {
    			//放入数据
    			putInArticle(data);
    			scrollTo(0, 0); //回到顶部
    
    			//分页
    			$("#pagination").paging({
    				rows: data[data.length - 1]['pageSize'], //每页显示条数
    				pageNum: data[data.length - 1]['pageNum'], //当前所在页码
    				pages: data[data.length - 1]['pages'], //总页数
    				total: data[data.length - 1]['total'], //总记录数
    				callback: function(currentPage) {
    					ajaxFirst(currentPage);
    				}
    			});
    		},
    		error: function() {
    			alert("获得文章信息失败！");
    		}
    	});
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20220223/c3c8c19843284d1aa923c1f63a9ea158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20220223/a2752908ce3d4fdd93b3fa14364c336c.png
[20190406182823505.png]: /images/20220223/254f80f2c9dd46b091d8e92384e7da0a.png