jquery经典分页

最新推荐文章于 2025-06-05 17:21:18 发布

原创最新推荐文章于 2025-06-05 17:21:18 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Ajax #HTML #ViewUI

jquery 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了一个使用jQuery实现的Ajax分页插件的具体应用案例。通过实例代码展示了如何加载和展示分页内容，包括设置回调函数处理页面选择事件、通过Ajax获取数据并更新页面显示等关键步骤。

jQuery Pagination Ajax分页插件中文详解
<script type="text/javascript">

function pageselectCallback(page_id, jq){
alert(page_id);
$('#Searchresult').html("");
$.getJSON("http://localhost:8088/JQuery/data.do",showDataFun);
//$('#Searchresult').text("显示结果 "+((page_id*10)+1)+"-"+((page_id*10)+10));
}
function showDataFun(data){
var datas = data.jobs;
for(var i=0;i<datas.length;i++){
$("#Searchresult").append("<li>"+datas[i].name+"</li>");
}
}
/**
* Callback function for the AJAX content loader.
*/
function initPagination() {
var num_entries = $("#testnumber").val();
alert(num_entries);
// Create pagination element
$("#Pagination").pagination(num_entries, {
first_text:"首页",
prev_text:"上一页",
next_text:"下一页",
last_text:"尾页",
ellipse_text:"...",
num_edge_entries: 2,
num_display_entries: 7,
callback: pageselectCallback,
items_per_page:1
});
}
$(document).ready(function(){
$.getJSON("http://localhost:8088/JQuery/data.do",function(data){
$("#testnumber").val(data.numbers);
showDataFun(data);
});
$("#test").load("#",null,initPagination);
//$("#test").hide();
});
</script>