導航:首頁 > 編程語言 > paginationjs

paginationjs

 發布時間：2023-05-12 08:15:33

① Laravel一個頁面里有多個分頁並用jQuery pagination.js實現

Laravel一個頁面里有多個分頁並用jQuery pagination.js實現
[javascript] view plain
<!-- JQUERY分頁 -->
<script src="{{asset('lib/js/jquery.pagination.js')}}"></script> //引入該文件前別忘了引入JQUERY庫
<script>
$(function(){
//這是一個非常簡單的demo實例，讓列表元素分頁顯示,我們一個頁面里既有老師，又有學生，分別分頁，還要換行
//回調函數的作用是顯示對應分頁的列表項內容
//回調函數在用戶每次點擊分頁鏈接的時候執行
//參數page_index{int整型}表示當前的索引頁
var initPagination = function() {
// var num_entries = $("#hiddenresult div.result").length;
// 創建分頁
var num_entries = $(".teacher").length; //這個是總條數，所以把生成的teacher類的tr全統計一下
$("#teacher_page").pagination(num_entries, {
num_edge_entries: 1, //邊緣頁數
num_display_entries: 4, //主體頁數
callback: pageselectCallback,
items_per_page:10, //每頁顯示項
prev_text:"上頁",
next_text:"下頁",
});
var num2 = $(".student").length;
$("#student_page").pagination(num2, {
num_edge_entries: 1, //邊緣頁數
num_display_entries: 4, //主體頁數
callback: stuPageselectCallback,
items_per_page:10, //每頁顯示項
prev_text:"上頁",
next_text:"下頁",
});
}();
function pageselectCallback(page_index,jq){ //回調函數，page_index是當前頁的頁碼，第一頁是0,jq是頁面那個分頁的條條容器
var num_entries = $(".teacher").length; //總條數
var per_page = 10; //每頁顯示
var max_elem = Math.min((page_index+1)*per_page,num_entries); //每頁的最大值
// 獲取載入元素
$('.teacher_tr').hide(); //先把原來輸出的隱藏
$('.teacher_tr_new1').empty(); //清空第一行，我們要按照兩行，每行5個輸出
$('.teacher_tr_new2').empty(); //清空第二行
var i = 0;
for(var j=page_index*per_page;j<max_elem;j++){ //每頁執行這個循環，因為是回調函數，所以換一次頁執行一次
if(i>=0 && i<Math.ceil(per_page/2)){ //如果這樣就輸出到第一行
$('.teacher_tr_new1').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");
}else if(i>=Math.ceil(per_page/2) && i<per_page){ //輸出到第二行
$('.teacher_tr_new2').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");
}
i++;
if(i == per_page){ //用I控制是將內容填充到teacher_tr_new1還是2，10是每頁顯示條數
i = 0;
}
}
console.log();
//JQ代表頁面裝載的容器pagi1,pagi2之類的
return false;
}
function stuPageselectCallback(page_index,jq){ //學生的分頁
var num_entries = $(".student").length;
var per_page = 10;
var max_elem = Math.min((page_index+1)*per_page,num_entries);
// 獲取載入元素
// $(jq).prev().hide();
// $(jq).prev().prev().empty();
$('.student_tr').hide();
$('.student_tr_new1').empty();
$('.student_tr_new2').empty();
var i = 0;
for(var j=page_index*per_page;j<max_elem;j++){
if(i>=0 && i<Math.ceil(per_page/2)){
$('.student_tr_new1').append("<td>"+$(".student:eq("+j+")").html()+"</td>");
}else if(i>=Math.ceil(per_page/2) && i<per_page){
$('.student_tr_new2').append("<td>"+$(".student:eq("+j+")").html()+"</td>");
}
i++;
if(i == per_page){
i = 0;
}
}
console.log();
//JQ代表頁面裝載的容器pagi1,pagi2之類的
return false;
}
});
</script>
<!-- JQUERY分頁結束 -->
下面是模板：
[html] view plain
<table>
<tr class='teacher_tr'>
<?php $i=1; ?>
@foreach($teachers as $t)
<td class='teacher'>
<a href="{{URL('myschoolmobileview/jiaoshi/'.$t->id)}}" target='_blank'>{{OfficeConvert($t->office_id)}}:{{$t->name}}</a>
<br>
<img src="{{URL($t->protrait)}}" alt="" width='180' height='250'>
</td>
<?php
if($i%5==0){
echo "</tr>";
echo "<tr class='teacher_tr'>";
}
$i++;
?>
@endforeach
</table>
該班的老師：
<table class='table'>
<tr class='teacher_tr_new1'> //第一行
</tr>
<tr class='teacher_tr_new2'> //第二行
</tr>
<tr>
<td><div id='teacher_page' class='pagination'></div></td> //這里就是我所說的那個容器jq
</tr >
</table>
<!-- 老師結束 -->
<!-- 學生開始 -->
<table>
<tr class='student_tr'>
<?php $i=1; ?>
@foreach($students as $s)
<td class='student'>
{{StudentRoleConvert($s->role_id)}}:{{$s->name}}
<br>
<img src="{{URL($s->header_img)}}" alt="" width='180' height='250'>
</td>
<?php
if($i%5==0){
echo "</tr >";
echo "<tr class='student_tr'>";
}
$i++;
?>
@endforeach
</table>
該班的學生：
<table class='table'>
<tr class='student_tr_new1'>
</tr>
<tr class='student_tr_new2'>
</tr>
<tr>
<td><div id='student_page' class='pagination'></div></td>
</tr >
</table>
最後還要注意下就是，往頁面里輸出的結果太多的話可能會卡，因為原理就是把別的隱藏，只顯示你想要的

