How to modify the comments to be displayed in a post?

I would like to know how to modify the way wordpress displays the comments in a page. The requirement at hand is to display a certain number of comments in the comments list and while the the user scrolls to the bottom of the comments list (not on the page), a new set of comments will be appended to the comments list (if there are more comments to be displayed).

I have the following code to call the comments to be displayed:

<?php
require_once("../../../wp-config.php");

$page = $_GET['cpage'];
if(isset($page))
{
    echo loadComments($page);                          
}

function loadComments($page=1)
{
    global $wpdb;   

    $number=5;    
    $result='';

    // get comments from WordPress database 
    $numRows = $wpdb->get_var("SELECT COUNT(*)
                            FROM $wpdb->comments 
                            WHERE comment_approved = '1' 
                                AND NOT (comment_type = 'pingback' OR comment_type = 'trackback')");            

    if ($numRows > $number)
    {
            $nav=1;
            $pages=ceil($numRows/$number);
    }
    else {
        $nav=0;
        $pages=0;
    }

    $getnumber=$number*$page;

    // get comments from WordPress database 
    $comments = $wpdb->get_results("SELECT * FROM $wpdb->comments 
                                    WHERE comment_approved = '1' 
                                        AND NOT (comment_type = 'pingback' OR comment_type = 'trackback')
                                    ORDER BY comment_date_gmt ASC 
                                    LIMIT $getnumber");     

    $comments=array_slice($comments, $getnumber-$number, $number);          
    if ( $comments )
    {
        $count=1;

        // display comments one by one
        foreach ($comments as $comment)
        {  
            if ($page <= $pages)
            {
                $result.= '<li id="comment-'.$comment->comment_ID.'" class="leftcolumn"><div class="commenttext"><div style="padding:20px 0 0 10px;"><img src="/wp-content/themes/twentyten/images/headers/ImgQuotationMarkOpen.gif" alt="" title="" class="openarrow" />'.
                        '</div><div style="padding:0 10px 0 40px;"><p>'.$comment->comment_content.'</p></div>'.
                        '<div style="padding:0 10px 0 0; text-align:right;"><img src="/wp-content/themes/twentyten/images/headers/ImgQuotationMarkClose.gif" alt="" title="" style="border:0;" class="closearrow"/></div>'.
                        '</div></li>'.'<li class="middlecolumn"><img src="/wp-content/themes/twentyten/images/headers/ImgBubbleTopRight.gif" class="pointerarrow" /></li>'.
                        '<li class="rightcolumn" id='.$comment->comment_ID.'">'.'<div style="padding:25px 0 0 10px; line-height:10px;" class="commenttextright">'.
                        '<span class="author" style="text-decoration:none;">'.$comment->comment_author.'</span><div style="height:5px;"></div>'.
                        '<span style="font-family:Arial; font-size:12px;">'.mysql2date('j-n-Y',$comment->comment_date).'</span>'.
                        '</div></li><div style="clear:both;"></div><div style="height:10px;"></div>'.
                        '<div style="height:1px; border-bottom:1px dashed  #3e3e3e;"></div><div style="height:10px;"></div>';           

                $count++;           
           }
           else
           {
            $result = '';
           }
        }
    }   
    return $result;
}

?>

and this is the ajax call to append a new set of comments:

function updatestatus(){
    //Show number of loaded items
    var totalItems=$('.commentlist li div.commenttext').length;
    $('#status').text('Loaded '+totalItems+' Items');
}

function scrollalert(){
    var scrolltop=$('.commentlist').attr('scrollTop');
    var scrollheight=$('.commentlist').attr('scrollHeight'); //825
    var windowheight=$('.commentlist').attr('clientHeight'); //600
    var scrolloffset=20;
    //alert(scrolltop);
    if(scrolltop >= (scrollheight - (windowheight + scrolloffset)))
    {
        //fetch new items
        if (count > 0 )
        {
            count++;
            $('#status').text('Loading more items...');
            $.get('/wp-content/themes/twentyten/commentloader.php?cpage='+count, '', function(newitems){           
                if (newitems != '')
                {
                    $('.commentlist').append(newitems);
                    updatestatus();                    
                }   
                else
                {   
                    // prevent from appending content
                    count = -1;
                }
            });
       }
       else
       {
            $('#status').text('No more items to load...');
       }
    }

  setTimeout('scrollalert();', 1500);
}

I tried adding the two files inside the themes folder and adding a reference to header.php for js file. This works but I have to set paging on for the comments and hide the navigation. If you could provide a better way to achieve (may be create a plugin?) I will greatly appreciate it. I am new to WordPress and will be delighted if you’ll lead me to the right direction.

Thanks,
RNorbe

Solutions Collecting From Web of "How to modify the comments to be displayed in a post?"