Ajax based load more results with jQuery, MySQL and PHP

    Rating: ★★★★☆
    View: 272
    Download: 227
    Từ khóa:

    Markup Database

    CREATE TABLE IF NOT EXISTS `news_feed` (
      `news_id` int(10) NOT NULL AUTO_INCREMENT,
      `news_title` text NOT NULL,
      `news_description` text NOT NULL,
      PRIMARY KEY (`news_id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

    Markup Javascript
    Include the latest jquery from Google Hosted Libraries rather than using locally stored jquery library to improve the page loading speed.

    
    

    This javascript snippet will send the page number stored in data attribute of loadmore button to loadmore.php this will create response based on the request and produces a response, this server response is appended with “news_list”.
    index.php
    This php file is for displaying latest news feed from database in descending order.

      $title

      $content

      "; } ?>

    loadmore.php
    This contains the php code for displaying results against queried page number

    
    0){
               $page_limit=$resultsPerPage*($paged-1);
               $pagination_sql=" LIMIT  $page_limit, $resultsPerPage";
               }
        else{
        $pagination_sql=" LIMIT 0 , $resultsPerPage";
        }
        $result=mysql_query($sql.$pagination_sql);
        $num_rows = mysql_num_rows($result);
        if($num_rows>0){
        while($data=mysql_fetch_array($result)){
        $title=$data['news_title'];
        $content=$data['news_description'];
        echo "
  • $title

    $content

  • "; } } if($num_rows == $resultsPerPage){?>
  • No More Feeds"; } endif; ?>

    Markup CSS

    #container{width: 80%;margin: auto auto;}
    .news_list {
    list-style: none;
    }
    .loadmore {
    color: #FFF;
    border-radius: 5px;
    width: 50%;
    height: 50px;
    font-size: 20px;
    background: #42B8DD;
    outline: 0;
    }
     .loadbutton{
        text-align: center;
    }

     

    loading Đang tải...

    template được ưa chuộng