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

Step 1: Include vuejs library
At first we need to include vuejs Latest library file.





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.






   
   

      
{{ product.title }}
      

        {{ product.shortproduct_details }}
      
      More
   

   
{{ labelBtn }}



Step 4: PHP Source Code
Following PHP Source codes are used for Vue.js and PHP Load More 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.
.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 :

Technology
Google Adsense
Programming

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.


 
Related posts:

how to delete data from database in php using button?
Multiple image slider in html source code
How To Create Image Hover Overlay Effects?
load data dynamically on page scroll using jquery ajax and php
PHP MySQL: Querying fetch Data from Database