前端js分页功能的实现,非常实用,新手必看

您所在的位置:网站首页 翻页功能 前端js分页功能的实现,非常实用,新手必看

前端js分页功能的实现,非常实用,新手必看

2023-05-19 02:45| 来源: 网络整理| 查看: 265

//鼠标点击的时候搜索 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='\n' + ' \n' + ' \n' + '

'+obj.title+'

\n' + '

\n' + '

\n' + ' \n' + ' \n' + ' '; $('#searchList').append(lielem); if(obj.className!= null){ var spanElem=''+obj.className+''; $('#className'+i).append(spanElem); } if(obj.creatTime!=null){ var emElem=''+obj.creatTime+''; $('#className'+i).append(emElem); } if(obj.detail != undefined || obj.detail != null){ var detailElem='

'+obj.detail+'

'; $('#detail'+i).append(detailElem); }

}) //位置1 对数据进行分页 $('#pageination').show(); pagination(3,1); }else{ $('#searchList').empty(); var strNull='

暂无相关搜索结果

' + '

返回首页

'; $('#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=startRow && i 1) { /* tempStr += "首页";*/ tempStr += "上一页" } /*中间页码的显示*/ /*如果总页数超出5个处理办法*/ if(totalPages= totalPages-4){ tempStr += ""+ 1 +""; tempStr+='......'; for(var pageIndex= totalPages-4 ; pageIndex =5 && current



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3