Skip to main content

Load More Data from Database using vue.js Ajax PHP

Today, We want to share with you Load More Data from Database using vue.js Ajax PHP MySQL.In this post we will show you load more content from database, hear for Load More Records on Button Click with Vue.js and PHP we will give you demo and example for implement.In this post, we will learn about Load More Records On Button Click Using PHP vuejs with an example.

Load More Data from Database using vue.js Ajax PHP MySQL

There are the Following The simple About Load More Data from Database using vue.js Ajax PHP MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop lazy loading php mysql, so the some vue js load more on scroll for this example is following below.

MySQL Data Table structure

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `product_details` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

config.php

<?php

$host = "localhost";
$user = "root"; 
$password = "";
$dbname = "pakainfo";

$con = mysqli_connect($host, $user, $password,$dbname);
// Check Live Database connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

Also Read :  jQuery Check Uncheck All Checkbox Examples

<!-- Script -->
<script src="vue.js"></script>
<script src="axios-master/dist/axios.min.js"></script>
<script src="script.js"></script>

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

var myShop = new Vue({
  el: '#mymyShop',
  data: {
    isFinished: false,
    row: 0, 
    rowperpage: 3, 
    labelBtn: 'Load More',
    products: ''
  },
  methods: {
    getProducts: function(){

      axios.product('ajaxfile.php', {
        row: this.row, 
        rowperpage: this.rowperpage
      })
      .then(function (response) {

         if(response.data !='' ){

           // Update rowperpage
           myShop.row+=myShop.rowperpage;

           var len = myShop.products.length;
           if(len > 0){
             myShop.labelBtn = "Loading ...";
             setTimeout(function() {
                myShop.labelBtn = "Load More";

                // Loop on data and push in products
                for (let i = 0; i < response.data.length; i++){
                   myShop.products.push(response.data[i]); 
                } 
             },500);
           }else{
              myShop.products = response.data;
           }

         }else{
           myShop.labelBtn = "No more any Products records avaiable.";
           myShop.isFinished = true;
         }
       });
     }
   },
   created: function(){
      this.getProducts();
   }
})

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

Also Read :  Send Email via SMTP Server in Node.js using Nodemailer npm

<!-- CSS -->
<link href='style.css' rel='stylesheet' type='text/css' >

<!-- Products List -->
<div class="container" id='myapp'>

   <!-- Post -->
   <div class="product" v-for='product in products'>
      <h1 v-cloak>{{ product.title }}</h1>
      <p v-cloak>
        {{ product.shortproduct_details }}
      </p>
      <a :href="product.link" class="more" target="_blank" v-cloak>More</a>
   </div>

   <h1 v-bind:class="[isFinished ? 'finish' : 'load-more']" @click='getPosts()' v-cloak>{{ labelBtn }}</h1>

</div>

Step 4: PHP Source Code

Following PHP Source codes are used for Vue.js and PHP Load More Data.

<?php

// PHP Database configuration
include 'config.php';

$data = json_decode(file_get_product_detailss("php://input"));

$row = $data->row;
$rowperpage = $data->rowperpage;

// Fetch records
$query = 'SELECT * FROM products LIMIT '.$row.','.$rowperpage;
$result = mysqli_query($con,$query);

$all_data_results = array();

while($productRow = mysqli_fetch_assoc($result)){

   $id = $productRow['id'];
   $title = $productRow['title'];
   $product_details = $productRow['product_details'];
   $shortproduct_details = substr($product_details, 0, 160)."...";
   $link = $productRow['link'];

   $all_data_results[] = array(
     'id'=>$id,
     'title'=>$title,
     'shortproduct_details'=>$shortproduct_details,
     'product_details'=>$product_details,
     'link'=>$link
   );

}

echo json_encode($all_data_results);
exit;

Step 5: CSS Source Code

Following CSS Source codes are used for Vue.js and PHP Load More Data.

Also Read :  Ionic Side Menus - Side Menu and Navigation

.container{
  width: 55%;
  margin: 0 auto; 
  border: 0px solid black;
  padding: 10px 0px;
}

.post{
  width: 97%;
  min-height: 200px;
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 15px;
}

.post h1{
  letter-spacing: 1px;
  font-weight: normal;
  font-family: sans-serif;
}

.post p{
  letter-spacing: 1px;
  text-overflow: ellipsis;
  line-height: 25px;
}

.load-more{
  width: 99%;
  background: #15a9ce;
  text-align: center;
  color: white;
  padding: 10px 0px;
  font-family: sans-serif;
}

.load-more:hover{
  cursor: pointer;
}

.finish{
  width: 99%;
  background: darkgray;
  text-align: center;
  color: white;
  padding: 10px 0px;
  font-family: sans-serif;
}

.more{
  color: blue;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 16px;
}

[v-cloak] {
  display:none;
}

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Load More Data from Database using vue.js Ajax PHP MySQL.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Web Developer

Hi, I’m Web developer, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]