② jquery.pagination.js 分頁插件，一直執行回調方法，死循環了

listresult(page_id+1, psize);
請粘貼這個方法的方法體

③ jquery.pagination.js 的next能不能添加click事件

可以，有三種方案：

  1. 直接在next的標簽上寫onclick事件，將你的方法寫在裡面：如

    <a href="#" onclick="next()">next</a>

  2. 寫在頁面的JS裡面

    <a href="#" class="next">next</a>

    如：$(".next").click(function(e) {
    ......
    });

  3. 修改框架的源代碼，實際上這個是最麻煩但是也最靠譜的

④ js實現分頁

然後計算出一共分為幾頁

計算開始顯示的行數，和最後顯示的行數

遍歷顯示數據實現分頁

實現最下方的顯示，第幾頁，上一頁，下一頁
當前頁為第一頁時，上一頁沒有點擊事件
當前頁為最後一頁時，下一頁沒有點擊事件
否則，上一頁和下一頁均可使用，點擊某一頁會跳轉到那一頁

到此，分頁效果已經實現了。

⑤ 求高手幫忙用js對列表進行分頁

我已經把分頁做好了，剩下的你應該可以解決！

varObjPage={};
///總記錄數
ObjPage.RecordCount=0;
///總共頁數
ObjPage.PageCount=0;
///當前頁數,1為第一頁
ObjPage.PageIndex=1;
///每頁記錄數
ObjPage.PageSize=3;
///生成分頁按鈕
ObjPage.Fun=function(){
varsb='';
if(ObjPage.PageIndex<=1){
sb+='<spanid="spanFirst"val="0">首頁</span><spanid="spanPre"val="0">上一頁</span>';
}else{
sb+='<spanid="spanFirst"val="1">首頁</span><spanid="spanPre"val="'+(ObjPage.PageIndex-1)+'">上一頁</span>';
}
if(ObjPage.PageIndex>=ObjPage.PageCount){
sb+='<spanid="spanNext"val="0">下一頁</span><spanid="spanLast"val="0">尾頁</span>';
}else{
sb+='<spanid="spanNext"val="'+(ObjPage.PageIndex+1)+'">下一頁</span><spanid="spanLast"val="'+(ObjPage.PageCount)+'">尾頁</span>';
}
sb+='第<spanid="spanPageNum">'+ObjPage.PageIndex+'</span>頁/共<spanid="spanTotalPage">'+ObjPage.PageCount+'</span>頁';
$(".pagess").html(sb);
};
///初始化數據
ObjPage.Load=function(){
varPicList=$(".PicList");
vardd_length=PicList.find("dd").length;
ObjPage.RecordCount=dd_length;
varPageCount=dd_length%ObjPage.PageSize>0?1:0;
ObjPage.PageCount=parseInt(dd_length/ObjPage.PageSize)+PageCount;
ObjPage.Fun();
};

$(function(){
ObjPage.Load();
$("#spanPre,#spanNext,#spanLast,#spanFirst").live("click",function(){
varv_val=parseInt($(this).attr("val"));
if(v_val==0){
varv_id=$(this).attr("id");alert(v_id);
switch(v_id){
case"spanLast":
alert("已經是尾頁");
break;
case"spanFirst":
alert("已經是首頁");
break;
}
return;
}
ObjPage.PageIndex=v_val;
ObjPage.Fun();
});
});

