js分页代码

//html代码

<table class="gridtable" align="center" valign="center" id="fenye">
<tr>
<th width=600>单头</th>
<th width=600>单头</th>
</tr>

@foreach($data as $_data)
<tr class="test" style="display: none;">
<td width=600>第一条</td>
<td width=600>第一条数据</td>
</tr>
@endforeach

</table>

//js部分,可以自定义修改

<script>

var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=20;//每页显示<ul>数
var PagesLen;//总页数
var PageNum=7;//分页链接接数(5个)
onload=function(){
obj=document.getElementById("fenye").getElementsByClassName("test");
j=obj.length

PagesLen=Math.ceil(j/listNum);
upPage(0)
}
function upPage(p){
nowPage=p
//内容变换
for (var i=0;i<j;i++){
obj[i].style.display="none"
}
for (var i=p*listNum;i<(p+1)*listNum;i++){
if(obj[i])obj[i].style.display="table-row"
}
//分页链接变换
strS=‘<a href="###" onclick="upPage(0)">首页</a> ‘
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var strC="",startPage,endPage;
if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
for (var i=startPage;i<=endPage;i++){
if (i==nowPage)strC+=‘<a href="###" style="color:red;font-weight:700;" onclick="upPage(‘+i+‘)">‘+(i+1)+‘</a> ‘
else strC+=‘<a href="###" onclick="upPage(‘+i+‘)">‘+(i+1)+‘</a> ‘
}
strE=‘ <a href="###" onclick="upPage(‘+(PagesLen-1)+‘)">尾页</a> ‘
strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
strE3 = ",成功"+{{$success}}+"条,失败<span style=‘color:red;font-weight:700;‘>"+{{$fail}}+"</span>条"
document.getElementById("changpage").innerHTML=strS+strC+strE+strE2+strE3
}

</script>

时间: 2024-10-23 17:20:26

js分页代码的相关文章

angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 1 app.directive('pagePagination', function(){ 2 return {

非常不错的一个JS分页效果代码

这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友做个参考吧. 例子,js分页效果代码. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

js分页、表格

js分页代码: //js分页 //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数 var jsPage = function(el, count, pageStep, pageNum, fnGo) { this.getLink = function(fnGo, index, pageNum, text) { var s = '<a href="#p' + index + '" onclick="'

js 无刷新分页代码

/** * 分页事件处理 */function paging(){ $("#firstPage").click(function(){ //首页 var pageNo = getPage('pageNo'); if (pageNo == 1) { alert("已经是首页"); } else { setPage('pageNo', '1'); loadListDate(); } }); $("#prevPage").click(function(

jsp、js分页功能的简单总结

一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分页技术,有选择的加载某部分数据,在数据量较大的时候,分部分加载数据.显示数据,可以有效提高程序的性能,当然,单纯的js的分页技术并没有这种效果. 所以,分页技术是web技术中比较常用的技术,而下面讨论的主要是两种分页技术:一种是jsp的分页技术,其读取数据分批次读取,操作页数跳转的时候才加载相应页面

js分页

<!DOCTYPE html> <html> <head> <title>js分页</title> <style type="text/css"> /*表格样式*/ .tbData { border-collapse:collapse; border-spacing:0px; border:solid 3px #ddd; font-size:14px; font-family:Consolas; color:#33

js 分页

分页JS代码 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>分页JS代码</title><style type="text/css">.page{margin:2em;}.page a{text-decor

无刷新分页代码,jQuery分页完整示例

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery分页演示效果</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js">&l

使用amaze ui的分页样式封装一个通用的JS分页控件

作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件的小伙子已经离职,就决定自己来写一个. 首先,肯定是用我们的妹子UI做样式效果,毕竟开发妹子少,做的东西能和妹子沾点边,就沾一点,毕竟妹子比较好看. 然后 开始吧 第一步 找到妹子UI的分页HTML代码,一共有2种,我喜欢第一种,比较有颜 这是妹子UI的分页代码 <ul data-am-widget