laravel中用ajax实现分页显示

2021-06-29 06:04

阅读:696

标签:sep   erro   text   check   parent   tween   checkbox   ebe   json   

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

@if ($paginator->total())


    {{-- Previous Page Link --}}
    @if ($paginator->onFirstPage())
  • ?

  • ?

  • @else
  • ?

  • currentPage() - 1}}">?

  • @endif
    {{-- Pagination Elements --}}
    @foreach ($elements as $element)
    {{-- "Three Dots" Separator --}}
    @if (is_string($element))
  • {{ $element }}

  • @endif
    {{-- Array Of Links --}}
    @if (is_array($element))
    @foreach ($element as $page => $url)
    @if ($page == $paginator->currentPage())
  • {{ $page }}

  • @else
  • {{ $page }}

  • @endif
    @endforeach
    @endif
    @endforeach
    {{-- Next Page Link --}}
    @if ($paginator->hasMorePages())
  • currentPage() + 1}}">?

  • lastPage() }}">?

  • @else
  • ?

  • ?

  • @endif

@endif

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

2、laravel路由部分:

Route::get(‘/article-list‘, ‘View\ArticleController@articleList‘);

Route::any(‘/admin/search‘, ‘View\ArticleController@search‘);

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部分
















ID 标题 分类 更新时间 浏览次数 发布状态 操作



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 ="

"
+ ""+v.id+" "
+v.title+"
"+v.name+" "+v.updated_at+""
+"21212 已发布"
+" +" href=‘javascript:;‘ title=‘下架‘> +" class=‘ml-5‘ onClick=‘‘ href=‘../article-add/"+v.id+"‘ title=‘编辑‘>"
+"
+" title=‘删除‘> ";
$("#tb").append(str);

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

laravel中用ajax实现分页显示

标签:sep   erro   text   check   parent   tween   checkbox   ebe   json   

原文地址:http://www.cnblogs.com/aiit/p/7142145.html


评论


亲,登录后才可以留言!