PHP分頁+Elasticsearch查詢
分頁,本質上就是根據給定的頁碼和偏移量從伺服器端請求資料。原理很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;
-
}
-
... ...
請求回來的資料返回到前端再進行