PHP分页+Elasticsearch查询

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;
}
... ...

• 
  

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