在客户端问题上分页记录答案

【问题标题】：Paginate records on Client side issue在客户端问题上分页记录
【发布时间】：2012-06-11 07:18:05
【问题描述】：

我正在使用 php、mysql 进行搜索、过滤操作。

我的分页类是

class Paginator{
var $items_per_page;
var $items_total;
var $current_page;
var $num_pages;
var $mid_range;
var $low;
var $limit;
var $return;
var $default_ipp;
//var $querystring;
var $ipp_array;

function Paginator()
{
    $this->current_page = 1;
    $this->mid_range = 2;
    $this->ipp_array = array(2,4,6,8,10,'All');
    $this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
}

function paginate()
{
    if(!isset($this->default_ipp)) $this->default_ipp='2';
    if($_GET['ipp'] == 'All')
    {
        $this->num_pages = 1;
   //$this->items_per_page = $this->default_ipp;
    }
    else
    {
        if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
        $this->num_pages = ceil($this->items_total/$this->items_per_page);
    }
    $this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0
    $prev_page = $this->current_page-1;
    $next_page = $this->current_page+1;
    if($_GET)
    {
        $args = explode("&",$_SERVER['QUERY_STRING']);
        foreach($args as $arg)
        {
            $keyval = explode("=",$arg);
            if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg;
        }
    }

    if($_POST)
    {
        foreach($_POST as $key=>$val)
        {
            if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val";
        }
    }
    if($this->num_pages > 4)
    {
        $this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page$this->querystring\">&laquo; Previous</a> ":"<span class=\"inactive\" href=\"#\">&laquo; Previous</span> ";

        $this->start_range = $this->current_page - floor($this->mid_range/2);
        $this->end_range = $this->current_page + floor($this->mid_range/2);

        if($this->start_range <= 0)
        {
            $this->end_range += abs($this->start_range)+1;
            $this->start_range = 1;
        }
        if($this->end_range > $this->num_pages)
        {
            $this->start_range -= $this->end_range-$this->num_pages;
            $this->end_range = $this->num_pages;
        }
        $this->range = range($this->start_range,$this->end_range);

        for($i=1;$i<=$this->num_pages;$i++)
        {
            if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
            // loop through all pages. if first, last, or in range, display
            if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
            {
                $this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
            }
            if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
        }
        $this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page$this->querystring\">Next &raquo;</a>\n":"<span class=\"inactive\" href=\"#\">&raquo; Next</span>\n";
        $this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
    }
    else
    {
        for($i=1;$i<=$this->num_pages;$i++)
        {
            $this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
        }
        $this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
    }
    $this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page;
    if($this->current_page <= 0) $this->items_per_page = 0;
    $this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
}
function display_items_per_page()
{
    $items = '';
    if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp;
    foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
    return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n";
}
function display_jump_menu()
{
    for($i=1;$i<=$this->num_pages;$i++)
    {
        $option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
    }
    return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n";
}
function display_pages()
{
    return $this->return;
}
  }
 ?>

我使用这样的复选框执行了过滤：

    <input type="checkbox" id="checkbox1" class="checkbox1" value="<?php echo $suburb['suburb_name']?>" name="Suburb_check[]" onClick="changeResults();" onChange="" ><?php echo $suburb['suburb_name']?>  <span class="grey">(<?php echo $suburb['total']?>)</span>

过滤器的Javascript/ajax代码

function changeResults(){
    var data = { 'venue[]' : []};
        $("input:checked").each(function() {
            var chck1 = $(this).val();
            //alert(chck1);
            data['venue[]'].push($(this).val());

    });
$.ajax({
     type : 'POST',
     url : 'process.php',
     data : data,
     success : function(data){
          $('#project_section').html(data); // replace the contents coming from php file
            }  
        });
    }

process.php 文件

include_once("includes/classes/db_connect.php");
include_once("pagination/paginator.class.php");

$pages = new Paginator();

$value= array();

foreach($_POST as $key=>$value)
{
    $value[] = $venue[$key][$value];    
}
$countArray = count($value);

//echo $countArray;
/*echo "<pre>";
    print_r($value);
echo "</pre>";
exit;*/

