ALINAWAZ
3 months ago
252
1
Vue

How to use the Laravel Vue Pagination

Posted 3 months ago by ALINAWAZ

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

Please sign in or create an account to participate in this conversation.