在keyup事件上使用jquery进行PHP分页

时间：2014-12-14 22:26:37

标签： php pagination keyup

我正在尝试在keyup上分页一些结果。一切都按预期工作，但不是分页。它是如何工作的，当我搜索它时，它必须将我的搜索字符串从主页面带到searchparent.php并查询数据库并在分页表中返回结果。我得到第一页工作但当我点击下一个按钮时，URL重定向到seachparent代码。请帮忙。请参阅下面的代码。

<!DOCTYPE html>

    <script>    
    $(document).ready(function(){

         $("#serachbox").keyup(function(){

                    var Search= $("#serachbox").val();



                    if(Search.length < 1)
                      {
                          $("#show").html("");
                       }
                    else
                    {
                      $.post('searchparent.php',{Search:Search,HiddenA:HiddenA},function(data)
                        {

                            $("#show").html(data);

                            });
                    }


                });


         });



</script>   

    </head>
    <body>

            <input id ="serachbox" type="text" placeholder="Type learner surname" name="Send" style="width:400px;height:30px;display:none;"/>

    </body>
</html>




<?php


echo"
<style type=\"text/css\">
<!--
.pagNumActive {
    color: #000;
    border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:link {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:visited {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:hover {
    color: #000;
    text-decoration: none;
    border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:active {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
-->
</style>";





$X=1;
$Text="Parent:".$X."of :";

    include ("Connect.php");

    $Search=$_POST["Search"];
    $HiddenA=$_POST["HiddenA"];





$Query="Select ParentPhoneNumber,ParentName,ParentSurname,LearnerName,ParentPhoneNumber
From $HiddenA
where ParentSurname like '%$Search%' ";





    $Result=mysql_query($Query);
if($Result)
{
    $Num=mysql_num_rows($Result);

        echo "<center><table border=1 style=position:absolute;background:gold;width:600px;color:white;padding-left:500px; >
        <tr  style=background:grey;color:white;>
                    <td>Tick</td>
                    <td>Parent Name</td>
                    <td>Student Surname</td>
                    <td>Student Name</td>
                    <td>Parent Phone</td>
        </tr>
        <tr>

        ";
        if($Num==0)
        {
            echo "<td colspan=3 rowspan=1>
                    No resutls could be found for your search
            </td>
            </tr>"; 

        }
        else
        {


//THIS IS WHERE PAGINATION BEGINS 
//////////////////////////////////// Adam's Pagination Logic ////////////////////////////////////////////////////////////////////////
$nr = mysql_num_rows($Result); // Get total of Num rows from the database query
if (isset($_GET['pn'])) { // Get pn from URL vars if it is present
    $pn = preg_replace('#[^0-9]#i', '', $_GET['pn']); // filter everything but numbers for security(new)
    //$pn = ereg_replace("[^0-9]", "", $_GET['pn']); // filter everything but numbers for security(deprecated)
} else { // If the pn URL variable is not present force it to be value of page number 1
    $pn = 1;
} 
//This is where we set how many database items to show on each page 
$itemsPerPage = 5; 
// Get the value of the last page in the pagination result set
$lastPage = ceil($nr / $itemsPerPage);
// Be sure URL variable $pn(page number) is no lower than page 1 and no higher than $lastpage
if ($pn < 1) { // If it is less than 1
    $pn = 1; // force if to be 1
} else if ($pn > $lastPage) { // if it is greater than $lastpage
    $pn = $lastPage; // force it to be $lastpage's value
} 
// This creates the numbers to click in between the next and back buttons
// This section is explained well in the video that accompanies this script
$centerPages = "";
$sub1 = $pn - 1;
$sub2 = $pn - 2;
$add1 = $pn + 1;
$add2 = $pn + 2;
if ($pn == 1) {
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
} else if ($pn == $lastPage) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
} else if ($pn > 2 && $pn < ($lastPage - 1)) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub2 . '">' . $sub2 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add2 . '">' . $add2 . '</a> &nbsp;';
} else if ($pn > 1 && $pn < $lastPage) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
}
// This line sets the "LIMIT" range... the 2 values we place to choose a range of rows from database in our query
$limit = 'LIMIT ' .($pn - 1) * $itemsPerPage .',' .$itemsPerPage; 
// Now we are going to run the same query as above but this time add $limit onto the end of the SQL syntax
// $sql2 is what we will use to fuel our while loop statement below



$Query2=mysql_query("Select ParentPhoneNumber,ParentName,ParentSurname,LearnerName,ParentPhoneNumber
From $HiddenA
where ParentSurname like '$Search%' $limit");


//////////////////////////////// END Adam's Pagination Logic ////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Adam's Pagination Display Setup /////////////////////////////////////////////////////////////////////
$paginationDisplay = ""; // Initialize the pagination output variable
// This code runs only if the last page variable is ot equal to 1, if it is only 1 page we require no paginated links to display
if ($lastPage != "1"){
    // This shows the user what page they are on, and the total number of pages
    $paginationDisplay .= 'Page <strong>' . $pn . '</strong> of ' . $lastPage. '&nbsp;  &nbsp;  &nbsp; ';
    // If we are not on page 1 we can place the Back button
    if ($pn != 1) {
        $previous = $pn - 1;
        $paginationDisplay .=  '&nbsp;  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $previous . '"> Back</a> ';
    } 
    // Lay in the clickable numbers display here between the Back and Next links
    $paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>';
    // If we are not on the very last page we can place the Next button
    if ($pn != $lastPage) {
        $nextPage = $pn + 1;
        $paginationDisplay .=  '&nbsp;  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $nextPage . '"> Next</a> ';
    } 
}
///////////////////////////////////// END Adam's Pagination Display Setup ///////////////////////////////////////////////////////////////////////////


//THIS IS WHERE PAGINATION ENDS
                while($Data=mysql_fetch_array($Query2) )
                {

                echo "<td><input type=checkbox name=Check[] id=Check value='Parent $X of  $Data[3],$Data[2],$Data[4]' /></td>
                    <td><p>$Data[1]</p></td>
                    <td><p>";
                    echo ucfirst( strtolower( $Data[2] ) );
                    echo"</p></td>
                    <td><p>$Data[3]</p></td>
                    <td><p>$Data[4]</p></td>
                    <tr/>"  ;

                    $X++;

                }
        }


echo "
<tr>
<td colspan=5>$paginationDisplay</td>
</tr>

</table></center>";


            exit();
        }
        else
        {
            echo mysql_error();
            exit();
        }
?>

1 个答案:

答案 0 :(得分：0)

感谢您的页面链接。首先，请清除这个令人讨厌的错误，以免它弄乱任何东西：

JS error

现在，关于搜索问题。您正在向POST发送searchparent.php请求，并通过ajax派生标记。

这部分工作正常。

pagination的错误在于它们是a（锚点）。因此，当点击它们时，它们会将您带到指定的URL。

现在，分页2将我带到/searchparent.php?pn=2。这有一个问题。没有定义参数，我不知道php文件里面有什么，但除非你在session中存储搜索查询，否则我认为这不合适。 因此，我认为将POST转换为GET然后您可以将参数添加到网址/searchparent.php?term=m&pn=2，这是正确的。这也将使您更容易通过ajax派生该页面并将其显示在页面上，而不是总是发出POST请求。

现在，关于分页链接：使用click事件处理程序并使用event.preventDefault()阻止页面转到URL带我们的位置。这样，您就可以使页面保持静止并使用您的魔法。

所以，这是基本的想法：

  1. 有人点击“按搜索发送”电台
  2. 他/她输入m
  3. 浏览器向/searchparent.php?term=m发送AJAX GET请求并加载列表。

  4. 点击.paginationNumbers a后，我们会这样做：

    $('.paginationNumbers a').on('click',function(event){ event.preventDefault(); // stop the world from rotating for a while // now send the ajax request and replace the existing table with the data that comes in // dance a while })

    5. 现在，让我提醒您，列表是通过ajax加载的，因此如果您在$(document).ready内设置了点击事件，则可能无法检测到该事件。所以我建议你测试一下，并可能改用它：

    $(document).on('click','.paginationNumbers a',function(){})

    我认为应该有效。请告诉我们。

相关问题
最新问题