How To Load More Data Jquery Ajax

How To Load More Data Jquery Ajax

How To Load More Data Jquery Ajax

0 Sales

Free

YouTube, Twitter, and Facebook use the technique of Load More Data to list user-friendly dynamic data. Instead of displaying the pagination links, they allow users to dynamically load the data on a button click. It is very interactive to display more technique because the data is loaded without refreshing the page. In this guide, we'll show you how to use jQuery, Ajax, and PHP to build a similar technique to load more click information from the server.

 

The sample code uses jQuery and Ajax to create a simple Load More Data feature. We will retrieve posts data from the MySQL database and list them on the web page for the purpose of the demonstration. Instead of adding the pagination reference to the list, we will use jQuery, Ajax, PHP, and MySQL to incorporate Show More technique to dynamically load posts information.

 

Our Ajax-based loading with jQuery tutorial will simplify the entire process. Let's start loading more information from the tutorial for the server.

Create Database Table

A table must be created in the database to store the post information.

 

CREATE TABLE `posts` (

 `id` int(11) NOT NULL AUTO_INCREMENT,

 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

 `created` datetime NOT NULL,

 `modified` datetime NOT NULL,

 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',

 PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


Database Configuration (dbConfig.php)

To connect and select the MySQL database, the dbConfig.php file is used. Specify the hostname ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) of the database according to your MySQL credentials.

 

<?php

// Database configuration

$dbHost     = "localhost";

$dbUsername = "root";

$dbPassword = "root";

$dbName     = "codexworld";


// Create database connection

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);


// Check connection

if ($db->connect_error) {

    die("Connection failed: " . $db->connect_error);

}

?>


Data List with Show More (index.php)

The posts information will be downloaded from the MySQL server on this site and described on the web page with the Load More key…

HTML & PHP Code:

 

Include the configuration directory of the server (dbConfig.php). Now, from the posts column, get some limited data and list it with the Display More click.

 

<div class="postList">

    <?php

    // Include the database configuration file

    include 'dbConfig.php';

    

    // Get records from the database

    $query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT 2");

    

    if($query->num_rows > 0){ 

        while($row = $query->fetch_assoc()){ 

            $postID = $row['id'];

    ?>

    <div class="list_item"><?php echo $row['title']; ?></div>

    <?php } ?>

    <div class="show_more_main" id="show_more_main<?php echo $postID; ?>">

        <span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>

        <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>

    </div>

    <?php } ?>

</div>

 

JavaScript Code:

The jQuery is used to load more data from the database without page refresh, include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

The following jQuery uses Ajax ($.ajax) to get more data from ajax_more.php file and listed them under the postList div.

<script type="text/javascript">

$(document).ready(function(){

    $(document).on('click','.show_more',function(){

        var ID = $(this).attr('id');

        $('.show_more').hide();

        $('.loding').show();

        $.ajax({

            type:'POST',

            url:'ajax_more-without-design.php',

            data:'id='+ID,

            success:function(html){

                $('#show_more_main'+ID).remove();

                $('.postList').append(html);

            }

        });

    });

});

</script>


Load More Data (ajax_more.php)

The Ajax application calls the ajax more.php folder and manages more data loading features.

 

  • To connect and select the MySQL database, include the database configuration file.

  • List the cumulative number of records that are larger than the last data ID shown.

  • Fetch posts table records that are larger than the last posts ID displayed.

  • Use the Show More button to show the post info.

  • To show the post details, use the Display More click.

 

<?php

if(!empty($_POST["id"])){


    // Include the database configuration file

    include 'dbConfig.php';

    

    // Count all records except already displayed

    $query = $db->query("SELECT COUNT(*) as num_rows FROM posts WHERE id < ".$_POST['id']." ORDER BY id DESC");

    $row = $query->fetch_assoc();

    $totalRowCount = $row['num_rows'];

    

    $showLimit = 2;

    

    // Get records from the database

    $query = $db->query("SELECT * FROM posts WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT $showLimit");


    if($query->num_rows > 0){ 

        while($row = $query->fetch_assoc()){

            $postID = $row['id'];

    ?>

       <div class="list_item"><?php echo $row['title']; ?></div>

    <?php } ?>

    <?php if($totalRowCount > $showLimit){ ?>

        <div class="show_more_main" id="show_more_main<?php echo $postID; ?>">

            <span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>

            <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>

        </div>

    <?php } ?>

<?php

    }

}

?>

CSS Code

The following CSS code is used to specify the style of the posts list and show more link.

.list_item {

    background-color: #F1F1F1;

    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);

    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);

    margin: 5px 15px 2px;

    padding: 2px;

    font-size: 14px;

    line-height: 1.5;

}

.show_more_main {

    margin: 15px 25px;

}

.show_more {

    background-color: #f8f8f8;

    background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);

    background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);

    border: 1px solid;

    border-color: #d3d3d3;

    color: #333;

    font-size: 12px;

    outline: 0;

}

.show_more {

    cursor: pointer;

    display: block;

    padding: 10px 0;

    text-align: center;

    font-weight:bold;

}

.loding {

    background-color: #e9e9e9;

    border: 1px solid;

    border-color: #c6c6c6;

    color: #333;

    font-size: 12px;

    display: block;

    text-align: center;

    padding: 10px 0;

    outline: 0;

    font-weight:bold;

}

.loding_txt {

    background-image: url(loading.gif);

    background-position: left;

    background-repeat: no-repeat;

    border: 0;

    display: inline-block;

    height: 16px;

    padding-left: 20px;

}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 15, 2020

Updated Date : Jun 17, 2021

Ratings

Comments : 0

Downloads : 0