這里我寫了兩種寫法，手動測試，占無發現問題。（推薦使用第二個方法）
效果如下：

首先安裝

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// 選取某一個對象（上頁或者下頁或者默認）的urlif (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)}`); //替換pageconsole.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// 選取某一個對象（上頁或者下頁或者默認）的urlif (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)}`); //替換pageconsole.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>

然后就去測試吧。

總結

以上是生活随笔為你收集整理的ruby on rails 分页gem kaminari,指定页码跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。