Brak opisu

bootstrap_table_jump.js 2.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. (function ($) {
  2. 'use strict';
  3. $.extend($.fn.bootstrapTable.defaults, {
  4. // 默认不显示
  5. paginationShowPageGo: false
  6. });
  7. $.extend($.fn.bootstrapTable.locales, {
  8. pageGo: function () {
  9. // 定义默认显示文字,其它语言需要扩展
  10. return '跳转到';
  11. }
  12. });
  13. $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
  14. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  15. _initPagination = BootstrapTable.prototype.initPagination;
  16. // 扩展已有的初始化分页组件的方法
  17. BootstrapTable.prototype.initPagination = function() {
  18. _initPagination.apply(this, Array.prototype.slice.apply(arguments));
  19. // 判断是否显示跳转到指定页码的组件
  20. if(this.options.paginationShowPageGo){
  21. var html = [];
  22. // 渲染跳转到指定页的元素
  23. html.push(
  24. '<ul class="pagination-jump">',
  25. '<li class=""><span>' + this.options.pageGo() + ':</span></li>',
  26. '<li class=""><input type="text" class="page-input" value="' + this.options.pageNumber + '" /></li>',
  27. '<li class="page-go"><a class="jump-go" href="">GO</a></li>',
  28. '</ul>');
  29. // 放到原先的分页组件后面
  30. this.$pagination.find('ul.pagination').after(html.join(''));
  31. // 点击按钮触发跳转到指定页函数
  32. this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this));
  33. // 手动输入页码校验,只允许输入正整数
  34. this.$pagination.find('.page-input').off('keyup').on('keyup', function(){
  35. this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g,'') : this.value.replace(/\D/g,'');
  36. });
  37. }
  38. };
  39. // 自定义跳转到某页的函数
  40. BootstrapTable.prototype.onPageGo = function (event) {
  41. // 获取手动输入的要跳转到的页码元素
  42. var $toPage=this.$pagination.find('.page-input');
  43. // 当前页不做处理
  44. if (this.options.pageNumber === +$toPage.val()) {
  45. return false;
  46. }
  47. // 调用官方的函数
  48. this.selectPage(+$toPage.val());
  49. return false;
  50. };
  51. })(jQuery);