标签：src 实现 dom 复制 hlist span code define keycode
分享一个前端拿到数据后，自己生成分页的案例，案例如图显示，点击搜索后查询数据，显示数据列表，前端根据数据显示正确的分页
附上代码：代码附上,简单粗暴，自己用过的，兼容性好，没有封装，可以很好的分页原理，希望可以帮助到大家
html排版如下：
<!--搜索列表-->
<div class="search">
<div class="container">
<div class="searchList">
<table id="searchList">
<!--<tr>
<td>
<a href="">
<p class="title">正标题</p>
<p class="className"><span>所属分类</span><em class="date">2019-01-01</em></p>
<p class="detail">搜索详细信息展示，要考虑没有的情况下，不显示只显示标题</p>
</a>
</td>
</tr>-->
</table>
<div class="pageRow">
<div id="pageination"></div>
</div>
</div>
</div>
</div>
js代码如下：每一步操作都有注释
//鼠标点击的时候搜索
function searchAction() {
var serchId=$(‘#serchId‘).val();
$.ajax({
type:"post",
url:"Web/search",
data:{"search":serchId},
success:function (data) {
if(data.total!=0){
$(‘#searchList‘).empty();
$.each(data.list,function (i,obj) {
var lielem=‘<tr>\n‘ +
‘ <td>\n‘ +
‘ <a href="‘+obj.url+‘">\n‘ +
‘ <p class="title">‘+obj.title+‘</p>\n‘ +
‘ <p class="className" id="className‘+i+‘"></p>\n‘ +
‘ <p class="detail" id="detail‘+i+‘"></p>\n‘ +
‘ </a>\n‘ +
‘ </td>\n‘ +
‘ </tr>‘;
$(‘#searchList‘).append(lielem);
if(obj.className!= null){
var spanElem=‘<span>‘+obj.className+‘</span>‘;
$(‘#className‘+i).append(spanElem);
}
if(obj.creatTime!=null){
var emElem=‘<em>‘+obj.creatTime+‘</em>‘;
$(‘#className‘+i).append(emElem);
}
if(obj.detail != undefined || obj.detail != null){
var detailElem=‘<p>‘+obj.detail+‘</p>‘;
$(‘#detail‘+i).append(detailElem);
}
})
//位置1 对数据进行分页
$(‘#pageination‘).show();
pagination(3,1);
}else{
$(‘#searchList‘).empty();
var strNull=‘<p style="text-align: center;line-height: 50px">暂无相关搜索结果</p>‘ +
‘<p style="text-align: center"><a href="index.html"><button id="btnback" type="button">返回首页</button></a></p>‘;
$(‘#searchList‘).append(strNull);
$(‘#pageination‘).hide();
}
}
});
}
$(‘#serchId‘).on(‘keydown‘,function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode==13) {
searchAction();
}
})
//列表分页
//perPage 每一页显示条数 current：当前第几页
function pagination(perPage,current) {
var tableData = document.getElementById("searchList");
var totalCount=tableData.rows.length; //总条数
//设置表格总页数
var totalPage=0;//列表的总页数
var pageSize = perPage;
if (totalCount/pageSize > parseInt(totalCount/pageSize)){
totalPage = parseInt(totalCount/pageSize)+1;
}else{
totalPage = parseInt(totalCount/pageSize);
}
//对数据进行分页
var currentPage=current;
var startRow=(currentPage-1)*pageSize+1;
var endRow=(currentPage*pageSize > totalCount ? totalCount : currentPage*pageSize);
for(var i=1;i<(totalCount+1);i++){
var irow = tableData.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
//位置2 生成当前的点击按钮
createBtns(totalPage , current);
//位置3 绑定点击事件
bindClick(totalPage);
}
//生成点击按钮
//totalPages 分页的总页数
//current当前页
function createBtns(totalPages , current) {
var tempStr = "";
/*上一页按钮*/
if (current > 1) {
/* tempStr += "<span class=‘btn first‘ href=\"#\" data-page = ‘1‘>首页</span>";*/
tempStr += "<span class=‘btn prev‘ href=\"#\" data-page = "+(current-1)+">上一页</span>"
}
/*中间页码的显示*/
/*如果总页数超出5个处理办法*/
if(totalPages<=5){
for(var pageIndex= 1 ; pageIndex < totalPages+1; pageIndex++){
tempStr += "<a class=‘btn page"+pageIndex+"‘ data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
}
}else{
if(current<5){
for(var pageIndex= 1 ; pageIndex < 5; pageIndex++){
tempStr += "<a class=‘btn page"+pageIndex+"‘ data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
}
tempStr+=‘<span>......</span>‘;
tempStr += "<a class=‘btn page"+totalPages+"‘ data-page = "+( totalPages )+"><span>"+ totalPages +"</span></a>";
}else if(current>= totalPages-4){
tempStr += "<a class=‘btn page"+1+"‘ data-page = "+( 1 )+"><span>"+ 1 +"</span></a>";
tempStr+=‘<span>......</span>‘;
for(var pageIndex= totalPages-4 ; pageIndex <= totalPages; pageIndex++){
tempStr += "<a class=‘btn page"+pageIndex+"‘ data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
}
}else if(current>=5 && current <totalPages-4){
tempStr += "<a class=‘btn page"+1+"‘ data-page = "+( 1 )+"><span>"+ 1 +"</span></a>";
tempStr+=‘<span>......</span>‘;
for(var pageIndex= current ; pageIndex <= current+4; pageIndex++){
tempStr += "<a class=‘btn page"+pageIndex+"‘ data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
}
tempStr+=‘<span>......</span>‘;
tempStr += "<a class=‘btn page"+totalPages+"‘ data-page = "+( totalPages )+"><span>"+ totalPages +"</span></a>";
}
}
/*下一页按钮*/
if (current < totalPages) {
tempStr += "<span class=‘btn next‘ href=\"#\" data-page = "+(current+1)+">下一页</span>";
/* tempStr += "<span class=‘btn last‘ href=\"#\" data-page = "+ (totalPages) +">尾页</span>";*/
}
document.getElementById("pageination").innerHTML = tempStr;
}
function bindClick(totalPage) {
// 设置首页、末页、上一页、下一页的点击事件
var buttonArr = [‘first‘,‘last‘,‘prev‘,‘next‘];
for(var k in buttonArr){
var $dom = ‘.‘+buttonArr[k];
$(‘body‘).delegate( $dom , ‘click‘ , function () {
var data = $(this).data(‘page‘);//获取当前按钮跳转的页数
pagination(‘3‘ , data);//对页面进行分页
//对当前页码的样式做处理
$(‘.page‘+data).css({background:‘#0449d4‘,color:‘#fff‘}).siblings().css({background:‘#fff‘,color:‘#999‘});
})
}
// 设置数码的点击事件 totalImgPage是总页数，为全局变量，在分页时被赋值
for (var k = 1 ;k <= totalPage ; k++){
var $singleDom = ‘.page‘+k;
$(‘body‘).delegate( $singleDom , ‘click‘ , function () {
var data = $(this).data(‘page‘);
pagination(‘3‘ , data);//对页面进行分页
//对当前页码的样式做处理
$(‘.page‘+data).css({background:‘#0449d4‘,color:‘#fff‘}).siblings().css({background:‘#fff‘,color:‘#999‘});
})
}
}
基于jq复制完整代码此分页功还是能实现的，也展示的分页的原理，若有大神改进，望瞻仰！
标签：src 实现 dom 复制 hlist span code define keycode
原文地址：https://www.cnblogs.com/PotatosMe/p/11075715.html
