导航:首页 > 编程语言 > 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相关的资料

热点内容
android蓝牙传文件在哪里 浏览：354
苹果6s软解是真的吗 浏览：310
c语言代码量大 浏览：874
最新网络卫星导航如何使用 浏览：425
以下哪些文件属于图像文件 浏览：774
zycommentjs 浏览：414
确认全血细胞减少看哪些数据 浏览：265
文件有哪些要求 浏览：484
cad打开时会出现两个文件 浏览：65
什么是转基因网站 浏览：48
手柄设备有问题代码43 浏览：921
怎么他么怎么又网络了 浏览：649
java会出现内存泄露么 浏览：617
苹果4s锁屏后怎么还显示歌曲 浏览：207
鸿蒙系统文件管理哪些可以删除 浏览：550
ubuntuqt创建工程没有配置文件 浏览：126
网站登录变成其他网站怎么处理 浏览：202
ug数控编程学校有哪些 浏览：203
java图片上传显示 浏览：402
ppt的文件名后缀 浏览：902

友情链接