zoukankan      html  css  js  c++  java
  • 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=" 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=" 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=" 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>

     

  • 相关阅读:
    leetcode66 plusOne
    park/unpark 阻塞与唤醒线程
    leetcode55 jumpGame贪心算法
    ACID特性与事务的隔离级别
    PCB ODB++(Gerber)图形绘制实现方法
    PCB 所建不凡 AWS 技术峰会2018 • 深圳站 2018.9.20
    PCB SQL SERVER 位运算应用实例
    PCB SQL SERVER 枚举分割函数(枚举值分解函数)
    PCB SQL SERVER 正则应用实例
    PCB Genesis 外形加内角孔实现方法
  • 原文地址:https://www.cnblogs.com/smallyi/p/7516661.html
Copyright © 2011-2022 走看看