ruby on rails 分页gem kaminari,指定页码跳转

这里我写了两种写法，手动测试，占无发现问题。（推荐使用第二个方法）
效果如下：

首先安装

gem ‘kaminari’

执行

bundle

确保您的项目视图文件中 已有类似gem的引用：

<%= paginate @users %>

一.追加方法
在 app/assets/javascripts/admin/目录下，创建一个名称为

skip_page.js

的一个文件，添加如下内容：

function skip_page(type){ // 类型区分是否 ajax
  $('.pagination').attr('id', 'pagination1')
  if ($('.pagination').find('.skip_value').length <= 0){ //相同视图只追加一次
    $('.pagination').css('display', 'flex');
    $('.pagination').append(`<div style='display: flex;'><input class='skip_value' type='text' style='width: 60px ;height: 30px; font-size: 14px;' placeholder='页码'> <div class='skip_pagination'><a style='color: #07080B; background: #F2F2F2;' href=''>跳转</a></div></div>`)
    
  }
  $(document).on('change', '.skip_value', function(){
    // 初始化跳转参数
    var skip_value = $(this).val(); //跳转页数
    var page_prev = $(this).parents('.pagination').find('.prev a'); //上一页
    var page_next = $(this).parents('.pagination').find('.next a'); //下一页
    var page_last = $(this).parents('.pagination').find('.last a'); //最后页

    // 最大跳转数
    if (page_last.length > 0){
      var max_page = page_last.attr('href').match(/page=[1-9][0-9]*/)
      max_number =  max_page == null ? parseInt($(this).parents('.pagination').find('.current').text()) : parseInt(max_page[0].match(/[1-9][0-9]*/)[0])
    }else{
      max_number = parseInt($(this).parents('.pagination').find('.current').text()); //当前所在分页数
    }

    // 跳转条件
    if(skip_value.length <= 0 || isNaN(skip_value)){ // 必须是int整型，而且不为空
      console.log("return")
      $(this).next('.skip_pagination').find('a').attr('href',''); // 清空超链接
      return
    }
    if (page_prev.length <= 0 && page_next.length <= 0){ // 上一页和下一页 必须存在一个
      console.log("return")
      $(this).next('.skip_pagination').find('a').attr('href',''); // 清空超链接
      return
    }

    console.log("最大数值" + max_number)
    var skip_value = $(this).val() > max_number ? max_number : $(this).val(); // 默认最大跳转数值
    var skip_value = $(this).val() <= 0 ? 1 : skip_value;  // 默认最小跳转数值1

    // 选取某一个对象（上页或者下页或者默认）的url
    if (page_prev.length > 0 && page_prev.attr('href').match(/page[^&]*/) != null ){  //上一页的超链接是否有page参数
      console.log('上一页')
      var href = page_prev.attr('href');
      console.log(href)
    }else if(page_next.length > 0 && page_next.attr('href').match(/page[^&]*/) != null){  //下一页的超链接是否有page参数
      console.log('下一页')
      var href = page_next.attr('href');
      console.log(href)
    }else{
      console.log('默认')
      var href_page = (page_prev.length > 0 ? page_prev : page_next).attr('href') // 选择一个存在的超链接
      console.log(href_page)
      if (href_page.includes('?')){  // 判断超链接是否包含问号
        var href = href_page.replace("?", "?page=1&")
      }else{
        var href = href_page + "?page=1"
      }
      console.log(href)
    }

    var temp_url = href.replace(href.match(/page[^&]*/)[0], `page=${parseInt(skip_value)}`);  //替换page
    console.log(temp_url)

    $(this).next('.skip_pagination').find('a').attr('href', temp_url)
    if (type=='ajax'){ // 如果是ajax的情况
      $(this).next('.skip_pagination').find('a').attr("data-remote", "true")
    }

  })
}

在添加完后，在app/assets/javascripts/application.js 引用文件

//= require ‘admin/skip_page’

在视图界面引用即可显示

skip_page(); //分页跳转

