在PHP中的分页。 AJAX，PHP，MYSQL

Question

I am creating a forum kind of a website, where I display posts dynamically using ajax. When the user logs in he finds a 'orderby' drop down select option, where he can choose the order of the posts.

---

select menu

<select name="orderby" id="orderby" onchange="showposts(this.value)" >
<option value="1" selected>By Time</option>
<option value="2">By Genuine Count</option>
<option value="3">By Dubious Count</option>
</select>

when the page is loaded window.onload function is called, which calls the 'showposts()' function to display the posts.

---

onload()

window.onload=function(){
showposts();
};

---

showposts() function

function showposts(str){

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else { 


        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }
    if(str != undefined){
        currentType=str; //save the current type for later use
        document.getElementById("postsdiv").innerHTML = "";

    }else{
        var e = document.getElementById("orderby");
         str = e.options[e.selectedIndex].value;
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
           // alert(xmlhttp.responseText);
            document.getElementById("postsdiv").innerHTML=xmlhttp.responseText;
        }

    };
    xmlhttp.open("GET","showposts.php?q="+str,true);

    xmlhttp.send();
}

---

a part of showposts.php page which gets posts from database if the selected option is 1

if(intval($_GET['q'])==1){


while($row = $result->fetch_assoc()) {
    echo "<div class='postclass'>";
    echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >";
    echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >";

    echo "</br>";

    echo "Posted By: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <span class='bold'> ".$row['user']."</span>";
    if($username==$row['user']){

        echo "<a href='javascript:void(0);' onclick='deletepost(".$row['id'].")' >DELETE </a>&nbsp&nbsp&nbsp";

        echo "<a href='javascript:void(0)'onclick='editpost(".$row['id'].",\"".$row['subject']."\",\"".$row['post']."\")' >EDIT </a></br>";
    }else{
        echo "</br>";
}

    echo "<a id=".$row['id']."></a>";
    echo "Date & Time: ".$row['date']."</br>";
    echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine']."</span></br>";
    echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>";
    echo "</br>------------------------ </br>";
    echo "Subject:  <span class='bold' >".$row['subject']."</span></br>";

    echo "Post: ";
    echo "<div class='postbox' >&nbsp&bull;&nbsp".$row['post'] . "</div><br /></br>";
}
}

---

So, my question is how to add pagination for this script? Can anyone help?

---

query

$sql = "SELECT * FROM posts order by date desc";
$result = $connection->query($sql);

Answer 1

showposts() function

    function showposts(str, page, pagesize){

        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        } else { 


            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }
        if(str != undefined){
            currentType=str; //save the current type for later use
            document.getElementById("postsdiv").innerHTML = "";

        }else{
            var e = document.getElementById("orderby");
             str = e.options[e.selectedIndex].value;
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               // alert(xmlhttp.responseText);
                document.getElementById("postsdiv").innerHTML=xmlhttp.responseText;
            }

        };
        xmlhttp.open("GET","showposts.php?q="+str+'&page='+page+'&pagesize='+pagesize,true);

        xmlhttp.send();
    }

query

$page = intval($_GET['page');
$pagesize = intval($_GET['pagesize']);
$sql = "SELECT * FROM posts order by date desc limit " 
. ($page-1)*$pagesize . ", " . $pagesize;

Example link

<a href="#" onclick="showposts(document.getElementById('orderby').value,1,20);">Page 1, 20 per page</a>