Laravel 自定义分页、可以调整、显示数目
{{-- 增加输入框,跳转任意页码和显示任意条数 --}}
<ul class="pagination pagination-sm">
<li>
<span data-toggle="tooltip" data-placement="bottom" title="输入页码" style=" padding: 3.5px; margin-top: 3px;">
第 <input type="text" class="text-center no-padding" name="{{ $name or 'page' }}" form="{{ $formId or '' }}" value="{{ $data->currentPage() or '1' }}" id="{{ $id or 'customPage'}}" data-total-page="{{ $data->lastPage() }}" style="width: 50px;"> 页 / 共 {{ $data->lastPage() }} 页
</span>
</li>
<li style="">
<span data-toggle="tooltip" data-placement="bottom" title="选择每页显示条数" style=" padding: 5.5px; margin-top: 3px;">
<!-- 每页 <input type="text" class="text-center no-padding" name='perPage' form="{{ $formId or '' }}" value="{{ $data->perPage() }}" id="customLimit" data-total="{{ $data->total() }}" style="width: 50px;" > 条 / 共 {{ $data->total() }} 条
<div class="form-group"> -->
<label class="text-center no-padding no-margin">每页显示:</label>
<select id="perPage" class="text-center no-padding" name='perPage' form="{{ $formId or '' }}" style="width: 50px;">
<option {{ $data->perPage() == 16 ? 'selected': ''}} value="16">默认</option>
<option {{ $data->perPage() == 20 ? 'selected': ''}} value="20">20</option>
<option {{ $data->perPage() == 50 ? 'selected': ''}} value="50">50</option>
<option {{ $data->perPage() == 100 ? 'selected': ''}} value="100">100</option>
</select>
<label class="text-center no-padding no-margin">条</label>
</div>
</span>
</li>
</ul>
{{--
@include('admin.widget.paginate-jump', [
'data' => 'data',
<!-- 'id' => 'customPage', -->
<!-- 'name' => 'page', -->
'formId' => 'formId',
])
--}}
<script src="/assets/libs/single_file/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 页面跳转
$('#{{$id or "customPage"}}').blur(function(){
var jump_page = $(this).val();
if (jump_page > {{ $data->lastPage()}} || jump_page <= 0) {
$(this).val({{ $data->currentPage() }});
jump_page = {{ $data->currentPage() }};
}
$('#{{$formId}}').submit();
// var url = "{!! $data->url( $data->currentPage() ) !!}";
// var page_posite = url.indexOf('page=');
// var str = url.substr(0,page_posite) + 'page=' + jump_page;
// window.location.href = str;
// console.log(jump_page, url,page_posite,str )
});
// 每页显示条数
$('#perPage').change(function(){
var per_page = $(this).val();
console.log(per_page);
$('#{{$formId}}').submit();
})
});
</script>

Laravel 自定义分页、可以调整、显示数目的更多相关文章
- laravel自定义分页功能的实现:
laravel版本:5.5.. 执行命令: php artisan vendor:publish --tag=laravel-pagination 在到 resources/views/vendor/ ...
- laravel 自定义分页 offset 和 limit 的使用
laravel 本身有一个自带的快速分页方法 paginate,只需要传入每页显示多少条数据就可以 了,但是如果想使用自定义从哪里开始呢,这时候就可以使用offset 和 limit 的组合,offs ...
- Laravel自定义分页样式
<?php namespace App\Http\Controllers; use DB; use App\Http\Controllers\Controller; class UserCont ...
- [ Laravel 5.6 文档 ]laravel数据库操作分页(自定义分页实现和自定义分页样式)
简介 在其他框架中,分页可能是件非常痛苦的事,Laravel 让这件事变得简单.易于上手.Laravel 的分页器与查询构建器和 Eloquent ORM 集成在一起,并开箱提供方便的.易于使用的.基 ...
- Laravel 5.4---后端数据分页和前端显示分页结果
后端数据(Eloquent 模型)分页 事先建立好Eloquent 模型和Controller 还有 前台的View.可以参考我之前的文章:Laravel建站03--建立前台文章列表和文章详情 在co ...
- Android Launcher分析和修改11——自定义分页指示器(paged_view_indicator)
Android4.0的Launcher自带了一个简单的分页指示器,就是Hotseat上面那个线段,这个本质上是一个ImageView利用.9.png图片做,效果实在是不太美观,用测试人员的话,太丑了. ...
- 第三百一十四节,Django框架,自定义分页
第三百一十四节,Django框架,自定义分页 自定义分页模块 #!/usr/bin/env python #coding:utf-8 from django.utils.safestring impo ...
- 十二 Django框架,自定义分页
自定义分页模块 #!/usr/bin/env python #coding:utf-8 from django.utils.safestring import mark_safe #封装分页类模块 c ...
- django上课笔记2-视图CBV-ORM补充-Django的自带分页-Django的自定义分页
一.视图CBV 1.urls url(r'^login.html$', views.Login.as_view()), 2.views from django.views import View cl ...
随机推荐
- python科学计算
windows下python科学计算库的下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/(由于C运行库的问题,scipy在linux下可以用pip安装,而 ...
- 【一】java 虚拟机 监控示例 Eclipse Memory Analyser
1.堆内存溢出示例代码 import java.util.ArrayList; import java.util.List; public class TestHeap { public static ...
- 10.tesseract
1.Tesseract-OCR简介 一个Google支持的开源的OCR图文识别开源项目.支持多种语言(我使用的是3.02 版本,支持包括英文,简体中文,繁体中文),支持Windows,Linux,M ...
- Ubuntu18.04中安装cuda的记录
一.参考: https://blog.csdn.net/QLULIBIN/article/details/78714596 https://www.jianshu.com/p/00c37b09f0f3 ...
- 在vscode上 运行typescript 文件
安装nodejs 安装链接: https://nodejs.org/zh-cn/ 安装测试: node -v npm -v 安装typescript sudo npm install typescri ...
- 洛谷P2699小浩的幂次运算
二分走一波,没想到题解的大佬做法 p_q 注意爆long long,所以先对数取一下上限 二分确定下限,然后输出 #include<stdio.h> #include<math.h& ...
- steps/train_lda_mllt.sh
LDA+MLLT指的是在计算MFCC后对特征进行的变换:首先对特征进行扩帧,使用LDA降维(默认降低到40),然后经过多次迭代轮数估计一个对角变换(又称为MLLT或CTC) .详见 http://ka ...
- Python的集合和元组
一.元组 元组也是一个list,但它的值不能改变 Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号 ...
- python---issubclass/type/isinstance/ 反射(内置函数getattr/delattr...)
# 一 python面向对象-内置函数(issubclass(), type(), isinstance()) # issubclass 判断xxxx类是否是xxxx类的子类 class egg: p ...
- vue学习之router
路由文档:https://router.vuejs.org/zh/guide/ 使用vue做spa应用的话,一定会涉及到路由. 安装 安装router插件 npm install vue-router ...