jquery【插件】 pagination使用

作者：zccst


2014年2月23日补充带跳转到指定页的，代码详见附件2
demo里非常全
附链接地址：http://blog.csdn.net/luoyeyu1989/article/details/7000865


原来：
1，下载3个文件
分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css
//详见附件


2，准备好服务器端返回结果
主要代码如下：

$members = array(array().......);  //详见附件
$total          = count($members);
$pageIndex      = $_POST['pageIndex'];
$items_per_page = $_POST['items_per_page'];

$result = array();
$start = $pageIndex * $items_per_page;
$end   = ($pageIndex+1) * $items_per_page;
if($end > $total){$end = $total;}
for($i = $start; $i < $end; $i++){
	$result[] = $members[$i];
}

print json_encode(array('total'=>$total,'result'=>$result));

3，前端js代码（核心）

var items_per_page = 3;
var page_index = 0;

function getDataList(index){
	var pageIndex = index;
	$.ajax({
		type: "POST",
		url: "members.php",
		data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,
		dataType: 'json',
		contentType: "application/x-www-form-urlencoded",
		success: function(msg){
			var total = msg.total;
			var html = '<table><tr><th>姓名</th><th>工作时间</th><th>籍贯</th><th>职务</th><th>生卒年</th><th>操作</th></tr>';
			$.each(msg.result,function(i,n){	
				html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'
				html += '<td><a href=#>删除</a></td></tr>';
			});
			html += '</table>';
			$('#Searchresult').html(html);
			
			//分页-只初始化一次
			if($("#Pagination").html().length == ''){
				$("#Pagination").pagination(total, {
					'items_per_page'      : items_per_page,
					'num_display_entries' : 10,
					'num_edge_entries'    : 2,
					'prev_text'           : "上一页",
					'next_text'           : "下一页",
					'callback'            : pageselectCallback
				});
			}
		}
	});
}


function pageselectCallback(page_index, jq){
	getDataList(page_index);
}

$(document).ready(function(){
	getDataList(page_index);
});

4，前端html

<dl id="Searchresult">
    <dt>Search Results will be inserted here ...</dt>
</dl>
<br style="clear:both;" />
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />

批注：
（1）jquery.js和jquery.pagination.js插件的加载有先后顺序，不能颠倒。特别是在复杂的页面中。
（2）jquery.pagination.js实现可以有很多种。不同的分页插件，使用时可能会有差别，所以最好有足够的js功底，读懂那些插件是如何实现，以及如何引用。
（3）pagination.css是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。


如果您觉得本文的内容对您的学习有所帮助，您可以微信：

评论

12 楼 liyonghui160com 2014-07-24  

感谢楼主 明白了 设置一个状态值

11 楼 dzb3688 2014-07-23  

liyonghui160com 写道

zccst 写道

jacking124 写道

byg760 写道

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

楼主这个问题解决吗？？？

你的问题解决了吗？我遇到了！

这是我很久以前遇到的问题，建议解决办法：不要在回调函数中，写getDataList方法。
function pageselectCallback(page_index, jq){ 
    getDataList(page_index); 
} 
换成另外一种实现方式。

请问如何实现的？

第一次加载且求出数据和分页大小，分页count等，等callback的时候判断一个DOM或input的状态，然后修改即可，
如：
$(document).ready(function() {
        $.ajax({
            type: "get",
            data: "page='' &S=" + S + "&domain=" + domain + "&pagesize="+dopagesize,
            url: "<?php echo $cmsapi; ?>/news",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "jsonpNewsList",
            success: function(data) {
                if (data.result == 200) {
                    $('#aresult').empty();
                    if (!$.isEmptyObject(data.data.list)) {

                        $.each(data.data.list, function(a, list) { //装载对应分页的内容
                            $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
                        });
                    } else {
                        $("#aresult").append('<li><span class="s_check">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暂无数据</span></li>');
                    }
                }
                /**
                 * 初始化完成 显示分页  
                 */
                initPagination(data.data.pages.itemCount, dopagesize);  

            },
            error: function() {
                alert('参数错误');
            }
        });
    });