if($countArray=='2')
{
        $where = "cities.city_name like '%".$_SESSION['$cityName']."%' and suburbs.suburb_name ='".$value[0]."' ";
}
else if($countArray=='3')
{
       $where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."')";
}
else if($countArray=='4')
{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."' or suburbs.suburb_name ='".$value[2]."')";
}
else if($countArray=='5')
{
        $where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."' or suburbs.suburb_name ='".$value[2]."' or suburbs.suburb_name ='".$value[3]."')";
}
else{
    $where = "cities.city_name like '%".$_SESSION['$cityName']."%' " ;
}

$countSql="SELECT count(*) as total from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id where ".$where." ";

//echo $countSql;
$resultCount = mysql_query($countSql);
$data = mysql_fetch_row($resultCount);
$pages->items_total = $data[0];
$pages->mid_range = 2;
$pages->paginate();
echo $pages->display_pages();       
echo $pages->display_items_per_page();

$sql="SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id where ".$where." $pages->limit";

//echo $sql;
$result = mysql_query($sql);
//$data = mysql_fetch_assoc($result);
/*echo "<pre>" ;
print_r($data);
echo "</pre>" ; */
while($row=mysql_fetch_assoc($result))
{
      ?>
      <div class="projectlisttiger" id="propertyList">      

                <div class="spacer5">&nbsp;</div>
                <div class="listnewimg flt">
                    <a href="p-kolte-patil-cilantro-wagholi-pune.php">
                        <img src="admin/uploads/<?php echo ($row['property_cover_image']) ?>" width="186" height="125" border="0">
                        <!--<img src="admin/uploads/Cilantra1/1cilantra-large.jpg" width="186" height="125" border="0">-->
                    </a>
                     <!--<div class="newlistlaunch"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img width="65" height="65" border="0" src="images/projects/kolte-patil/cilantra/new_launch_blue.png"></a>
                     </div>-->                              
                </div>

                <div class="listright">
                    <div style="width:498px; height:42px;" class="flt">
                        <div class="list-logo flt">
                            <div class="buildborder"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img width="80" height="36" border="0" align="absmiddle" alt="Kolte Patil" src="admin/uploads/<?php echo $row['builder_logo']?>"></a>
                            </div>
                               <div class="tablistname"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><?php echo $row['property_name'] ?></a></div>
                        </div>   
                        <?php if ($row['property_price_min']!=0) { ?>      
                        <div class="listprice">
                            <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif"> <?php echo $row['property_price_min'] ?> Lacs - <?php echo $row['property_price_max'] ?> Lacs       
                        </div>
                        <?php } else { ?>
                        <div class="listprice">
                             <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif">Price on Request
                        </div>
                        <?php } ?>

                    </div>

                        <div class="spacer3">&nbsp;</div>        

                    <div class="listbox">
                        <a href="p-kolte-patil-cilantro-wagholi-pune.php"><strong>Address</strong>:<?php echo $row['locality_name'] ?>, <?php echo $row['city_name'] ?><br> <strong>Types</strong>: 2BHK &amp; 3BHK
                        <br><strong>Sizes:</strong> <?php echo $row['property_size_min'] ?> sqft - <?php echo $row['property_size_max'] ?> sqft </a>
                    </div>

                    <div style="margin-left:-3px;" class="flt">
                        <div style="width:110px;" class="flt"><a style="text-decoration:none;" href="p-kolte-patil-cilantro-wagholi-pune.php"><input type="button" value="View Details" class="detail_project"></a>
                        </div>     
                      <div style="width:110px;" class="flt"><input type="button" onClick="showEnqForm('2659','Cilantro'); return false;" value="Enquire Now" class="enquire_project"></div>
                    </div>
                           <div class="spacer">&nbsp;</div>                                 
                </div>
                <div class="spacer15">&nbsp;</div>              
       </div>

我返回分页结果，但是当我点击页码时，它会将我带到 process.php，因为分页类使用 $_SERVER[PHP_SELF] 如何在不更改页面 url 的情况下对结果进行分页，即使用 ajax 进行相同的实现。我无法进行太多更改，如果对此进行修改使其起作用，那将很有用。（这就是我试图添加尽可能多的代码的原因。）对不起，如果它太多了。
谢谢

编辑 @Gavin 这是我的 process.php

  <?php session_start();
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    include('processRegion.php');
    die();
}
include_once("includes/classes/db_connect.php");
include_once("pagination/paginator.class.php");
$pages = new Paginator();
            if(isset($_GET['dataString']))
               {
                    $regionValue =  $_GET['dataString'];
                    //echo "region=".$regionValue;
               }