⑥ js的分頁原理以及實現步驟是什麼

主要是借鑒了網上一個例子，修改了一些小地方，前端分頁的技巧，表格的數據是已經寫好了，可以前端渲染表格然後再分頁，都是可以的。

其實分頁最關鍵是這兩句：

var startRow = (currentPage - 1) * pageSize+1; //currentPage 為當前頁，pageSize為每頁顯示的數據量
var endRow = currentPage * pageSize;

找到我們需要顯示的行的范圍（starRow~endRow）

ps:這里在跳轉的時候遇到了一個小BUG，就是獲取到的select的value值是string類型的，比如獲取到了1，然後你想再加1的時候就會變成"11" 而不是我們想要的"2"，所以這里需要用parseInt( )來轉換一下，小細節需要注意呀！！！

效果圖：


[javascript] view plain print?

⑦ 關於jquery.pagination.js分頁的問題，老報錯是怎麼回事

我也是啊，但個頁面可以，放到mvcindex中就是不行。

------------------------------------------------------------------------

我剛才出來效果了。

我用的MVC4.

一、先在BundleConfig.cs中 引入css 和 jpaginate

//分頁腳本

bundles.Add(new ScriptBundle("~/bundles/jPaginate").Include("~/Content/jPaginate/jquery.paginate.js"));

//分頁樣式

bundles.Add(new StyleBundle("~/bundles/jPaginateCss").Include("~/Content/jPaginate/css/style.css"));

二、 在再layout中 加入：

@Styles.Render("~/bundles/jPaginateCss")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jPaginate")

注意吧jquery的提前了

三、 然後再 Index 中

@{
ViewBag.Title="Index";
}
<h2>Index</h2>
<divclass="demo">
<h1>Demo4</h1>
<divid="demo1">
</div>
</div>
<script>

$(function(){
$("#demo1").paginate();
});
</script>

這是默認的風格，然後自己去調吧 剛試出來的

⑧ jQuery分頁插件pagination具體怎麼用求詳細教程

本文實例為大家分享了jQuery Pagination分頁插件的具體代碼，供大家參考，具體內容如下
一、引用CSS和JS：
<link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"></script>
二、HTML：
<div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;"> </div>
三、JS：
$(function () { var total = parseInt("@(ViewBag.total)"); var page = parseInt("@(ViewBag.page)") - 1; var pageSize = parseInt("@(ViewBag.pageSize)"); $("#Pagination").pagination(total, { callback: function (page_id) { window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page; }, //PageCallback() 為翻頁調用次函數。 prev_text: " 上一頁", next_text: "下一頁 ", items_per_page: 10, //每頁的數據個數 num_display_entries: 1, //兩側首尾分頁條目數 current_page: page, //當前頁碼 num_edge_entries: 11 //連續分頁主體部分分頁條目數 }); });
四、後台代碼：
public ActionResult BoardList() { PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse(Request["page"]) + 1; pager.rows = int.Parse(Request["pageSize"]); pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList(ref pager); List<BoardModel> boardList = pager.result as List<BoardModel>; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

閱讀全文

與paginationjs相關的資料

熱點內容
壓縮文件正在壓縮怎麼取消 瀏覽：462
excel中添加文件路徑名 瀏覽：16
手機收銀用哪個app 瀏覽：229
qq非主流圖片女生帶字 瀏覽：849
移動端js地圖 瀏覽：570
春雨大數據是什麼 瀏覽：47
蘋果6s和蘋果7哪個更好 瀏覽：453
iphone4s相當於安卓 瀏覽：520
如何把qq文件傳入微信 瀏覽：192
德陽怎樣做網站多少錢 瀏覽：353
python判斷文件創建 瀏覽：646
給pdf文件編輯目錄 瀏覽：684
手機qq名字修改不了 瀏覽：114
華為手機怎麼看地圖數據 瀏覽：895
怎麼壓縮文件並且安裝 瀏覽：926
三國淘app什麼時候上線 瀏覽：218
微信朋友圈佔位白圖 瀏覽：662
打開移動數據網速慢為什麼 瀏覽：67
微信連接不了網路連接失敗 瀏覽：2
網頁代碼庫 瀏覽：204

友情鏈接