文档章节

PHP分页+Elasticsearch查询

d
 dragon_tech
发布于 03/30 15:52
字数 929
阅读 26
收藏 0

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

这里写图片描述

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

 
  1. <div class="row" style="margin:-15px">

  2. <div class="col-xs-10 col-xs-offset-1">

  3. <div class="row">

  4. <div class="col-xs-7 remove-padding-r">

  5. <div class="dataTables_paginate paging_simple_numbers pull-right" style="float:left">

  6. <ul class="pagination">

  7. <li <?php if($page==1) echo 'class="disabled"'?>><a href="javascript:pageChange(1);">首页</a></li>

  8. <?php

  9. if($pagenum<=7)

  10. {

  11. $s=1;

  12. $e=$pagenum;

  13. }

  14. elseif ($page<=3)

  15. {

  16. $s=1;

  17. $e=7;

  18. }

  19. elseif ($page>=($pagenum-3))

  20. {

  21. $s=$pagenum-6;

  22. $e=$pagenum;

  23. }

  24. else

  25. {

  26. $s=$page-3;

  27. $e=$page+3;

  28. }

  29. for ($i=$s; $i <=$e ; $i++)

  30. {

  31. ?>

  32. <li <?php if($i==$page) echo 'class="active"';?>>

  33. <a href="javascript:pageChange(<?=$i?>);"><?=$i?></a>

  34. </li>

  35. <?php

  36. }

  37. ?>

  38. <li <?php if($page==$pagenum) echo 'class="disabled"'?>><a href="javascript:pageChange(<?=$pagenum?>);">末页</a></li>

  39. </ul>

  40. </div>

  41. </div>

  42. <div class="col-xs-5 remove-padding-l" style="padding-top:20px">

  43. <span>共<?=$pagenum?>页</span>

  44. <input type="text" class="form-control form-focus-blue" id="jump" style="width:70px;display: inline-block;" placeholder="页数" >

  45. <button class="btn btn-blue btn-sm" onclick="javascript:pageJump();" style="margin-bottom:3px;display: inline-block;">跳转</button>

  46. </div>

  47. </div>

  48. </div>

  49. </div>

html控制每页显示数据条数,默认选中5条,下拉菜单可以选择其他选项,id="pageItem"获取每页的数据量,选中后触发pageItem()函数请求数据

 
  1. <div class="block-content">

  2. 共 <span id="itemNum"></span> 条,每页显示条数:

  3. <select class="form-focus-blue" style="width:48px; display: inline-block;" onchange="javascript:pageItem();" id="pageItem">

  4. <option value="5">5</option>

  5. <option value="10">10</option>

  6. <option value="25">25</option>

  7. <option value="50">50</option>

  8. <option value="100">100</option>

  9. </select>

  10. </div>

html表单,便于提交到服务器请求数据pagesize是每页的数据量大小,这里默认为5,page是请求的页码,默认为1

 
  1. <form id="variable">

  2. <input type="hidden" name="pagesize" value="5">

  3. <input type="hidden" name="page" value="1">

  4. </form>

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

 
  1. <script>

  2. // 控制页面显示的数据量

  3. function pageItem ()

  4. {

  5. var pagesize = $("#pageItem").val();

  6. $("input[name='pagesize']").val(pagesize);

  7. $("input[name='page']").val("1");

  8. Elasticsearch();

  9. return false;

  10. }

  11. // 跳转至指定页面

  12. function pageJump ()

  13. {

  14. var jump = $("#jump").val();

  15. var itemNum = 10000;// 数据总量,此处假定为10000

  16. var pagesize = $("#pageItem").val();

  17. var pagenum = Math.ceil(itemNum/pagesize);

  18. if (1 <= jump && jump <= pagenum)

  19. pageChange(jump);

  20. else if(jump < 1)

  21. alert("请输入跳转页数╰( ̄▽ ̄)╭ ");

  22. else

  23. alert("跳转内容超出范围啦(ಥ_ಥ) ")

  24. }

  25. // 跳转函数在这里

  26. function pageChange (p)

  27. {

  28. // 将要跳转的页码存到HTML表单中

  29. $("input[name='page']").val(p);

  30. // es查询

  31. Elasticsearch();

  32. scrollTo(0,0);

  33. return false;

  34. }

  35. // 重点来了,es查询

  36. function Elasticsearch() {

  37. $.ajax({

  38. type:"POST",

  39. url:"xxx/Elasticsearch",

  40. data:$("#variable").serialize(),

  41. success:function(data){

  42. console.log(data);

  43. }

  44. });

  45. }

  46. </script>

服务器端把传经来的两个参数,pagesizepage丢给es去查询

 
  1. ... ...

  2.  
  3. public function Elasticsearch(){

  4. $pagesize = $_POST["pagesize"];

  5. $page = $_POST["page"];

  6. $input = array(

  7. "page" => $page,

  8. "pagesize" => $pagesize

  9. );

  10. $es_connection_info = $this->my_elasticsearch->es_get_connection_info("host", "port", "index", "type");

  11. $es_search = $this->my_elasticsearch->es_search($es_connection_info, $input);

  12. $result = json_decode($es_search, True);

  13. ... ...

  14. }

  15. ... ...