二. 第二个方法
这个方法比较人性化了，不用每个界面都要追加一遍。

首先在 app/assets/javascripts/admin/目录下，创建一个名称为

skip_page.js

的一个文件，添加如下内容：

$(document).on('change', '.skip_value', function(){
  // 初始化跳转参数
  var skip_value = $(this).val(); //跳转页数
  var page_prev = $(this).parents('.pagination').find('.prev a'); //上一页
  var page_next = $(this).parents('.pagination').find('.next a'); //下一页
  var page_last = $(this).parents('.pagination').find('.last a'); //最后页

  // 最大跳转数
  if (page_last.length > 0){
    var max_page = page_last.attr('href').match(/page=[1-9][0-9]*/)
    max_number =  max_page == null ? parseInt($(this).parents('.pagination').find('.current').text()) : parseInt(max_page[0].match(/[1-9][0-9]*/)[0])
  }else{
    max_number = parseInt($(this).parents('.pagination').find('.current').text()); //当前所在分页数
  }

  // 跳转条件
  if(skip_value.length <= 0 || isNaN(skip_value)){ // 必须是int整型，而且不为空
    console.log("return")
    $(this).next('.skip_pagination').find('a').attr('href',''); // 清空超链接
    return
  }
  if (page_prev.length <= 0 && page_next.length <= 0){ // 上一页和下一页 必须存在一个
    console.log("return")
    $(this).next('.skip_pagination').find('a').attr('href',''); // 清空超链接
    return
  }

  console.log("最大数值" + max_number)
  var skip_value = $(this).val() > max_number ? max_number : $(this).val(); // 默认最大跳转数值
  var skip_value = $(this).val() <= 0 ? 1 : skip_value;  // 默认最小跳转数值1

  // 选取某一个对象（上页或者下页或者默认）的url
  if (page_prev.length > 0 && page_prev.attr('href').match(/page[^&]*/) != null ){  //上一页的超链接是否有page参数
    console.log('上一页')
    var href = page_prev.attr('href');
    console.log(href)
    var date_remote = page_prev.attr("data-remote")
  }else if(page_next.length > 0 && page_next.attr('href').match(/page[^&]*/) != null){  //下一页的超链接是否有page参数
    console.log('下一页')
    var href = page_next.attr('href');
    console.log(href)
    var date_remote = page_next.attr("data-remote")
  }else{
    console.log('默认')
    var default_page = (page_prev.length > 0 ? page_prev : page_next) // 默认的页面
    var href_page = default_page.attr('href')  // 选择一个存在的超链接
    console.log(href_page)
    if (href_page.includes('?')){  // 判断超链接是否包含问号
      var href = href_page.replace("?", "?page=1&")
    }else{
      var href = href_page + "?page=1"
    }
    var date_remote = default_page.attr("data-remote")
    console.log(href)
  }
  console.log("是否是ajax:" + date_remote)
  var temp_url = href.replace(href.match(/page[^&]*/)[0], `page=${parseInt(skip_value)}`);  //替换page
  console.log("转换后的url:" + temp_url)

  $(this).next('.skip_pagination').find('a').attr('href', temp_url)

  if (date_remote != 'undefined' && date_remote == 'true'){ // 如果是ajax的情况
    console.log('------转换为ajax------')
    $(this).next('.skip_pagination').find('a').attr("data-remote", "true")
  }

})

在app/assets/javascripts/application.js目录下引用：

//= require ‘admin/skip_page’

执行命令：rails g kaminari:views default 此时会生成 app/views/admin/kaminari/ 的文件，您只需设计模板或者使用默认模板，在最后添加如下代码：

<div style='display: flex;float: inherit;' >
    <input class='skip_value' type='text' style='width: 60px ;height: 30px;  font-size: 14px;' placeholder='页码'>
    <div class='skip_pagination'>
        <a style='color: #07080B; background: #F2F2F2;' href=''>跳转</a>
	</div>
</div>

然后就去测试吧。