Javascript JQuery中的分页问题
我需要能够用JQuery解析XML文件，同时显示3篇文章，并具有链接到其余文章的分页 在下面的代码中，我正在解析从slashdot下载的本地XML文件。该代码显示了适当数量的文章，并创建了要分页的链接，但当您单击分页链接时，由于某些原因，它们不起作用。我仍然是jQueryN00B，所以我很难找出问题所在。JQuery似乎没有一个真正好的调试工具 p、 你可以下载到你的本地，这样你就可以测试代码，如果你想 这是密码Javascript JQuery中的分页问题,javascript,jquery,pagination,xml-parsing,javascript-framework,Javascript,Jquery,Pagination,Xml Parsing,Javascript Framework,我需要能够用JQuery解析XML文件，同时显示3篇文章，并具有链接到其余文章的分页 在下面的代码中，我正在解析从slashdot下载的本地XML文件。该代码显示了适当数量的文章，并创建了要分页的链接，但当您单击分页链接时，由于某些原因，它们不起作用。我仍然是jQueryN00B，所以我很难找出问题所在。JQuery似乎没有一个真正好的调试工具 p、 你可以下载到你的本地，这样你就可以测试代码，如果你想 这是密码 <html>
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "slashdot.xml",
dataType: "xml",
success: parseXml
});
});
function parseXml(xml)
{
//find every story
var count = 0;
$(xml).find("story").each(function()
{
count++;
var title = $(this).find('title').text()
var url = $(this).find('url').text()
var fullLink = '<li><a href="'+url+'">' + title + '</a></li>';
//document.write('<a href="'+url+'">' + title + '</a><br/>');
$("#content").append(fullLink);
});
var show_per_page = 3;
var number_of_items = count;
var number_of_pages = Math.ceil(number_of_items/show_per_page);
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a> ';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();"> Next</a>';
$('#page_navigation').html(navigation_html);
$('#page_navigation .page_link:first').addClass('active_page');
$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}
//$("#content").append('count:' + count);
}
</script>
</head>
<body>
<!-- we will add our HTML content here -->
<input type="hidden" id="current_page"></input>
<input type="hidden" id="show_per_page"></input>
<div id="content">
</div>
<div id="page_navigation"></div>
</body>
</html>
$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“slashdot.xml”，
数据类型：“xml”，
成功：parseXml
});
});
函数解析xml（xml）
{
//找到每一个故事
var计数=0；
$（xml）.find（“story”）.each（函数（）
{
计数++；
var title=$（this.find（'title'）.text（）
var url=$（this.find（'url'）.text（）
var fullLink=''；
//文件。写入（“
”）；
$（“#内容”）。附加（完整链接）；
});
var显示每页的值=3；
风险值项目数量=计数；
var number_of_pages=Math.ceil（每页显示的项目数）；
$（'当前页面'）.val（0）；
$（'show#u per_page'）.val（show_per_page）；
var导航_html=''；
无功电流_链路=0；
while（页数>当前链接）{
导航_html+=''；
当前链接++；
}
导航_html+=''；
$（'page_navigation'）.html（navigation_html）；
$（'#page_导航。page_链接：first'）.addClass（'active#page'）；
$（'#content'）.children（）.css（'display'，'none'）；
$（“#content'）.children（）.slice（0，每#页显示#）。css（'display'，'block'）；
函数previous（）{
新建页面=parseInt（$（'#当前页面'）.val（））-1；
//如果在当前活动链接之前有一个项目，请运行该功能
if（$（'.active_page'）.prev（'.page_link'）.length==true）{
转到页面（新页面）；
}
}
函数next（）{
新建页面=parseInt（$（'#当前页面'）.val（））+1；
//如果当前活动链接后有项目，请运行该功能
if（$（'.active_page'）。next（'.page_link'）。length==true）{
转到页面（新页面）；
}
}
功能转到页面（页面编号）{
//获取每页显示的项目数
var show_per_page=parseInt（$（'#show_per_page'）.val（）；
//获取从何处开始切片的元素编号
开始时间=页面数量*每页显示；
//获取结束切片的元素编号
结束时间=开始时间+每页显示时间；
//隐藏contentdiv的所有子元素，获取特定项并显示它们
$（“#content'）.children（）.css（'display'，'none'）.slice（start#from，end#on）.css（'display'，'block'）；
/*获取具有当前页面longdesc属性的页面链接，并向其添加活动页面类
并从以前活动的页面链接中删除该类*/
$（'.page_link[longdesc='+page_num+']）。addClass（'active_page'）。同胞（'.active_page'）。removeClass（'active_page'）；
//更新当前页面输入字段
$（'当前页面'）.val（页面编号）；
}
//$（“#内容”）.append（'count:'+count）；
}
liuloldiv<input type="hidden" id="current_page" />
<input type="hidden" id="show_per_page" />
<ul id="content"></ul>
转到页面中的此
始终指向分页链接
function previous(e) {
e.preventDefault(); //Don't follow the link
$(".active_page").prev(".page_link").click();
}
function next(e) {
e.preventDefault();
$(".active_page").next(".page_link").click();
}
function go_to_page(e) {
e.preventDefault();
//Get the zero-based index instead of using an attribute
var page_num = $(this).index(".page_link");
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().hide().slice(start_from, end_on).show();
//Since this always points to the page link, use that instead of looking for it
$(this).addClass("active_page").siblings(".active_page").removeClass("active_page");
//update the current page input field. Don't need this anymore since we can use the .active_page class to identify it.
//$('#current_page').val(page_num);
}
删除AJAX部分后
function previous(e) {
e.preventDefault(); //Don't follow the link
$(".active_page").prev(".page_link").click();
}
function next(e) {
e.preventDefault();
$(".active_page").next(".page_link").click();
}
function go_to_page(e) {
e.preventDefault();
//Get the zero-based index instead of using an attribute
var page_num = $(this).index(".page_link");
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().hide().slice(start_from, end_on).show();
//Since this always points to the page link, use that instead of looking for it
$(this).addClass("active_page").siblings(".active_page").removeClass("active_page");
//update the current page input field. Don't need this anymore since we can use the .active_page class to identify it.
//$('#current_page').val(page_num);
}