PHP分页+Elasticsearch查询

Posted on | In |
Words count in article: 1.1k

PHP分页+Elasticsearch查询

分页，本质上就是根据给定的页码和偏移量从服务器端请求数据。原理很easy，实践起来却有诸多问题，这里总结一下目前使用的分页demo，通过es请求数据，前端自己构建页码。

这里写图片描述

html的页码显示，有4个参数,$page-具体页码，$pagenum-页数总数，$s-起始页，$e-结束页，点击页码通过触发pageChange()函数进行分页
跳转至指定页码的功能，通过id="jump"获取页码参数，通过跳转按钮触发pageJump()函数请求数据
页码布局上使用bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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()函数请求数据

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
<form id="variable">
	<input type="hidden" name="pagesize" value="5">
	<input type="hidden" name="page" value="1">
</form>

javascript上面html中涉及到的三个函数，以及es查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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去查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
... ...

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查询函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
... ...

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了