這里我寫了兩種寫法，手動(dòng)測(cè)試，占無發(fā)現(xiàn)問題。（推薦使用第二個(gè)方法）
效果如下：

首先安裝

gem ‘kaminari’

執(zhí)行

bundle

確保您的項(xiàng)目視圖文件中 已有類似gem的引用：

<%= paginate @users %>

一.追加方法
在 app/assets/javascripts/admin/目錄下，創(chuàng)建一個(gè)名稱為

skip_page.js

的一個(gè)文件，添加如下內(nèi)容：

function skip_page(type){ // 類型區(qū)分是否 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=''>跳轉(zhuǎn)</a></div></div>`)}$(document).on('change', '.skip_value', function(){// 初始化跳轉(zhuǎn)參數(shù)var skip_value = $(this).val(); //跳轉(zhuǎn)頁數(shù)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'); //最后頁// 最大跳轉(zhuǎn)數(shù)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()); //當(dāng)前所在分頁數(shù)}// 跳轉(zhuǎn)條件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){ // 上一頁和下一頁 必須存在一個(gè)console.log("return")$(this).next('.skip_pagination').find('a').attr('href',''); // 清空超鏈接return}console.log("最大數(shù)值" + max_number)var skip_value = $(this).val() > max_number ? max_number : $(this).val(); // 默認(rèn)最大跳轉(zhuǎn)數(shù)值var skip_value = $(this).val() <= 0 ? 1 : skip_value; // 默認(rèn)最小跳轉(zhuǎn)數(shù)值1// 選取某一個(gè)對(duì)象（上頁或者下頁或者默認(rèn)）的urlif (page_prev.length > 0 && page_prev.attr('href').match(/page[^&]*/) != null ){ //上一頁的超鏈接是否有page參數(shù)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參數(shù)console.log('下一頁')var href = page_next.attr('href');console.log(href)}else{console.log('默認(rèn)')var href_page = (page_prev.length > 0 ? page_prev : page_next).attr('href') // 選擇一個(gè)存在的超鏈接console.log(href_page)if (href_page.includes('?')){ // 判斷超鏈接是否包含問號(hào)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 ‘a(chǎn)dmin/skip_page’

在視圖界面引用即可顯示

skip_page(); //分頁跳轉(zhuǎn)

二. 第二個(gè)方法
這個(gè)方法比較人性化了，不用每個(gè)界面都要追加一遍。

首先在 app/assets/javascripts/admin/目錄下，創(chuàng)建一個(gè)名稱為

skip_page.js

的一個(gè)文件，添加如下內(nèi)容：

$(document).on('change', '.skip_value', function(){// 初始化跳轉(zhuǎn)參數(shù)var skip_value = $(this).val(); //跳轉(zhuǎn)頁數(shù)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'); //最后頁// 最大跳轉(zhuǎn)數(shù)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()); //當(dāng)前所在分頁數(shù)}// 跳轉(zhuǎn)條件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){ // 上一頁和下一頁 必須存在一個(gè)console.log("return")$(this).next('.skip_pagination').find('a').attr('href',''); // 清空超鏈接return}console.log("最大數(shù)值" + max_number)var skip_value = $(this).val() > max_number ? max_number : $(this).val(); // 默認(rèn)最大跳轉(zhuǎn)數(shù)值var skip_value = $(this).val() <= 0 ? 1 : skip_value; // 默認(rèn)最小跳轉(zhuǎn)數(shù)值1// 選取某一個(gè)對(duì)象（上頁或者下頁或者默認(rèn)）的urlif (page_prev.length > 0 && page_prev.attr('href').match(/page[^&]*/) != null ){ //上一頁的超鏈接是否有page參數(shù)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參數(shù)console.log('下一頁')var href = page_next.attr('href');console.log(href)var date_remote = page_next.attr("data-remote")}else{console.log('默認(rèn)')var default_page = (page_prev.length > 0 ? page_prev : page_next) // 默認(rèn)的頁面var href_page = default_page.attr('href') // 選擇一個(gè)存在的超鏈接console.log(href_page)if (href_page.includes('?')){ // 判斷超鏈接是否包含問號(hào)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("轉(zhuǎn)換后的url:" + temp_url)$(this).next('.skip_pagination').find('a').attr('href', temp_url)if (date_remote != 'undefined' && date_remote == 'true'){ // 如果是ajax的情況console.log('------轉(zhuǎn)換為ajax------')$(this).next('.skip_pagination').find('a').attr("data-remote", "true")}})

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

//= require ‘a(chǎn)dmin/skip_page’

執(zhí)行命令：rails g kaminari:views default 此時(shí)會(huì)生成 app/views/admin/kaminari/ 的文件，您只需設(shè)計(jì)模板或者使用默認(rèn)模板，在最后添加如下代碼：

<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=''>跳轉(zhuǎn)</a></div> </div>

然后就去測(cè)試吧。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。