PHP分页+Elasticsearch查询 转

分页,本质上就是根据给定的页码和偏移量从服务器端请求数据。原理很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. public function Elasticsearch(){
  3. $pagesize = $_POST["pagesize"];
  4. $page = $_POST["page"];
  5. $input = array(
  6. "page" => $page,
  7. "pagesize" => $pagesize
  8. );
  9. $es_connection_info = $this->my_elasticsearch->es_get_connection_info("host", "port", "index", "type");
  10. $es_search = $this->my_elasticsearch->es_search($es_connection_info, $input);
  11. $result = json_decode($es_search, True);
  12. ... ...
  13. }
  14. ... ...

es查询函数

  1. ... ...
  2. public function es_search ($es_connection_info, $input) {
  3. $host = $es_connection_info['host'];
  4. $port = $es_connection_info['port'];
  5. $index = $es_connection_info['index'];
  6. $type = $es_connection_info['type'];
  7. if(is_array($input)){
  8. if(array_key_exists("page",$input)){
  9. $page = $input["page"]; //page for offset(es_from);
  10. }else{
  11. $page = "";
  12. }
  13. if(array_key_exists("pagesize",$input)){
  14. $pagesize = $input["pagesize"]; //es_size;
  15. }else{
  16. $pagesize = "";
  17. }
  18. }
  19. $arr = "123123";
  20. $data = array(
  21. "query" =>
  22. array("bool" =>
  23. array("must"=>
  24. array("match_all" => $arr)
  25. )
  26. )
  27. );
  28. // pagesize/from
  29. $data["size"] = $pagesize;
  30. $data["from"] = ($page-1)*$pagesize;
  31. $url = 'http://' . $host . ':' . $port . '/' . $index . '/'.$type.'/_search';
  32. $json_data = json_encode($data);
  33. $json_data = str_replace('"123123"',"{}",$json_data);
  34. $data = $this->curl($url, $json_data, $port);
  35. return $data;
  36. }
  37. ... ...

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励