laravel中用ajax实现分页显示

Posted 2020-09-27 mayer326

1、page.blade.php   这个文件可以单独拿出来保存，以后很多项目中可以复用

@if ($paginator->total())
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li><span>?</span></li>
<li><span>?</span></li>
@else
<li><a href="javascript:;" data-page="1">?</a></li>
<li><a href="javascript:;" data-page="{{ $paginator->currentPage() - 1}}">?</a></li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li><span>{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li><span>{{ $page }}</span></li>
@else
<li><a href="javascript:;" data-page="{{ $page }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li><a href="javascript:;" data-page="{{ $paginator->currentPage() + 1}}">?</a></li>
<li><a href="javascript:;" data-page="{{ $paginator->lastPage() }}">?</a></li>
@else
<li><span>?</span></li>
<li><span>?</span></li>
@endif
</ul>
@endif

首先保存这个php文件至目录view下新建common文件夹下

2、laravel路由部分：

Route::get(‘/article-list‘, ‘View\[email protected]‘);

Route::any(‘/admin/search‘, ‘View\[email protected]‘);

3、articlecontroller.php部分

use Illuminate\Contracts\Pagination\Paginator;

public function articleList(){
$category = Category::all()->toArray();
return view(‘admin.article-list‘)->with(‘category‘,$category);
}

public function search(Request $request){
$stime = $request->input(‘logmin‘);
$etime = $request->input(‘logmax‘);
if(empty($stime) || empty($etime)){                    //起始时间或者终止时间二者有任一个为空，就展现最近一个月的数据
$stime = date(‘Y-m-d‘,strtotime(‘-1 month‘));
$etime = date(‘Y-m-d‘,time()+86399);
}
$articlecolumn = $request->input(‘articlecolumn‘);
$searchname = $request->input(‘searchname‘);
if($request->input(‘init‘)===‘init‘){      //如果是初始载入的情况
$articles = DB::table(‘articles‘)         
->join(‘category‘,‘articles.cateid‘,‘=‘,‘category.id‘)
->select(‘articles.*‘,‘category.name‘)
->whereBetween(‘articles.updated_at‘, [$stime, $etime])
->paginate(10);
}else{
$articles = DB::table(‘articles‘)
->where(function($query) use($articlecolumn){
$query->where(‘cateid‘,$articlecolumn)
->orWhere(‘parentid‘,$articlecolumn);
})
->join(‘category‘,‘articles.cateid‘,‘=‘,‘category.id‘)
->select(‘articles.*‘,‘category.name‘)
->where(‘title‘,‘like‘,‘%‘.$searchname.‘%‘)
->whereBetween(‘articles.updated_at‘, [$stime, $etime])
->paginate(10);
}
$data = $articles->toArray();
$link = $articles->links(‘common.page‘)->tohtml();
return response()->json(compact(‘data‘,‘link‘));
}

4、前台html部分

<div class="mt-20">
<table class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="80">ID</th>
<th>标题</th>
<th width="80">分类</th>
<th width="120">更新时间</th>
<th width="75">浏览次数</th>
<th width="60">发布状态</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>
<input type="hidden" id="page" value="1">
<div id="Paging"></div>
</div>

5、前台js部分

$(‘#search‘).click(function(){
//获得分类id
var articlecolumn = $(‘select[name=articlecolumn]‘).val();
//获得搜索的文章名
var searchname = $(‘input[name=searchname]‘).val();
//获得日期范围最小值
var logmin = $(‘input[name=logmin]‘).val();
//获得日期范围最大值bu
var logmax = $(‘input[name=logmax]‘).val();
var page = $(‘#page‘).val();
var params = {page:page,articlecolumn:articlecolumn,searchname:searchname,logmin:logmin,logmax:logmax}
articleList(params);
});

$(function(){
//获得分类id
var articlecolumn = $(‘select[name=articlecolumn]‘).val();
//获得搜索的文章名
var searchname = $(‘input[name=searchname]‘).val();
//获得日期范围最小值
var logmin = $(‘input[name=logmin]‘).val();
//获得日期范围最大值bu
var logmax = $(‘input[name=logmax]‘).val();
var page = $(this).attr(‘data-page‘);
var params = {init:‘init‘,page:page,articlecolumn:articlecolumn,searchname:searchname,logmin:logmin,logmax:logmax}
articleList(params);
})
//分页
$(‘#Paging‘).on(‘click‘, ‘li a‘,function(){
//获得分类id
var articlecolumn = $(‘select[name=articlecolumn]‘).val();
//获得搜索的文章名
var searchname = $(‘input[name=searchname]‘).val();
//获得日期范围最小值
var logmin = $(‘input[name=logmin]‘).val();
//获得日期范围最大值
var logmax = $(‘input[name=logmax]‘).val();
var page = $(this).attr(‘data-page‘);
var params = {page:page,articlecolumn:articlecolumn,searchname:searchname,logmin:logmin,logmax:logmax}
articleList(params);
});
function articleList(params){
$.ajax({
type: ‘POST‘,
url: ‘admin/search‘,
data:params,
dataType: ‘json‘,
success: function(data){
if(data){
console.log(data.data.data);
console.log(data.link);
$(‘#Paging‘).html(data.link);
$("#tb").html("");
$("#count").html(data.length);
$.each(data.data.data, function (k, v) {
var str ="<tr class=‘text-c‘><td><input type=‘checkbox‘ value="+v.id+"name=‘duoxuan‘></td>"
+ "<td>"+v.id+"</td><td class=‘text-l‘><u style=‘cursor:pointer‘ class=‘text-primary‘ onClick=‘‘ title=‘查看‘>"
+v.title+"</u></td><td>"+v.name+"</td><td>"+v.updated_at+"</td>"
+"<td>21212</td><td class=‘td-status‘><span class=‘label label-success radius‘>已发布</span></td>"
+"<td class=‘f-14 td-manage‘><a style=‘text-decoration:none‘ onClick=‘article_stop(this,"+v.id+")‘"
+" href=‘javascript:;‘ title=‘下架‘><i class=‘Hui-iconfont‘>&#xe6de;</i></a><a style=‘text-decoration:none‘"
+" class=‘ml-5‘ onClick=‘‘ href=‘../article-add/"+v.id+"‘ title=‘编辑‘><i class=‘Hui-iconfont‘>&#xe6df;</i>"
+"</a><a style=‘text-decoration:none‘ class=‘ml-5‘ onClick=‘article_del(this,"+v.id+")‘href=‘javascript:;‘‘"
+" title=‘删除‘><i class=‘Hui-iconfont‘>&#xe6e2;</i></a></td></tr>";
$("#tb").append(str);

});
}
},
error:function(data) {
console.log(data);
},
});
}