PHP分頁+Elasticsearch查詢

時間 2019-11-12

原文原文鏈接

分頁，本質上就是根據給定的頁碼和偏移量從服務器端請求數據。原理很easy，實踐起來卻有諸多問題，這裏總結一下目前使用的分頁demo，經過es請求數據，前端本身構建頁碼。javascript

html的頁碼顯示，有4個參數,$page-具體頁碼，$pagenum-頁數總數，$s-起始頁，$e-結束頁，點擊頁碼經過觸發pageChange()函數進行分頁
跳轉至指定頁碼的功能，經過id="jump"獲取頁碼參數，經過跳轉按鈕觸發pageJump()函數請求數據
頁碼佈局上使用bootstrapphp

<div class="row" style="margin:-15px">html
<div class="col-xs-10 col-xs-offset-1">前端
<div class="row">java
<div class="col-xs-7 remove-padding-r">ajax
<div class="dataTables_paginate paging_simple_numbers pull-right" style="float:left">json
<ul class="pagination">bootstrap
<li <?php if($page==1) echo 'class="disabled"'?>><a href="javascript:pageChange(1);">首頁</a></li>服務器
<?phpcurl
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);
... ...
}
... ...