thinkphp page分页, 视图页面增加跳转到哪页 。 付加fastadmin的

Thinkphp

修改/thinkphp/library/think/paginator/driver/Bootstrap.php

加入方法,样式自己修改

    //跳转到哪页
    protected  function gopage()
    {


        return $gotohtml="
            <li>
            <form action='' method='get' >
                <a style='float:left;margin-left:2px; padding: 0;'>
                 <input style='height:17px; border:0; text-align: center; width: 33px;' type='text' name='page' placeholder=''>  
                </a>
                 <input style='height:25px; padding:5px; border:1px solid #ccdbe4;' type='submit' value='GO'>
            </form>
           
            </li>
            ";
        // return $totalhtml;;

    }

 修改  render  方法,引用上述方法输出

 

成品

 

 

 

 

fastadmin

Bootstrap-table官方都有提供jumpto这个插件。地址:https://github.com/wenzhixin/bootstrap-table/tree/6a60a3643bbbc11aaa591f34dfc9fa6eda60706c/src/extensions/page-jumpto

bootstrap-table-jumpto.js

/**
 * @author Jay <jwang@dizsoft.com>
 */

(function ($) {
    'use strict';
    var sprintf = $.fn.bootstrapTable.utils.sprintf;

    $.extend($.fn.bootstrapTable.defaults, {
        showJumpto: false,
        exportOptions: {}
    });

    $.extend($.fn.bootstrapTable.locales, {
        formatJumpto: function () {
            return 'GO';
        }
    });
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initPagination = BootstrapTable.prototype.initPagination;

    BootstrapTable.prototype.initPagination = function () {
        this.showToolbar = this.options.showExport;

        _initPagination.apply(this, Array.prototype.slice.apply(arguments));

        if (this.options.showJumpto) {
            var that = this,
                $pageGroup = this.$pagination.find('ul.pagination'),
                $jumpto = $pageGroup.find('li.jumpto');

            if (!$jumpto.length) {
                $jumpto = $([
                    '<li class="jumpto">',
                        '<input type="text" class="form-control">',
                        '<button class="btn' +
                            sprintf(' btn-%s', this.options.buttonsClass) +
                            sprintf(' btn-%s', this.options.iconSize) +
                            '" title="' + this.options.formatJumpto() + '" ' +
                            ' type="button">'+this.options.formatJumpto(),
                        '</button>',
                    '</li>'].join('')).appendTo($pageGroup);

                $jumpto.find('button').click(function () {
                    that.selectPage(parseInt($jumpto.find('input').val()));
                });
            }
        }
    };
})(jQuery);

  

 将bootstrap-table-jumpto.js放在assets/js目录下

修改/public/assets/js/require-backend.js

 

 

 

 在对应js,在首行添加bootstrap-table-jumpto的依赖

 

 在实例化bootstrap-table的地方添加  showJumpto: true,

成品

 

posted @ 2021-11-12 17:05  叫我亚庆  阅读(395)  评论(0)    收藏  举报