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>

 

原文地址:https://www.cnblogs.com/smallyi/p/7516661.html