else{
        $regionValue = $_POST['dataString'];
}
$reqValue = "'".$regionValue."'";

echo $reqValue;

$arr = explode(",",$reqValue);
//print_r($arr);
$getBack = implode("','",$arr);

$beds = "'".$_POST['beds'];
//echo ($beds);
$arrBeds= explode(",",$beds);
//print_r($arrBeds);
$getBedValue = implode("','",$arrBeds);
$finalBedValue = substr($getBedValue,0,-2);

if(isset($_POST['beds']) && $_POST['beds']!=" ")
{
    $cityNameAndRegionName = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name in (".$getBack.")) and (properties_type.bed_type in (".$finalBedValue."))"; 
}
else
{
    $cityNameAndRegionName = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name in (".$getBack."))";
}   

$countSql="SELECT count(*) as total from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id left outer join properties_type on properties.property_id=properties_type.property_id where ".$cityNameAndRegionName." ";
    ?>
    <?php include_once("processRegion.php"); ?>

processRegion.php 与 HTML

<div class="flt width710" id="">
            <div style="float:right" id="toppagesel">
            <?php

            //Query processed here
        ?>
            </div>
                    </div>
        <div class="spacer15">&nbsp;</div>
                <div><strong>Results for properties for sale</strong> in <?php echo ucfirst($_SESSION['$cityName']) ?>.</div>
        <div class="spacer15">&nbsp;</div>

         <div class="width710" id="displayProp">
        <?php while($row=mysql_fetch_assoc($result))
    { ?>  
            <div class="projectlisttiger" id="propertyList">        

                <div class="spacer5">&nbsp;</div>
                  <div class="listnewimg flt">
                    <a href="p-kolte-patil-cilantro-wagholi-pune.php">
                        <img src="admin/uploads/<?php echo ($row['property_cover_image']) ?>" width="186" height="125" border="0">

                </div>

                <div class="listright">
                    <div style="width:498px; height:42px;" class="flt">
                        <div class="list-logo flt">
                            <div class="buildborder"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img width="80" height="36" border="0" align="absmiddle" alt="Kolte Patil" src="admin/uploads/<?php echo $row['builder_logo']?>"></a>
                            </div>
                               <div class="tablistname"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><?php echo $row['property_name'] ?></a></div>
                        </div>   
                        <?php if ($row['property_price_min']!=0) { ?>      
                        <div class="listprice">
                            <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif"> <?php echo $row['property_price_min'] ?> Lacs - <?php echo $row['property_price_max'] ?> Lacs       
                        </div>
                        <?php } else { ?>
                        <div class="listprice">
                             <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif">Price on Request
                        </div>
                        <?php } ?>

                    </div>
                    <div class="spacer3">&nbsp;</div>        

                    <div class="listbox">
                        <a href="p-kolte-patil-cilantro-wagholi-pune.php"><strong>Address</strong>:<?php echo $row['locality_name'] ?>, <?php echo $row['city_name'] ?><br> <strong>Types</strong>: 2BHK &amp; 3BHK
                        <br><strong>Sizes:</strong> <?php echo $row['property_size_min'] ?> sqft - <?php echo $row['property_size_max'] ?> sqft </a>
                    </div>

                    <div style="margin-left:-3px;" class="flt">
                        <div style="width:110px;" class="flt"><a style="text-decoration:none;" href="p-kolte-patil-cilantro-wagholi-pune.php"><input type="button" value="View Details" class="detail_project"></a>
                        </div>     
                      <div style="width:110px;" class="flt"><input type="button" onClick="showEnqForm('2659','Cilantro'); return false;" value="Enquire Now" class="enquire_project"></div>
                    </div>
                           <div class="spacer">&nbsp;</div>                                 
                </div>
                <div class="spacer15">&nbsp;</div>              
       </div>
       <?php
            }
       ?>
  <div class="spacer15">&nbsp;</div>
</div>     

<div style="float:right" id="toppagesel">
            <?php 
                echo $pages->display_pages();
                echo $pages->display_items_per_page();
            ?>
</div>

【问题讨论】：

