laravel中用ajax实现分页显示

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‘></i></a><a style=‘text-decoration:none‘"
+" class=‘ml-5‘ onClick=‘‘ href=‘../article-add/"+v.id+"‘ title=‘编辑‘><i class=‘Hui-iconfont‘></i>"
+"</a><a style=‘text-decoration:none‘ class=‘ml-5‘ onClick=‘article_del(this,"+v.id+")‘href=‘javascript:;‘‘"
+" title=‘删除‘><i class=‘Hui-iconfont‘></i></a></td></tr>";
$("#tb").append(str);

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

时间: 2024-10-11 10:48:17

laravel中用ajax实现分页显示的相关文章

TP框架调用ajax 以及分页的引用

thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数据 1.先在Admin\Controller\MainController.class.php里面写一个方法 public function testajax()//ajax测试方法 { $this->show(); } 2.在Admin\View\Main文件夹里面建对应的显示页面testajax

jQuery+Ajax+PHP+Mysql实现分页显示数据

css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; curs

PHP+JQUEY+AJAX实现分页

PHP+JQUEY+AJAX实现分页 HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left;width:220px; height:260px; margin:2px} #list ul li img{width:220px; height:220px} #list ul li p{line-height:22px} #pagecount{width

关于会员分页显示

关于conn.php mysql_connect('localhost','root','root') or die("数据库连接失败"+mysql_error()); mysql_select_db('ajax') or die("数据打开失败"+mysql_error()); user.php <?php require_once:"conn.php" $page=$_GET['page']?$_GET['page']:1; $page

scroll事件实现监控滚动条并分页显示示例(zepto.js)

scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scr

PHP中使用jQuery+Ajax实现分页查询多功能操作

1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_

JSP分页显示实例(基于Bootstrap)

首先介绍一款简单利落的分页利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator 备用下载地址:http://files.cnblogs.com/files/Dreamer-1/bootstrap-paginator-master.rar 下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现) 一:

Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)

首先得先引入对应的js 1.jquery.min.js  首先导入 2. File:        jquery.dataTables.min.js Version:     1.9.4     这是我使用的版本 这是  jsp 页面 关键的table  代码 <table id="fuck" class="table table-bordered data-table"> <thead> <tr> <span style=

zend framework 分页显示 Zend_Paginator的使用

zend framework 提供了一个分页类Zend_Paginator,Zend_Paginator强大的地方在自动分页和导航面板. 构造Zend_Paginator需要提供一个adapter,在手册上提供了五种选择 Adapter:Array,Zend_Db_Select,Zend_Db_Table_Select,Iterator,Null. 如果我们从数据库取得数据,在分页可以使用 Zend_DB_Select或则Zend_Db_Table_Select. 1 class Draft e