自己写的基于bootstrap的简单分页插件

2024-11-15 技术教程

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head><body><nav aria-label="Page navigation"> <ul class="pagination"> </ul></nav></body><script>var obj = { page: 2, pagesize: 10, itemcount: 55, pagecount: 6 }function loadPage(obj){ var page = obj.page var pagesize = obj.pagesize var pagecount = obj.pagecount var str = "<li> <a href='#' aria-label='Previous'> <span aria-hidden='true'>«</span> </a> </li>" if(pagecount<=5){ for(var i=1;i<=pagecount;i++){ if(i == page){ str += "<li class='active'><a href='#'>"+i+"</a></li>" }else{ str += "<li><a href='#'>"+i+"</a></li>" } } }else{ if(page<=2){ for(var i=1;i<=2;i++){ if(i == page){ str += "<li class='active'><a href='#'>"+i+"</a></li>" }else{ str += "<li><a href='#'>"+i+"</a></li>" } } str += "<li><a href='#'>...</a></li>" str += "<li><a href='#'>"+(pagecount-1)+"</a></li>" str += "<li><a href='#'>"+pagecount+"</a></li>" }else if(page>2 && page<pagecount-1){ str += "<li><a href='#'>1</a></li>" str += "<li><a href='#'>2</a></li>" str += "<li><a href='#'>...</a></li>" str += "<li class='active'><a href='#'>"+page+"</a></li>" str += "<li><a href='#'>...</a></li>" str += "<li><a href='#'>"+(pagecount-1)+"</a></li>" str += "<li><a href='#'>"+(pagecount)+"</a></li>" }else{ str += "<li><a href='#'>1</a></li>" str += "<li><a href='#'>2</a></li>" str += "<li><a href='#'>...</a></li>" for(var i=pagecount-1;i<=pagecount;i++){ if(i == page){ str += "<li class='active'><a href='#'>"+i+"</a></li>" }else{ str += "<li><a href='#'>"+i+"</a></li>" } } } } str += "<li> <a href='#' aria-label='Next'> <span aria-hidden='true'>»</span> </a> </li>" $('.pagination').html(str)}loadPage(obj)</script></html>