function initPagination(count, pagesize) {

        // 创建分页
        $("#Pagination").pagination(count, {//共24条
            num_edge_entries: 1, //边缘页数 隐藏之前或之后个数
            num_display_entries: 4, //主体页数显示8个多出隐藏
            callback: pageselectCallback,
            items_per_page: pagesize, //每页显示的3条目数   $this->pagesize
            prev_text: "前一页",
            next_text: "后一页"
        });
    }

  function pageselectCallback(page_index, jq) {   //page_index 前一个表示您当前点击的那个分页的页数索引值
        /**
         * 扩展: 查询客户的关键字搜索
         */
        var search_type = $("#search_type").val();
        var orderby = $("#orderby").val();
        var keywords = '';
        var search = {};
        var online_ajax = $("#online_ajax").val();

        if (online_ajax != 1) {
            $.ajax({
                type: "get",
                data: "page=" + (page_index + 1) + " &S=" + S + "&domain=" + domain + "&pagesize=3",
                url: "<?php echo $cmsapi; ?>/news",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: "jsonpNewsList",
                success: function(data) {
                    if (data.result == 200) {
                        $('#aresult').empty();
                        if (!$.isEmptyObject(data.data.list)) {

                            $.each(data.data.list, function(a, list) { //装载对应分页的内容
                                $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
                            });
                        } else {
                            $("#aresult").append('<li><span class="s_check">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暂无数据</span></li>');
                        }
                    }
                },
                error: function() {
                    alert('参数错误');
                }
            });
        } else {
            $("#online_ajax").val('2');
        }

        return false;
    }

10 楼 liyonghui160com 2014-04-15  

zccst 写道

jacking124 写道

byg760 写道

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

楼主这个问题解决吗？？？

你的问题解决了吗？我遇到了！

这是我很久以前遇到的问题，建议解决办法：不要在回调函数中，写getDataList方法。
function pageselectCallback(page_index, jq){ 
    getDataList(page_index); 
} 
换成另外一种实现方式。

请问如何实现的？

9 楼 zccst 2014-01-14  

jacking124 写道

byg760 写道

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

楼主这个问题解决吗？？？

你的问题解决了吗？我遇到了！

这是我很久以前遇到的问题，建议解决办法：不要在回调函数中，写getDataList方法。
function pageselectCallback(page_index, jq){ 
    getDataList(page_index); 
} 
换成另外一种实现方式。

8 楼 jacking124 2014-01-14  

byg760 写道

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

楼主这个问题解决吗？？？

你的问题解决了吗？我遇到了！

7 楼 byg760 2013-10-14  

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

楼主这个问题解决吗？？？

6 楼 wxw404 2012-09-19  

zccst 写道

wxw404 写道

不知楼主每行的点击‘删除’如何实现的，我试了调用javascript：del（id）这样的方式不行。
另外live 这样的也没试成功过。
请教下楼主。

其实删除本质是在后端进行，只不过需要通过前端告知要删除的记录id，所以在删除标签<a href="" class='del_record' id="record_id">删除</a>中写好class和id。然后使用jquery获取值，传到后端就可以了。jquery代码如下：

$(".del_record").click(function(){
  var id=(this).attr("id");
  $.post(url,{id:id},function(response){},'json');
});

谢谢了 回去试试

5 楼 zccst 2012-09-17  

wxw404 写道

不知楼主每行的点击‘删除’如何实现的，我试了调用javascript：del（id）这样的方式不行。
另外live 这样的也没试成功过。
请教下楼主。

其实删除本质是在后端进行，只不过需要通过前端告知要删除的记录id，所以在删除标签<a href="" class='del_record' id="record_id">删除</a>中写好class和id。然后使用jquery获取值，传到后端就可以了。jquery代码如下：

$(".del_record").click(function(){
  var id=(this).attr("id");
  $.post(url,{id:id},function(response){},'json');
});

4 楼 wxw404 2012-09-16  

不知楼主每行的点击‘删除’如何实现的，我试了调用javascript：del（id）这样的方式不行。
另外live 这样的也没试成功过。
请教下楼主。

3 楼 sugen 2012-05-14  

zccst 写道

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

你有什么好的办法可以避免吗？

暂时还没有做呢。

2 楼 zccst 2012-04-18  

sugen 写道

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback 

你有什么好的办法可以避免吗？

1 楼 sugen 2012-04-17  

你这种写法初始化数据的时候会重复加载两次数据。

--第一次

$(document).ready(function(){ 
    getDataList(page_index); 
}); 


---第二次

'callback': pageselectCallback