只是为了澄清一下，您的分页目前是否仅使用 PHP 工作？如果是这样，您可以使用 jQuery 来处理通过 Ajax 提交的表单。我能看到的唯一问题是用新内容替换旧内容。如果可以的话，值得将分页的代码/内容粘贴在包含的单独文件中，然后您的 ajax 可以反映包含的文件，只返回带有新结果的表格而不是整个页面？
@Gavin 是的，它目前有效，只是当我用之前没有的过滤器内容替换过滤器内容时，这就是我想要解决的问题。我也尝试发送分页内容但是，它需要我到 process.php 页面，该页面实际上只用于处理，没有用于显示。你能澄清一下吗？对不起，但不擅长 ajax/jquery。谢谢
您的 jQuery ajax 指向 process.php。查看您的 PHP 代码，您正在生成处理所有内容的 URL。因此，您可以简单地将 jQuery 调用挂钩到这些。有关更多信息，请参阅我的答案。

标签： php jquery mysql ajax pagination

【解决方案1】：

如我的 cmets 所述。

您可以执行以下操作：

$(document).ready(function()
{
    $('.paginate').live('click', function(e)
    {
        e.preventDefault();
        var btnPage = $(this);
        $.ajax(
        {
            url : btnPage.attr('href'),
            success : function(resp)
            {
                // replace current results with new results.
                $('#project_section').html(resp);
            },
            error : function()
            {
                window.location.href = btnPage.attr('href');
            }
        });
    });
});

以上将复制您单击每个分页链接。

接下来我建议将生成“结果”列表的 PHP 代码和 HTML 分离到一个单独的文件中。

这样，在显示结果的页面上，您可以简单地使用include('path-to-results-file.php');，这将适用于非 ajax 请求，然后您可以这样做：

Process.php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    include('path-to-results-file.php');
    die();
}

上面会检测是否已经发出了 ajax 请求，如果是，则不会显示包括结果在内的整个页面，而是仅显示结果和分页。

更新以包含更好的解释

下面是我的意思的一个非常简单的例子。

当前进程.php

    <?
    // currently contains all of the code required
    // to query the database etc.
?>
<html>
<head>...</head>
<body>
    <!-- header content -->
    <table>
    <?
        // currently contains all of the code required to display
        // the results table and pagination links.
    ?>
    </table>
    <!-- footer content -->
</body>
</html>

新进程.php

<?
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
    {
        include('path-to-results-file.php');
        die();
    }
?>
<html>
<head>...</head>
<body>
    <!-- header content -->
    <? include('path-to-results-file.php'); ?>
    <!-- footer content -->
</body>
</html>

新路径到results-file.php

<?
    // currently contains all of the code required
    // to query the database etc.
?>
<table>
<?
    // currently contains all of the code required to display
    // the results table and pagination links.
?>
</table>

现在... 当您通常通过浏览器访问process.php 时，或者当javascript 被禁用时。它现在的工作方式与没有 Javascript 的方式相同。

当您转到process.php，然后单击其中一个分页链接（启用 javascript）时，process.php 将检测到您正在使用 Ajax，并且只发回结果表。

【讨论】：

谢谢加文！！我得到了 jquery 部分，它将在点击页面没有链接时执行！对吗？？但是我没有得到分离的第二部分！如何分别保存 html 和 php 代码？对不起，我不知道任何框架，也没有使用任何框架。如果你能稍微了解一下，那就太好了！
正确。这将复制您已有的内容，但改为使用 Ajax。您现在会发现的问题是，#project_section 将包含整个页面，而不仅仅是您想要的更改。一种解决方案是提取创建结果表和分页所需的所有代码/内容并将其放在单独的文件中。我会更新答案来解释。
非常感谢，如果我需要你的帮助，我会试一试并回来（希望不要经过这么好的解释）！ ;)
嗨，Gavin，我试过了，但卡住了。我无法修复 url 参数，当我点击分页链接时，返回的 $_PoST 数组作为空白传递。当我执行对此url : btnPage.attr('href') 发出警报，我收到/RealEstate/process.php?page=3&ipp=2&venue=Array。我该如何解决这个问题？谢谢
如果没有看到它的实际效果，很难解释。如果可能，请发布一个指向该页面的链接，以便我们可以看到它的实际效果。