分页，本质上就是根据给定的页码和偏移量从服务器端请求数据。原理很easy，实践起来却有诸多问题，这里总结一下目前使用的分页demo，通过es请求数据，前端自己构建页码。
html的页码显示，有4个参数,$page-具体页码，$pagenum-页数总数，$s-起始页，$e-结束页，点击页码通过触发pageChange()函数进行分页
id="jump"获取页码参数，通过跳转按钮触发pageJump()函数请求数据 页码布局上使用bootstrap -
<div class="row" style="margin:-15px"> -
<div class="col-xs-10 col-xs-offset-1"> -
<div class="row"> -
<div class="col-xs-7 remove-padding-r"> -
<div class="dataTables_paginate paging_simple_numbers pull-right" style="float:left"> -
<ul class="pagination"> -
<li <?php if($page==1) echo 'class="disabled"'?>><a href="javascript:pageChange(1);">首页</a></li> -
<?php -
if($pagenum<=7) -
{ -
$s=1; -
$e=$pagenum; -
} -
elseif ($page<=3) -
{ -
$s=1; -
$e=7; -
} -
elseif ($page>=($pagenum-3)) -
{ -
$s=$pagenum-6; -
$e=$pagenum; -
} -
else -
{ -
$s=$page-3; -
$e=$page+3; -
} -
for ($i=$s; $i <=$e ; $i++) -
{ -
?> -
<li <?php if($i==$page) echo 'class="active"';?>> -
<a href="javascript:pageChange(<?=$i?>);"><?=$i?></a> -
</li> -
<?php -
} -
?> -
<li <?php if($page==$pagenum) echo 'class="disabled"'?>><a href="javascript:pageChange(<?=$pagenum?>);">末页</a></li> -
</ul> -
</div> -
</div> -
<div class="col-xs-5 remove-padding-l" style="padding-top:20px"> -
<span>共<?=$pagenum?>页</span> -
<input type="text" class="form-control form-focus-blue" id="jump" style="width:70px;display: inline-block;" placeholder="页数" > -
<button class="btn btn-blue btn-sm" onclick="javascript:pageJump();" style="margin-bottom:3px;display: inline-block;">跳转</button> -
</div> -
</div> -
</div> -
</div>
html控制每页显示数据条数，默认选中5条，下拉菜单可以选择其他选项，id="pageItem"获取每页的数据量，选中后触发pageItem()函数请求数据
-
<div class="block-content"> -
共 <span id="itemNum"></span> 条，每页显示条数： -
<select class="form-focus-blue" style="width:48px; display: inline-block;" onchange="javascript:pageItem();" id="pageItem"> -
<option value="5">5</option> -
<option value="10">10</option> -
<option value="25">25</option> -
<option value="50">50</option> -
<option value="100">100</option> -
</select> -
</div>
html表单，便于提交到服务器请求数据pagesize是每页的数据量大小，这里默认为5，page是请求的页码，默认为1
-
<form id="variable"> -
<input type="hidden" name="pagesize" value="5"> -
<input type="hidden" name="page" value="1"> -
</form>
javascript上面html中涉及到的三个函数，以及es查询
-
<script> -
// 控制页面显示的数据量 -
function pageItem () -
{ -
var pagesize = $("#pageItem").val(); -
$("input[name='pagesize']").val(pagesize); -
$("input[name='page']").val("1"); -
Elasticsearch(); -
return false; -
} -
// 跳转至指定页面 -
function pageJump () -
{ -
var jump = $("#jump").val(); -
var itemNum = 10000;// 数据总量，此处假定为10000 -
var pagesize = $("#pageItem").val(); -
var pagenum = Math.ceil(itemNum/pagesize); -
if (1 <= jump && jump <= pagenum) -
pageChange(jump); -
else if(jump < 1) -
alert("请输入跳转页数╰(￣▽￣)╭ "); -
else -
alert("跳转内容超出范围啦(ಥ_ಥ) ") -
} -
// 跳转函数在这里 -
function pageChange (p) -
{ -
// 将要跳转的页码存到HTML表单中 -
$("input[name='page']").val(p); -
// es查询 -
Elasticsearch(); -
scrollTo(0,0); -
return false; -
} -
// 重点来了，es查询 -
function Elasticsearch() { -
$.ajax({ -
type:"POST", -
url:"xxx/Elasticsearch", -
data:$("#variable").serialize(), -
success:function(data){ -
console.log(data); -
} -
}); -
} -
</script>
服务器端把传经来的两个参数，pagesize和page丢给es去查询
-
... ... -
public function Elasticsearch(){ -
$pagesize = $_POST["pagesize"]; -
$page = $_POST["page"]; -
$input = array( -
"page" => $page, -
"pagesize" => $pagesize -
); -
$es_connection_info = $this->my_elasticsearch->es_get_connection_info("host", "port", "index", "type"); -
$es_search = $this->my_elasticsearch->es_search($es_connection_info, $input); -
$result = json_decode($es_search, True); -
... ... -
} -
... ...
es查询函数
-
... ... -
public function es_search ($es_connection_info, $input) { -
$host = $es_connection_info['host']; -
$port = $es_connection_info['port']; -
$index = $es_connection_info['index']; -
$type = $es_connection_info['type']; -
if(is_array($input)){ -
if(array_key_exists("page",$input)){ -
$page = $input["page"]; //page for offset(es_from); -
}else{ -
$page = ""; -
} -
if(array_key_exists("pagesize",$input)){ -
$pagesize = $input["pagesize"]; //es_size; -
}else{ -
$pagesize = ""; -
} -
} -
$arr = "123123"; -
$data = array( -
"query" => -
array("bool" => -
array("must"=> -
array("match_all" => $arr) -
) -
) -
); -
// pagesize/from -
$data["size"] = $pagesize; -
$data["from"] = ($page-1)*$pagesize; -
$url = 'http://' . $host . ':' . $port . '/' . $index . '/'.$type.'/_search'; -
$json_data = json_encode($data); -
$json_data = str_replace('"123123"',"{}",$json_data); -
$data = $this->curl($url, $json_data, $port); -
return $data; -
} -
... ...
请求回来的数据返回到前端再进行必要的展示就OK了