,,JavaScript自定义分页样式

这篇文章主要为大家详细介绍了Java脚本语言自定义分页样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

自定义分页样式，不多废话，直接上代码~

超文本标记语言部分

div id='我的id '

div class='my_id '

表格样式=' '

thead style=' '

（美)财政部(财政部)购买日期/td

（美)财政部(财政部)门票名称/td

（美)财政部(财政部)比赛时间/td

（美)财政部(财政部)比赛选手/td

（美)财政部(财政部)门票数量/td

/tr

/thead

tbody

/tbody

/表格

/div

射流研究…部分

函数testFun(){

定义变量数据=[

['哈哈','呵呵','嘿嘿','啦啦','耶耶'],

];

var inner=[]；

for(var I=0；i10i ){

var trList='tr '

' td '数据[i][0] '/td '

' td '数据[i][1] '/td '

' td '数据[i][2] '/td '

' td '数据[i][3] '/td '

' td '数据[i][4] '/td '

/tr '；

内心。推送(tr列表)；

}

//分页方法调用

myPagination(my_id，inner，10)；

}

* 分页

* a传入的是身份证明(识别)

*内部传入的是列表内容

*页面大小每页显示的数目

函数myPagination(a，inner，PageSize){

var pageNum=' div class=' pagination col-xs-12 ' '

div class='setpage ' '

跨度第跨度输入type=' text ' class=' current page ' class=' form-control ' span页/span '

跨度共font class='totalpage'/font页/span '

跨度每页有font class='pagesize'/font条消息/span '

跨度当前为第font class=' current _ 1 '/font-font class=' current _ 2 '/font条消息/span '

/div '

/div '；

$(一)。append(pageNum)；

$(一)。查找('。分页)。css({

高度':' 100% ',

宽度':' 58% ',

浮动':'左，

填充：' 3px 10px '，

背景色：' #fff '，

边距':' 0 '

});

$(一)。查找('。设置页面).css({

高度':' 100% ',

宽度':' 100% ',

行高：' 30px '，

边距':' 0自动'

});

$(一)。查找('。设置页面跨度)。css({

浮动':'左，

填充：' 0 5px '

});

$(一)。查找('。setpage字体).css({

颜色：' #DD4449 '，

填充：' 0 5px '

});

$(一)。查找('。设定页面输入)。css({

宽度：' 50像素'，

浮动':'左，

边框-半径：' 5px '

});

//分页

var计数=inner.length//记录条数

var PageSize=PageSize//设置每页示数目

var页数=数学。ceil(计数/页面大小)；//计算总页数

var当前页面=1；//当前页，默认为1。

$(一)。查找('。pagesize) .html(PageSize)；//显示每页示数目

$(一)。查找('。设置页面. current _ 1’).html(' 1 ')；//默认当前条数一

$(一)。查找('。设置页面. current _ 2’).html(PageSize)；//默认当前条数2

//设置输入页面框的范围，并设置初始值

$(一)。查找('。当前页面).值（当前页面)

//显示默认页（第一页)

for(I=(当前页-1)* PageSize；iPageSize * currentPagei ){

$(一)。查找(' tbody ').append(inner[I])；

}

$(一)。查找('。总页数”).html(页数)；//总页数

//显示输入页的内容

$(一)。查找('。当前页面).change(function(){

如果($(这个)。val()1||$(这个)。val()PageCount){

$(一)。查找(' tbody ').html('trtd colspan='3 '没有更多的消息./TD/tr’)；

}否则{

var currentpage=$(this).val()；

$(一)。查找(' tbody ').html(" ")；

for(I=(当前页-1)* PageSize；iPageSize * currentpagei ){

$(一)。查找(' tbody ').append(inner[I])；

$(一)。查找('。设置页面. current _ 1’).html((当前页面-1)* PageSize 1)；

if(PageSize*currentpageCount){

$(一)。查找('。设置页面. current _ 2’).html(PageSize * currentpage)；

}否则{

$(一)。查找('。设置页面. current _ 2’).html(计数);

}

});

}

效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读