在年初的时候给一个用户做网站用到了一个输入页码跳转的功能，用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面，这个功能非常棒吧，下面就看看如何使用php和jquery来实现这个功能。当然我之前自己写的那个是用JS实现的功能也比较简单，今天在阿树博客看到这个jquery版的写的很不错，在这里分享给大家。
最终效果
添加分页导航代码
下面的页码输出函数显示出来的效果见上图：
- function chenxing_pagenavi() {
- global $wp_query, $wp_rewrite;
- $wp_query->query_vars[‘paged’] > 1 ? $current = $wp_query->query_vars[‘paged’] : $current = 1;
- $pagination = array(
- ‘base’ => esc_url_raw( str_replace( 999999999, ‘%#%’, get_pagenum_link( 999999999, false ) ) ),
- ‘format’ => ”,
- ‘total’ => $wp_query->max_num_pages,
- ‘current’ => $current,
- ‘show_all’ => false,
- ‘type’ => ‘plain’,
- ‘end_size’=>’1’,
- ‘mid_size’=>’3’,
- ‘prev_text’ => ‘上一页’,
- ‘next_text’ => ‘下一页’
- );
- $total_pages = $wp_query->max_num_pages;
- if( !emptyempty($wp_query->query_vars[‘s’]) )
- $pagination[‘add_args’] = array(‘s’=>get_query_var(‘s’));
- echo ‘<div class=“page_nav”><div class=“nav_wrap clearfix”>’;
- echo ‘<div class=“total”><span>第’.$current.’/’.$total_pages.’页,共</span><span class=“blue”>’.$wp_query->found_posts.'</span><span>个结果</span></div>’;
- if($total_pages>1){
- echo ‘<div class=“goto”>
- <span>跳转至：第</span>
- <input id=“page_input” type=“text” max=“‘.$total_pages.'” name=“page_num” value=“” />
- <span>页</span>
- <a href=“#” class=“go_btn”>确认</a>
- </div>’;
- }
- echo ‘<div class=“page-nav clearfix”><nav>’;
- if ( $current !=1 ) {
- echo ‘<a class=“page-numbers first” href=“‘. esc_html(get_pagenum_link(1)).'”>首页</a>’;
- }
- echo paginate_links($pagination);
- if ( $current < $total_pages ) {
- echo ‘<a class=“page-numbers last” href=“‘. esc_html(get_pagenum_link($total_pages)).'”>尾页</a>’;
- }
- echo ‘</nav></div>’;
- echo ‘</div></div>’;
- }
大家可以根据自己的需要修改上面的代码来改变输出的格式，在需要显示的位置加上<?php chenxing_pagenavi(); ?>进行调用，再以css修饰前台的布局就OK了，下面我们还要实现跳转的功能。
jquery功能代码
既然是输入页码跳转，那肯定要用到js。下面的js代码来自阿树博客，请将js代码加入到js文件中即可，当然需要jquery支持。思路很简单，就是在点击“跳转”按钮的时候，获取输入的页码，再获取任意一个页码链接，将页码数字替换掉即可。本教程的页码链接类型为：http://www.demo/******/page/4 这种，如果你的不是这种，请修改下面js里面的页码替换部分。
- jQuery(document).ready( function($){
-
- $(‘.page_nav a.go_btn’).on(‘click’,function(event){
- event.preventDefault();
- page_input = $(‘#page_input’);
- page_max = page_input.attr(‘max’);
- if(page_input.val()==”){
- alert(‘请输入页码’);
- return false;
- }
- if((page_input.val()<1) || (page_input.val()>page_max)){
- alert(‘请输入1至’ + page_max + ‘之间的数字’);
- return false;
- }
- page_links = $(‘.page-nav a’).eq(1).attr(‘href’);
- go_link = page_links.replace(/\/page\/([0-9]{1,})/g, ‘/page/’+page_input.val());
- location.href = go_link;
- });
- $.fn.onlyNum = function onlyNum() {
- $(this).keypress(function (event) {
- var eventObj = event || e;
- var keyCode = eventObj.keyCode || eventObj.which;
- if ((keyCode >= 48 && keyCode <= 57))
- return true;
- else
- return false;
- }).focus(function () {
-
- this.style.imeMode = ‘disabled’;
- }).bind(“paste”, function () {
-
- var clipboard = window.clipboardData.getData(“Text”);
- if (/^\d+$/.test(clipboard))
- return true;
- else
- return false;
- });
- };
-
- $(‘#page_input’).onlyNum();
- });
这段jQuery已经集成了对应的分页跳转功能以及让输入框只能输入数字的限制，这样用户体验应该会比较棒。
