对于某些查询记录很多的结果，web页面不得不采用分页器，现在奉上一例代码，其主要逻辑是：由页面的dom
节点发起ajax请求，返回的查询结果根据页面布局需要进行切片；并根据总记录数和页面展现的条数算出页码列表
html部分
<!doctype html><html lang="en"><head> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ???<meta name="description" content=""> ???<meta name="author" content=""> ???<link rel="icon" href="../../../../favicon.ico"> ???<title>分页技术测试</title> ???<!-- Bootstrap core CSS --> ???<link href="/static/booststrap4/css/bootstrap.min.css" rel="stylesheet"> ???<!-- Custom styles for this template --> ???<link href="/static/mycss/starter-template.css" rel="stylesheet"></head><body><nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> ???<a class="navbar-brand" href="#">Navbar</a> ???<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> ???????<span class="navbar-toggler-icon"></span> ???</button> ???<div class="collapse navbar-collapse" id="navbarsExampleDefault"> ???????<ul class="navbar-nav mr-auto"> ???????????<li class="nav-item active"> ???????????????<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> ???????????</li> ???????????<li class="nav-item"> ???????????????<a class="nav-link" href="#" onclick="test()">Link</a> ???????????</li> ???????????<li class="nav-item"> ???????????????<a class="nav-link disabled" href="#">Disabled</a> ???????????</li> ???????????<li class="nav-item dropdown"> ???????????????<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> ???????????????<div class="dropdown-menu" aria-labelledby="dropdown01"> ???????????????????<a class="dropdown-item" href="#">Action</a> ???????????????????<a class="dropdown-item" href="#">Another action</a> ???????????????????<a class="dropdown-item" href="#">Something else here</a> ???????????????</div> ???????????</li> ???????</ul> ???????<form class="form-inline my-2 my-lg-0"> ???????????<input id="searchparam" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> ???????????<button onclick = "startsearch()" class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button> ???????</form> ???</div></nav><main role="main" class="container"> ???<div class="starter-template"> ???????<h1>Bootstrap starter template</h1> ???????<div class="alert alert-primary" role="alert"> ???????????<table class="table"> ???????????????<thead> ???????????????<tr> ???????????????</tr> ???????????????</thead> ???????????????<tbody> ???????????????<tr> ???????????????</tr> ???????????????</tbody> ???????????</table> ???????</div> ???????<hr> ???????<nav aria-label="Page navigation example"> ???????????<ul class="pagination"> ?????????????<!-- ?<li ?id = "clickprev" ?class="page-item"><a onclick="moveprev()" class="page-link" href="#">Previous</a></li>--> ???????????????<li id="pagememo"> ???????????????????<span ?style="margin-left:100px;"></span>共计：<span id="totalpage"></span>页<span style="margin-left:50px;"></span>当前第<span id="currentpage"></span>页 ???????????????</li> ???????????</ul> ???????</nav> ???</div></main><!-- /.container --><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="/static/booststrap4/js/jquery-3.3.1.min.js"></script><script src="/static/myjs/forpage2.js"></script></body></html>
thinkphp部分use think\mongo\Query;class Goodmaster extends Controller{ ????function forpagination($tblname,$numperpage,$start,$end,$current) ???{ ???????$ret = Db::connect(‘db_mongo‘)->name($tblname)->select(); ???????$resultlist=Array(); ???????$totalnum = count($ret);//总记录数 ???????$current=intval($current); ???????$numperpage =intval($numperpage); ???????//总页数=总记录数/每页面显示的条数 ???????//关于页数分两种情况：1.总记录数大于每页显示的条数使用上述公式 ???????//2.总记录数小于每页显示的条数，$totalpage = 1 ???????if($totalnum<$numperpage) ???????{ ???????????$totalpage=1; ???????????$startpage = 1; ???????????$endpage = 1; ???????????$resultlist[‘ret‘] =$ret; ???????} ???????else{ ???????????$totalpage = ceil($totalnum/$numperpage); ???????????$startpage = $start; ???????????$endpage = $end; ???????????$leftindex =($current-1)*$numperpage;//数组切片左索引 ???????????$rightindex =$leftindex+$numperpage;//数组切片左索引 ???????????$subret = array_slice($ret,$leftindex,$numperpage); ???????????$resultlist[‘ret‘] =$subret; ???????} ???????$resultlist[‘totalpage‘] =$totalpage; ???????$resultlist[‘frompage‘] =$startpage; ???????$resultlist[‘current‘] =$current; ???????$resultlist[‘topage‘] =$endpage; ???????$resultlist[‘leftindex‘] =$leftindex; ???????$resultlist[‘totalnum‘] =$totalnum; ???????//return var_dump($resultlist); ???????return $resultlist; ???}}thinkphp5.11查询功能 代码，牛逼的朋友请自行去粗取精
一例基于thinkphp，jquery和bootstrap渲染的查询数据分页器
原文地址：https://www.cnblogs.com/saintdingspage/p/10398362.html