日期:2014-05-16  浏览次数:20459 次

javascript+Div+分页功能的实现
具体的效果图见
http://www.360buy.com/moreSubject.aspx所示,不是做AD

在页面里,我们看见有左右两个Div,里面用<ul><li>..</li></ul>,并且每个<div>下面都有分页指示,这和传统的分页不太一样,特发上来,请各位指点一下,是不是Ajax? JS?框架,还是。。。?

------解决方案--------------------
查看他的源代码
太明显了吧

用的是jquery.pagination.1.1.js库

$(
function()
{

$.fn.pagination.options =
{
items_per_page: 30,
num_display_entries: 2,
current_page: 0,
num_edge_entries: 2,
link_to: "javascript:void(0)",
prev_text: "上一页",
next_text: "下一页",
ellipse_text: "...",
prev_show_always: false,
next_show_always: false,
callback: pageSelected,
title:""
};

refreshDiy();
});

function pageSelected(page_id, jq)
{
$.fn.pagination.options.current_page = page_id;
refreshDiy();
}

function refreshDiy()
{
$.jmsajax(
{
url: "newsserver.asmx",
method: "Getnews",
data:
{
pageIndex: $.fn.pagination.options.current_page,
pageSize: $.fn.pagination.options.items_per_page,
title: $.fn.pagination.options.title

},
success: function(data)
{

if (data != null)
{

$(".left").html(data);
$("#pager").pagination($("#pager").attr("title"), $.fn.pagination.options);
}
}
});
}