MayMayJn
MayMayJn

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  if($page==1) echo 'class="disabled"'?>><a href="javascript:pageChange(1);">首页a>li>
                        
                          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  if($i==$page) echo 'class="active"';?>>
                            <a href="javascript:pageChange();">=$i?>a>
                        li>
                        
                            }
                        ?>                          
                        <li  if($page==$pagenum) echo 'class="disabled"'?>><a href="javascript:pageChange();">末页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">5option>
        <option value="10">10option>
        <option value="25">25option>
        <option value="50">50option>
        <option value="100">100option>
    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查询

你可能感兴趣的:(web前端)