快捷導(dǎo)航

jQuery pagination分頁(yè)示例詳解

更新時(shí)間：2018年10月23日 14:39:54 作者：nvzizhou

這篇文章主要為大家詳細(xì)介紹了jQuery pagination分頁(yè)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery pagination分頁(yè)示例的具體代碼，供大家參考，具體內(nèi)容如下

前臺(tái)html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
 
<title>通知公告列表</title>
 
<link rel="stylesheet" href="../css/pagination.css" type="text/css"></link> 
 
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> 
 
<script type="text/javascript" src="../js/jquery.pagination.js"></script> 
 
<style>
 .page{
 width:95%;
 height:770px;
 margin:0 auto;
 padding:10px;
 border:2px solid #ccc;
 border-radius:5px;
 margin-bottom:30px;
 }
 a{text-decoration:none;color:#489FE8;}
 
</style>
 
<script>
 
 //var fpURL="url";
 var fpURL="url";
 
 
 var total=0; 
 
 $(function(){//頁(yè)面加載時(shí)，進(jìn)行綁定 
 $.ajax({
 type:"get",
 url:fpURL+"GetZxwj?lx=List",
 data:"",
 dataType:"json",
 beforeSend: function () {
 
 $(".img").show();
 },
 complete:function(){
 
 $(".img").hide();
 bind(0);
 
 },
 success:function(data){
 var obj=eval(data);
 $.each(obj.data,function(index,item){ 
  total=parseInt(item.co);//獲取總條數(shù)
 })
 }
 })
 
 }); 
 
 //點(diǎn)擊分頁(yè)時(shí)調(diào)用的函數(shù)，page_id為當(dāng)前頁(yè)的索引 
 function pageselectCallback(page_id, jq) { 
 bind(page_id); 
 } 
 
 var ListArr=[];
 function bind(pageIndex) 
 { 
 var temp=""; 
 $.ajax({ 
 type:"GET", 
 
 //url:"sys/news.do?method=findByTopic&page="+(pageIndex+1), 
 url:fpURL+"GetZxwj?lx=zxwjList&ts="+(pageIndex+1),
  
 async:false, ////作用是防止在ajax成功調(diào)用之前就調(diào)用$("#Pagination").pagination,這個(gè)時(shí)候數(shù)據(jù)個(gè)數(shù)還沒(méi)有初始化 
 
 dataType:"json", 
 
 //data:"pageIndex="+(pageIndex+1),//傳遞頁(yè)面索引 
 data:"",
 
 //發(fā)送請(qǐng)求前，顯示加載動(dòng)畫 
 beforeSend:function(){
 $(".img").show();
 }, 
 //請(qǐng)求完畢后，隱藏加載動(dòng)畫 
 complete:function(){
 
 $(".img").hide();
 }, 
 success:function(data){ 
 
 var obj=eval(data);
 
 //alert(obj.data.length);
 
 //total=obj.data.length;//記錄總數(shù) 
 
 $.each(obj.data,function(index,item){ 
 
 temp+="<div>"+ 
 
 "<a style='font-size: 18px; font-famliy: 微軟雅黑;font-weight:700;' OnClick='document.location.href=""+ fpURL +" rel="external nofollow" cmp/tzgg/zxwjContent.html?id="+ item.wjid +""' >"+ item.wjmc+"</a> "+ 
 
 "<div style='font-size: 14px; font-famliy: 宋體; text-indent: 2em; margin-top: 5px;'>"+ item.fbrq+" </div> "+
 
 "<hr style='border:1px solid #ccc;width:100%;'/>"; 
 
 
 }); 
 
 $("#datas").html(temp); //將創(chuàng)建的新行附加在DIV中 
 
 } 
 
 }); 
 
 if(total!=0){ 
 //調(diào)用分頁(yè)函數(shù)，將分頁(yè)插件綁定到id為Pagination的div上 
 $("#Pagination").pagination(total, { //recordCount在后臺(tái)定義的一個(gè)公有變量，通過(guò)從數(shù)據(jù)庫(kù)查詢記錄進(jìn)行賦值，返回記錄的總數(shù) 
 callback: pageselectCallback, //點(diǎn)擊分頁(yè)時(shí)，調(diào)用的回調(diào)函數(shù) 
 prev_text: '« 上一頁(yè)', //顯示上一頁(yè)按鈕的文本 
 next_text: '下一頁(yè) »', //顯示下一頁(yè)按鈕的文本 
 items_per_page:12, //每頁(yè)顯示的項(xiàng)數(shù) 
 num_display_entries:4, //分頁(yè)插件中間顯示的按鈕數(shù)目 
 current_page:pageIndex, //當(dāng)前頁(yè)索引 
 num_edge_entries:2 //分頁(yè)插件左右兩邊顯示的按鈕數(shù)目 
 
 }); 
 } 
 } 
 
</script>
</head>
 
<body style=""> 
 
<div class="img" style="display:none;text-align:center;margin:0 auto;margin-top:200px;z-index:1000;">
 <img src="../image/jz.jpg">
</div>
<div class="page"> 
<div id="datas"> 
 
</div> 
<div id="Pagination" style="margin-bottom:10px;"></div> 
</div> 
 
 
</body> 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: