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,
成品