Search Function using Jquery and Display Paginated

问题:

Requirement

In my controller i am returning Json response to ajax function and from ajax function i have to display this data with pagination

I get the results in ajax success function but dont know how to paginate and display inside a div in the view

So Far I have tried Following Code

Controller

$mpullethouse = DB::table('mpullethouses')->get();
return response()->json(['mpullethouses'=>$mpullethouse]);

Jquery

$.ajax({
        url : 'seachpullethouse',
        method : 'get',
        dataType : 'Json',
        data : formdata, 
        success : function(data){
       //here i have to paginate and display the results which i dont know
        }, 
        error : function(){
            alert('error');
        }
   });

can any one please help me?...

回答1:

var o = {"0":"1","1":"2","2":"3","3":"4","4":"5"};
var arr = $.map(o, function(el) { return el; });

var len = arr.length;

/* limit of grouping */
var n = 3;

$(".pagination").append('<a href="#" class="nav nav-left">&laquo;</a>');

/* grouping results */
var pageNo=0;
for(i=0; i<len; i+=n){
	pageNo++;
	var c = (i==0)?"active":"";
    $(".pagination").append('<a href="#" class="'+c+'">'+pageNo+'</a>');
    var j;
    var items="";
    var lim = n*pageNo;
    for(j=i; j<len && j<lim; j++){
    	items += arr[j]+"<br />";
    }
    $(".pages").append('<div class="page '+c+'">'+items+'</ div>');
}

$(".pagination").append('<a href="#" class="nav nav-right">&raquo;</a>');

/* to select {i+1}th link */
function selectLink(i){
    $(".pagination a").each(function(index){
    	if(i == index){
        	$(this).addClass("active");
        }else{
        	$(this).removeClass("active");
        }
    });
}

/* to show {i+1}th page */
function showPage(i){

    $(".page").each(function(index){
    	if((i-1) == index){
        	$(this).addClass("active");
        }else{
        	$(this).removeClass("active");
        }
    });
}

/*  */
$(".pagination a:not(.nav)").on('click',function(){
	var i = $(this).index(".pagination a");    
    selectLink(i);
    showPage(i);
});

/* previous page */
$(".pagination a.nav-left").on('click',function(){
	var i = $('.pagination a.active').index();
    if(1<i){
    	i--;
    	selectLink(i);
        showPage(i);
    }
});

/* next page */
$(".pagination a.nav-right").on('click',function(){
	var i = $('.pagination a.active').index();
    if(i < pageNo){
    	i++;
    	selectLink(i);
        showPage(i);
    }
});

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

/**/
.page{
    display:none;
}

.page.active{
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pages"></div>

<div class="pagination"></div>

This code sample may help you.