在我的控制器中我返回Json对ajax函数的响应,并且从ajax函数我必须用分页显示这些数据
我在ajax成功函数中得到了结果,但是不知道如何在视图中对div进行分页和显示
到目前为止,我已尝试过以下代码
$mpullethouse = DB::table('mpullethouses')->get();
return response()->json(['mpullethouses'=>$mpullethouse]);
$.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');
}
});
任何人都可以帮助我吗?...
答案 0 :(得分: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">«</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">»</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);
}
});
&#13;
.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;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pages"></div>
<div class="pagination"></div>
&#13;
此代码示例可能对您有所帮助。