How to integrate pagination on a jquery/ajax unsorted list ?

Here's my issue. I've tried many many things and realized I c开发者_开发百科an cook an egg on my brain right now. I need your help.

I need to add pagination on the div where the content is being posted. More specifically, paginate the lists from that are being generated by the users.

This is in my index.php:

<div id="head">
<form name="postbar_add_post" id="postbar_add_post" method="post">
    <fieldset>
        <legend>What are you doing now? ...</legend>
        <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
        <input type="submit" name="addpost" value="Submit" class="submit" />
        </fieldset>
</form>
</div>

<div id="cuerpo"><ul id="wall"></ul></div> 

When the text is submitted, it uses the following JavaScript code to post the data for that div:

// This is the script to post whats typed on the input to the div called wall:
<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function() {
        jQuery("form#postbar_add_post").submit(function() {
            var addcontentbox = jQuery('#addcontentbox').attr('value');
            if (addcontentbox.replace(/\s/g,"") == "") {
                return false;
            }
            jQuery.ajax({
                type: "POST",
                url: "postear.php",
                data: "addcontentbox=" + addcontentbox,
                success: function() {
                    jQuery("ul#wall").prepend("<li>"+addcontentbox+"</li>");
                    jQuery("ul#wall li:first").fadeIn();
                    document.postbar_add_post.addcontentbox.value = '';
                    document.postbar_add_post.addcontentbox.focus();
                }
            });
            return false; 
        });
    });
</script>

I'm using $.noConflict(); because I already tried to paginate it with another jquery plug in called Jpagination. Unfortunately, no good results. Click here if you want to check on that.

The previous Ajax code calls a PHP file to insert the message into a database.

This is the php code:

<?php
if(isset($_POST['addcontentbox'])) {
    // Connection to Database
    include('config.php');
    // NO Query Injection
    $message = mysql_real_escape_string($_POST['addcontentbox']);

    // echo
    $sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
    mysql_query($sql);
    echo $message;
}
else
{ 
    echo '0';
}
?> 

So, I tried to integrate pagination with PHP but I really got lost. Then I found some scripts online for pagination but that got me even worst.

So I really need help.

Can anyone tell me how could I add pagination to the unsorted list on the index.php?

---

Well I'm still not 100% clear how you want this to function, but I have an idea. Let's say you want to display 10 messages on a page. So when the page first loads, it will have the 10 latest comments.(You can do this by changing your SQL query a bit) You'll also want your index.php to accept a page variable in the query string, so you know what page to load. like index.php?page=1. Then you can write your initial query to fetch the messages like this: (after doing this $page = $_GET['page'];

"SELECT * FROM wall ORDER BY id DESC LIMIT $page*10, 10"

besides fetching the latest messages, you'll want to know how many message there are in total, so you know how many pages you have. You can get that with a sql query also.

"SELECT COUNT(*) FROM wall"

Now let's go back to you html. after fading in the new posted message with jQuery("ul#wall li:first").fadeIn(); you can fade out the oldest message with jQuery("ul#wall li:last").fadeOut();

To make a list of the pages, just divide the total number of messages by the number of messages per page to figure out how many pages you need. Then you can use a php for loop to echo out a bunch of links with the page numbers sort of like this.

<? for($i=0; $i<$total_pages; $i++) { ?>
    <a href="index.php?page=<?=$i;?>"><?=$i;?></a>
<? } ?>

So when someone clicks on one of those links, it will re-load your page with the correct messages. Of course there is a lot more you can do with this, but I think this is the basic idea. I hope it helps.