手写js前端分页功能实现
1、先上图看看分页结果
2、附上代码：简单粗暴，没有封装。自己用过的，希望可以帮助到大家
html代码如下：
<div class="sreachBox">
<input class="sreachInpt" type="text" />
<a href="javascript:;" class="btn_close"></a>
<div class="linestyl"></div>
<a class="btn_search" href="javascript:void(0)"> <span onclick="search(1,10)"></span></a>
<div class="sreachDialog hide">
<span>地名地址</span>
<span>公司企业</span>
<span>机构团体</span>
</div>
<div class="resultDialog hide" style="height:90vh;overflow-y:scroll;">
<div id="poi_panel">
<div class="search-promt">
<span class="static">共找到<span class="count" id="spanId">5</span>条结果</span>
</div>
<div class="resultbox" style="width:265px; height:720px;">
<div class="results" id="style-7">
</div>
</div>
<div class="pagebox" id="pageination">
</div>
</div>
</div>
</div>
js代码如下：
function search(pageNum,pageSize) {
var source = new ol.source.Vector({
wrapX: false
});
var newFeature = "";
var mapGeometry = "";
let points = "";
$.ajax({
type: "get",
url: "/map/mp/list?&pageNum="+pageNum+"&pageSize="+pageSize,
data: {
"type": clickVal
},
success: function(r) {
if(r.code == 0) {
map.removeLayer(vector);
$('#spanId').html(r.total);
$('.sreachInpt').val(clickVal);
$('.results').empty();
$('.results').append("<ul></ul>");
var n=1;
if(r.rows.length>0){
for(var i = 0; i < r.rows.length; i++) {
$('.results ul').append("<li onclick='flyTo((["+r.rows[i].gpslng+","+r.rows[i].gpslat+"]), function () {})'>\r\n" +
" <div class='list_icon blue_icon_"+(i+1)+"'></div>\r\n" +
" <div class=\"list_content\">\r\n" +
" <span class=\"place_name\">"+r.rows[i].name+"</span>\r\n" +
" <span class=\"info\">"+'地址：'+r.rows[i].address+"</span>\r\n" +
" </div>\r\n" +
" </li>");
feature = new ol.Feature({
geometry: new ol.geom.Point([r.rows[i].gpslng, r.rows[i].gpslat]),
number: n,
});
//设置点的样式
feature.setStyle(createLabelStyle(feature));
//将当前要素添加到矢量数据源中
source.addFeature(feature);
vector = new ol.layer.Vector({
source: source
});
n++;
}
map.addLayer(vector);
}
$('.resultDialog').show();
pagination(pageSize,pageNum);
} else {
map.removeLayer(vector);
$('#spanId').html(0);
$('.sreachInpt').val(clickVal);
$('.results').empty();
}
}
});
}
js动画效果
var viewAnimate = map.getView();
function flyTo(location, done) {
var duration = 500;
var zoom = viewAnimate.getZoom();
var parts = 1; // 判断下列两个动画效果是否都执行完毕
var called = false; // ? 未懂
function callback(complete) {
--parts;
if (called) { //此处的parts和called是什么意思没看懂
return;
}
if (parts === 0 || !complete) { //动画效果完成 或 动画效果中断 complete是内部传入参数，判断动画执行还是中断
called = true;
done(complete); //动画效果完后执行的函数
}
}
//第一个动画效果 到达目的点
//第二个动画效果 执行放大缩小
//两个动画换位，则两个先放大缩小，在转到目的点
viewAnimate.animate({
center: location,
duration: duration
}, callback);
}
//列表分页
//perPage 每一页显示条数 current：当前第几页
function pagination(perPage,current) {
var tableData = document.getElementById("spanId").innerText;
var totalCount=tableData; //总条数
//设置表格总页数
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);
//位置2 生成当前的点击按钮
createBtns(totalPage , current);
//位置3 绑定点击事件
//bindClick(totalPage);
}
//生成点击按钮
//totalPages 分页的总页数
//current当前页
function createBtns(totalPages , current) {
var tempStr = "";
/*上一页按钮*/
if (current > 1) {//页数大于1，显示上一页
/* tempStr += "<span class='btn first' href=\"#\" data-page = '1'>首页</span>";*/
tempStr += "<a class='prePage' href=\"#\" data-page = "+(current-1)+" onclick='bindClickLast(this)'><</a>"
}
/*中间页码的显示*/
/*如果总页数超出5个处理办法*/
if(totalPages<=5){
for(var pageIndex= 1 ; pageIndex < totalPages+1; pageIndex++){
tempStr += "<a class='btn page"+pageIndex+"' data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
}
}else{
if(current<5){
for(var pageIndex= 1 ; pageIndex <= 4; pageIndex++){
if(current==pageIndex){
tempStr += "<a class='page active' data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
}else{
tempStr += "<a class='page active"+pageIndex+"' href=\"#\" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
}
}
tempStr+='<span>....</span>';
tempStr += "<a class='btn page"+totalPages+"' href=\"#\" data-page = "+( totalPages )+" onclick='bindClickSkip("+ totalPages +")'>"+ totalPages +"</a>";
}else if(current>= totalPages-4){
tempStr += "<a class='btn page"+1+"' href=\"#\" data-page = "+( 1 )+" onclick='bindClickSkip(1)'>1</a>";
tempStr+='<span>....</span>';
for(var pageIndex= totalPages-4 ; pageIndex <= totalPages; pageIndex++){
if(current==pageIndex){
tempStr += "<a class='page active' data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
}else{
tempStr += "<a class='page active"+pageIndex+"' href=\"#\" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
}
}
}else if(current>=4 && current <totalPages-4){
tempStr += "<a class='btn page"+1+"' href=\"#\" data-page = "+( 1 )+" onclick='bindClickSkip(1)'>1</a>";
tempStr+='<span>....</span>';
for(var pageIndex= current ; pageIndex <= parseInt(current)+2; pageIndex++){
if(current==pageIndex){
tempStr += "<a class='page active' data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
}else{
tempStr += "<a class='page active"+pageIndex+"' href=\"#\" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
}
}
tempStr+='<span>....</span>';
tempStr += "<a class='btn page"+totalPages+"' href=\"#\" data-page = "+( totalPages )+" onclick='bindClickSkip("+ totalPages +")'>"+ totalPages +"</a>";
}
}
/*下一页按钮*/
if (current < totalPages) {
tempStr += "<a class='page-next' href=\"#\" data-page = "+(parseInt(current)+1)+" onclick='bindClickNext(this)'>></a>";
/* tempStr += "<span class='btn last' href=\"#\" data-page = "+ (totalPages) +">尾页</span>";*/
}
document.getElementById("pageination").innerHTML = tempStr;
}
function bindClickNext(obj) {
var pageNum=$(obj).attr("data-page");
var pageSize=10;
// 设置首页、末页、上一页、下一页的点击事件
search(pageNum,pageSize);
}
function bindClickLast(obj) {
var pageNum=$(obj).attr("data-page");
var pageSize=10;
// 设置首页、末页、上一页、下一页的点击事件
search(pageNum,pageSize);
}
function bindClickSkip(pageNum) {
var pageSize=10;
// 设置首页、末页、上一页、下一页的点击事件
search(pageNum,pageSize);
}
设置样式
function createLabelStyle(feature) { var number = feature.get('number'); var imgsrc = ""; switch(number) { case 1: imgsrc = '../com/map/img/point/point001.png'; break; case 2: imgsrc = '../com/map/img/point/point002.png'; break; case 3: imgsrc = '../com/map/img/point/point003.png'; break; case 4: imgsrc = '../com/map/img/point/point004.png'; break; case 5: imgsrc = '../com/map/img/point/point005.png'; break; case 6: imgsrc = '../com/map/img/point/point006.png'; break; case 7: imgsrc = '../com/map/img/point/point007.png'; break; case 8: imgsrc = '../com/map/img/point/point008.png'; break; case 9: imgsrc = '../com/map/img/point/point009.png'; break; case 10: imgsrc = '../com/map/img/point/point010.png'; break; default: imgsrc = '../com/map/img/poi/000000.png'; } //返回一个样式 return new ol.style.Style({ //把点的样式换成ICON图标 fill: new ol.style.Fill({ //填充颜色 color: 'rgba(255,0,0,5)' }), image: new ol.style.Icon(({ src: imgsrc, })), //层 zIndex: 1 }); };
