How to use the Laravel Vue Pagination

this is my vuejs component template Code

Search for your name

<input type="text" name="searchInput" id="searchInput" @keyup.enter="btnsearch" class="searchinput" v-model="searchInput"> <button class="searchbtn" @click="btnsearch">Search

export default { data() { return { searchInput:'', } }, methods: { btnsearch:function (e) { e.preventDefault();

            let formData = new FormData();
            formData.append('searchInput', this.searchInput);
            axios.post('/untyme/public/searchMessage',formData)
                .then(function (resp) {
                    let results = resp.data.data;
                    let html = "";
                    console.log(resp.data.count[0].count);

                    html +="<p  style='text-transform: capitalize; color: slategray;'>" + resp.data.searchby + " has " + resp.data.count + " messages</p>";
                    for(let i = 0; i < results.length; i++) {
                        html += '<div style="margin-top: 1.5rem;">';
                        if (results[i].messagetype == 'Public') {
                            html += "<div style='display: inline;'><h3 style='text-transform: capitalize;display: inline;margin-right: 10px;  '><a style='color:#55c175;' href= /untyme/public/publicmessage/"+results[i].id+" >"+results[i].rname +"</a></h3><span class='' style='margin-right: 10px;'><i class='fa fa-users' aria-hidden='true' style='margin-right: 5px;'></i>"+results[i].messagetype+"</span></div>";
                        }else{
                            html += "<div><h3 style='text-transform: capitalize;display: inline;margin-right: 10px; '><a style='color:#55c175;' href= /untyme/public/privatemessage/"+results[i].id+" >"+results[i].rname +"</a></h3><span class='' style='margin-right: 10px;'><i class='fa fa-lock' aria-hidden='true'></i></span>";
                            if (results[i].msg_claimed == 'Claimed') {
                                html +="<span class='badge badge-success'>Previous Claimed</span></div>";
                            }
                        }
                        if(resp.data.verifyName == 1){
                            html += "<div style='color:black;'>Message sent by "+results[i].username+"</div>";
                        }

                        html += "<div style='color: slategray;'>";
                        if (results[i].rcountry && resp.data.verifyCountry == 1 ) {
                            html += " " + results[i].rcountry;
                        }
                        if (results[i].rcity && resp.data.verifyCity == 1) {
                            html += " " + results[i].rcity;
                        }
                        if (results[i].raddress  && resp.data.verifySchool == 1) {
                            html += " " + results[i].raddress;
                        }
                        html += "</div>";

                        html += '</div>';
                    }

                    if (results.length) {
                        $('#resultList').html(html);
                        $('#search-results').show();
                        $('html, body').animate({
                            scrollTop: $("#search-results").offset().top
                        }, 1000);
                        $('#no-results').modal('hide');
                    } else {
                        $('#resultList').html('');
                        $('#search-results').hide();
                        $('#no-results').modal('show');
                    }
                })
                .catch(function (resp) {
                });
        }
    }
}

how to add the vue js pagination in this code

gwleuverink

6 years ago

Level 10

This is not a direct answer to your question, just some friendly advice to hopefully help you avoid trouble maintaining this code in the future :)

When you append html to the vue template you are breaking the vue paradigm. This makes your code very hard to maintain and'll can cause some really strange bugs down the line.

Just as a rule of thumb: When you need to alter some html rendered by Vue it is nod advised to reach in and alter the DOM manually. This is a definite code smell.

There are multiple ways to approach this problem in the case of your example, the most straight forward is to populate a data property in your axios success callback and loop through it in your template in stead of appending html manually.

Vue manages html based on component state. In layman's terms that means when you update a data property, the template updates itself automatically.

Here's an example:

You have to have a data property on your component to hold the results

data: function() {
    return {
        results: []
    }
}

In your success callback you populate the result property

axios.post('/untyme/public/searchMessage',formData)
    .then(function (resp) {
        this.results = resp.data.data;
    })

In your template you can loop through all the results

<div 
    v-for="result in results" 
    :key="result.id"
>
    <h2>{{  result.name  }}</h2>
</div

You'll see the template will update itself based on the current content of the results data property

Now concerning your initial question. You'll have to return paginated results from your back end, keep count of the current page in your vue component and make api calls to fetch the results for each next page.

If you're just starting out with Vue this can feel a little daunting i'm sure. I strongly encourage you to check out the following lessons to get acquainted with the framework :) It'll click very quickly

https://laracasts.com/series/learn-vue-2-step-by-step

1 like

Please or to participate in this conversation.