js实现一个表格分页代码(js前端分页)
admin 发布:2022-12-19 20:31 130
本篇文章给大家谈谈js实现一个表格分页代码,以及js前端分页对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、JS如何控制分页
- 2、怎么用js来实现页面的分页,有案列代码吗?请给个代码看看,谢谢
- 3、Javascript vue.js表格分页,ajax异步加载数据
- 4、jquery怎么动态实现表格分页
- 5、js的分页原理以及实现步骤是什么?
JS如何控制分页
//js获取url上的参数
function getParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var page = getParam('page');
怎么用js来实现页面的分页,有案列代码吗?请给个代码看看,谢谢
分屏加载吧 滑到哪加载哪
从网页头引入两个js文件,注意必须先放jquery的
[javascript] view plaincopy
script src="css/infinite-scroll/jquery-1.6.4.js"/script
script src="css/infinite-scroll/jquery.infinitescroll.js"/script
2.之后在网页头自己写一个js脚本
[javascript] view plaincopy
script
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)
animate: true, //加载时候时候需要动画,默认是false
maxPage: 3, //最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
/script
3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助
[html] view plaincopy
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html
html
head
meta charset="utf-8"
title无限翻页效果/title
script src="css/infinite-scroll/jquery-1.6.4.js"/script
script src="css/infinite-scroll/jquery.infinitescroll.js"/script
script src="css/infinite-scroll/test/debug.js"/script
script
$(document).ready(function (){ //别忘了加这句,除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
/script
/head
body
div id="container" !-- 容器 --
div class="scroll" !-- 每次要加载数据的数据块--
第一页内容第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容
/div
/div
div id="navigation" align="center" !-- 页面导航--
a href="user/list?page=1"/a !-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。--
/div
/body
/html
Javascript vue.js表格分页,ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
效果:
代码:
1.注册一个组件
js
Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick:
function(index){
if(index
!=
this.cur){
this.cur
=
index;
}
}
},
watch:{
"cur"
:
function(val,oldVal)
{
this.$dispatch('page-to',
val);
}
},
computed:{
indexes
:
function(){
var
list
=
[];
//计算左右页码
var
mid
=
parseInt(this.pageNum
/
2);//中间值
var
left
=
Math.max(this.cur
-
mid,1);
var
right
=
Math.max(this.cur
+
this.pageNum
-
mid
-1,this.pageNum);
if
(right
this.all
)
{
right
=
this.all}
while
(left
=
right){
list.push(left);
left
++;
}
return
list;
},
showLast:
function(){
return
this.cur
!=
this.all;
},
showFirst:
function(){
return
this.cur
!=
1;
}
}
});
模板:
script
type="text/template"
id="paginationTpl"
nav
v-if="all
1"
ul
class="pagination"
li
v-if="showFirst"a
href="javascript:"
@click="cur--"«/a/li
li
v-for="index
in
indexes"
:class="{
'active':
cur
==
index}"
a
@click="btnClick(index)"
href="javascript:"{{
index
}}/a
/li
li
v-if="showLast"a
@click="cur++"
href="javascript:"»/a/li
lia共i{{all}}/i页/a/li
/ul
/nav
/script
HTML:
div
id='item_list'
...
pagination
:cur="1"
:all="pageAll"
:page-num="10"
@page-to="loadList"/pagination
/div
当点击分页链接的时候,通过watch
cur,子组件分发
page-to
事件,通过
@page-to="loadList"
标签指定使用父组件
loadList
方法处理事件,父组件接收到page值然后ajax加载数据,根据服务端返回计算并更新自身的
pageAll
值,因为子组件prop通过
:all="pageAll"
动态绑定了父组件的pageAll对象,所以子组件会联动更新。
附上一个简单的表格组件例子:
var
vm
=
new
Vue({
el:
"#item_list",
data:
{
items
:
[],
//分页参数
pageAll:0,
//总页数,根据服务端返回total值计算
perPage:10
//每页数量
},
methods:
{
loadList:function(page){
var
that
=
this;
$.ajax({
url
:
"/getList",
type:"post",
data:{"page":page,"perPage":this.perPage},
dataType:"json",
error:function(){alert('请求列表失败')},
success:function(res){
if
(res.status
==
1)
{
that.items
=
res.data.list;
that.perPage
=
res.data.perPage;
that.pageAll
=
Math.ceil(res.data.total
/
that.perPage);//计算总页数
}
}
});
},
//初始化
init:function(){
this.loadList(1);
}
}
});
vm.init();
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
jquery怎么动态实现表格分页
jquery动态实现表格分页的方法是利用自带的分页插件jQuery.page.js。
下面是使用方法:
$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法,p是当前页码
}
});
pageCount:总页数
current:当前页
实现分页的tab如下:
div class="tcdPageCode"
span class="disabled"上一页/span
span class="current"1/span
a href="javascript:;" class="tcdNumber"2/a
a href="javascript:;" class="tcdNumber"3/a
a href="javascript:;" class="tcdNumber"4/a
span.../span
a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一页/a/div
实现效果:
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 copy print?
!doctype html
html
head
meta charset='utf-8'
style type="text/css"
a{
text-decoration: none;
}
.table2{
border:#C8C8C8 solid;
border-width:1px 0px 0px 1px;
background: #F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8 solid;
border-width:0 0 1px 0;
}
.td2{
border:#C8C8C8 solid;
border-width:0 1px 1px 0 ;
}
.barcon {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.barcon1 {
font-size: 17px;
float: left;
margin-top: 20px;
}
.barcon2 {
float: right;
}
.barcon2 ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.barcon2 li {
display: inline;
}
.barcon2 a {
font-size: 16px;
font-weight: normal;
display: inline-block;
padding: 5px;
padding-top: 0;
color: black;
border: 1px solid #ddd;
background-color: #fff;
}
.barcon2 a:hover{
background-color: #eee;
}
.ban {
opacity: .4;
}
/style
/head
body
table width="950" cellpadding="0" cellspacing="0" class="table2" align="center"
thead
tr
td colspan="3" height="33" class="td0" /td
td align="center" class="td2"a href="###"添加用户/a/td
/tr
tr align="center"
th width="150" height="33" class="td2"序号/th
th width="300" class="td2"用户名/th
th width="250" class="td2"权限/th
th width="250" class="td2"操作/th
/tr
/thead
tbody id="adminTbody"
tr align="center"
td class="td2" height="33" width="150"1/td
td class="td2" admin/td
td class="td2" 管理员/td
td class="td2" a href="###"修改/a/td
/tr
/tbody
/table
div id="barcon" class="barcon"
div id="barcon1" class="barcon1"/div
div id="barcon2" class="barcon2"
ul
lia href="###" id="firstPage"首页/a/li
lia href="###" id="prePage"上一页/a/li
lia href="###" id="nextPage"下一页/a/li
lia href="###" id="lastPage"尾页/a/li
liselect id="jumpWhere"
/select/li
lia href="###" id="jumpPage" onclick="jumpPage()"跳转/a/li
/ul
/div
/div
script src="jquery.js"/script
script
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1;i=num;i++)
{
var trNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
var tdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width = "150px";
tdNodeNum.style.height = "33px";
tdNodeNum.className = "td2";
//用户名
var tdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width = "300px";
tdNodeName.className = "td2";
//权限
var tdNodePri=document.createElement("td");
tdNodePri.style.width = "250px";
tdNodePri.className = "td2";
var priText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
var tdNodeOper = document.createElement("td");
tdNodeOper.style.width = "170px";
tdNodeOper.className = "td2";
var editA = document.createElement("a");
$(editA).attr("href", "###").text("编辑");
$(editA).css({ display: "inline-block" });
tdNodeOper.appendChild(editA);
trNode.appendChild(tdNodeNum);
trNode.appendChild(tdNodeName);
trNode.appendChild(tdNodePri);
trNode.appendChild(tdNodeOper);
$("#adminTbody")[0].appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
var tempOption="";
for(var i=1;i=totalPage;i++)
{
tempOption+='option value='+i+''+i+'/option'
}
$("#jumpWhere").html(tempOption);
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
* 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
**/
var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量,用于跳转时判断是否在相同页,在就不跳,否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody");
var num = itable.rows.length;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
currentPage_=currentPage;
var startRow = (currentPage - 1) * pageSize+1;
var endRow = currentPage * pageSize;
endRow = (endRow num)? num : endRow;
//遍历显示数据实现分页
/*for(var i=1;i(num+1);i++){
var irow = itable.rows[i-1];
if(i=startRow i=endRow){
irow.style.display = "";
}else{
irow.style.display = "none";
}
}*/
$("#adminTbody tr").hide();
for(var i=startRow-1;iendRow;i++)
{
$("#adminTbody tr").eq(i).show();
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
document.getElementById("barcon1").innerHTML = tempStr;
if(currentPage1){
$("#firstPage").on("click",function(){
goPage(1,psize);
}).removeClass("ban");
$("#prePage").on("click",function(){
goPage(currentPage-1,psize);
}).removeClass("ban");
}else{
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if(currentPagetotalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize);
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize);
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
/script
/body
/html
关于js实现一个表格分页代码和js前端分页的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:源代码高清百度网盘(源代码百度云盘)
- 下一篇:发帖工具代码(发帖工具代码怎么写)
相关推荐
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接