douji8017 2014-12-14 22:26
浏览 69

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

I am trying to paginate some results on keyup. everything is working as intended but not the pagination. how it works is that when I search it has to take my search string from the main page to the searchparent.php and query the database and return the results in paginated table. I get the first page to work but when I click the next button the URL redirects to the seachparent code. Please kindly help. Please see the code below.

<!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条回答 默认 最新

  • dongqi7631 2014-12-15 14:57
    关注

    Thank you for the page link. First of all, please clear out this nasty error so it does not mess with anything:

    JS error

    Now, on to the searching matter. You're sending a POST request to searchparent.php and deriving a markup via ajax.

    This part is working fine.

    What's wrong with the pagination is that they are a (anchors). Therefore, ofcourse once they are clicked, they will take you to a designated URL.

    Now, the pagination 2 takes me to /searchparent.php?pn=2 . There is a problem with that. There is no parameter defined, I don't know what's inside the php file but unless you're storing the search query in session, I don't think this is proper. Therefore, I think it's proper if you turn the POST into a GET and then you can add parameters to the url like /searchparent.php?term=m&pn=2. This will also make it easier for you to derive that page via ajax and display it on the page, rather than always making a POST request.

    Now, about the pagination links: use a click event handler and use event.preventDefault() to stop the page from going to where the URL takes us. That way, you can make the page stay still and work with your magic.

    So, here's the basic Idea:

    1. Someone clicks on the Send by Search radio
    2. He/She types in m
    3. the browser sends an AJAX GET request to /searchparent.php?term=m and loads the list.
    4. once they click on .paginationNumbers a , we do this:

      $('.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 })

    Now, let me remind you that the list is being loaded via ajax so the click event may not be detected if you set it inside the $(document).ready. So I suggets you test around and possibly use this instead:

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

    I believe that should work. Please let us know.

    评论

报告相同问题?

悬赏问题

  • ¥15 下图接收小电路,谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探