es查询函数

 
  1. ... ...

  2.  
  3. public function es_search ($es_connection_info, $input) {

  4. $host = $es_connection_info['host'];

  5. $port = $es_connection_info['port'];

  6. $index = $es_connection_info['index'];

  7. $type = $es_connection_info['type'];

  8.  
  9. if(is_array($input)){

  10. if(array_key_exists("page",$input)){

  11. $page = $input["page"]; //page for offset(es_from);

  12. }else{

  13. $page = "";

  14. }

  15. if(array_key_exists("pagesize",$input)){

  16. $pagesize = $input["pagesize"]; //es_size;

  17. }else{

  18. $pagesize = "";

  19. }

  20. }

  21.  
  22. $arr = "123123";

  23. $data = array(

  24. "query" =>

  25. array("bool" =>

  26. array("must"=>

  27. array("match_all" => $arr)

  28. )

  29. )

  30. );

  31.  
  32. // pagesize/from

  33. $data["size"] = $pagesize;

  34. $data["from"] = ($page-1)*$pagesize;

  35.  
  36. $url = 'http://' . $host . ':' . $port . '/' . $index . '/'.$type.'/_search';

  37. $json_data = json_encode($data);

  38. $json_data = str_replace('"123123"',"{}",$json_data);

  39. $data = $this->curl($url, $json_data, $port);

  40. return $data;

  41. }

  42. ... ...

  •  

请求回来的数据返回到前端再进行必要的展示就OK了

本文转载自:https://blog.csdn.net/u012835679/article/details/80045205

d
粉丝 5
博文 463
码字总数 14181
作品 0
西安
私信 提问
在SpringBoot中使用Elasticsearch

一、SpringBoot模版方式接入(不建议) 其实一开始是准备用SpringBoot的模版来直接接入使用的,也就是以下这样的接入方式,也是网上大家都这么说的使用方式。 但是后面看java api的官方文档 De...

C6C
06/04
0
0
Spring Data Elasticsearch使用

5.Spring Data Elasticsearch Elasticsearch提供的Java客户端有一些不太方便的地方: 很多地方需要拼接Json字符串,在java中拼接字符串有多恐怖你应该懂的 需要自己把对象序列化为json存储 ...

强某某
05/05
0
0
elasticsearch入门到放弃之elasticsearch-in-java

代码地址:https://github.com/zhaoyunxing92/spring-boot-learn-box/tree/master/spring-boot-elasticsearch 在java中使用自带的api操作。你可以先看下elasticsearch入门到放弃之docker搭建......

zhaoyunxing
07/05
0
0
Elasticsearch通过JAVA创建索引、Mapping以及数据的增删该查操作

因为目前项目中用的JDK是1.7版本的,而ElasticSearch5.x版本需要使用JDK1.8版本,所以以下的代码都是基于ElasticSearch 2.4.6版本的,以下的代码是从项目中提取出来的,所以有些跟业务相关的...

zchuanzhao
2018/07/10
4.7K
0
蛋疼的ElasticSearch(四)之基本用法、高级查询

ElasticSearch系列文章: 1.蛋疼的ElasticSearch(一)之安装ElasticSearch 2.蛋疼的ElasticSearch(二)之配置ElasticSearch Head插件 3.蛋疼的ElasticSearch(三)之配置elasticsearch-analysis-......

cmazxiaoma
2018/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot全家桶,集成shiro,rabbitmq,redis, mybatis,druid,swagger

搭建了一个SpringBoot的模板,下载即可作为单体应用的服务后台模板 项目地址:https://gitee.com/devilscode/springboot_template 项目集成框架 springboot 作为基础框架 shiro 权限管理 ra...

devils_os
9分钟前
2
0
云服务器的优势有哪些?

与传统的服务器相比,云服务器有多种显著的优势,因此近年来云服务器租用一直都很受消费者的欢迎。 那么云服务器都有哪些优势呢? 云服务器的稳定性很好 虚拟主机是很多用户建站的首选方案,这...

云漫网络Ruan
9分钟前
2
0
好程序员web前端学习路线分享CSS浮动-清除浮动篇

好程序员web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动   这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响。那么到底会有什么影响呢? 1.高度塌陷   ...

好程序员官方
20分钟前
1
0
我有酒,你有故事吗?

记录学习的每一秒,巨杉技术社区有奖征文全新启动! 如果, 你热爱数据技术,乐于尝(zhe)试(teng), 又喜欢写点什么~ 那么, 无论你是架构大佬,还是DBA大神, 只要你愿意通过文字分享你...

巨杉数据库
24分钟前
1
0
【Git】ignore文件不生效

简介 使用git的过程中, 某些文件可能不希望上传到服务器,例如日志、本地化配置等信息。这时候,我们可以通过配置.gitignore文件忽略这些文件的提交。 配置.gitignore 常见的配置如下: HELP...

Areya
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部