`

模仿 jqgrid 分页 输入页码 点击回车键进行跳转

 
阅读更多

其实这段代码也就是jqgrid的源码

    

      比如输入框为 <input type="text" id="inputPage" maxlength="7" size="2" value=""/>

 

       那么输入页码的处理代码如下:

        

$('#inputPage').keypress( function(e) {
			var key = e.charCode || e.keyCode || 0;
			if(key === 13) {//回车键
				var tPage = getTotalPage();//获取总页数
				var page =1;
				if ($(this).val()>0){
					page = ($(this).val()>=tPage) ? tPage:$(this).val();
				}else{
					page = 1;
				}
				gotoPage(page);//跳转请求数据
                                
                                //因为我这个页面在iframe里,我将当前页码放到父页面中,刷新iframe里面页面的时候,再将这个输入页码放回到输入框内进行显示,currentPage 是隐藏输入框在父页面中
				window.parent.document.getElementById('currentPage').value=page;
				//return false;
			}
			//return this;
		});

 

 

0
7
分享到:
评论

相关推荐

    JQGrid 分页

    在这个特定的"JQGrid分页"项目中,我们关注的是如何实现数据的分页功能,这在处理大量数据时尤为重要,因为它能提高网页的加载速度和用户体验。 首先,我们需要理解JQGrid分页的基本概念。在JQGrid中,分页通常分为...

    JqGrid分页

    **JqGrid分页详解与EF整合应用** JqGrid是一款功能强大的JavaScript表格插件,它允许在Web页面上创建动态、交互式的网格视图。JqGrid支持大量的功能,包括数据分页、排序、搜索、编辑等,是前端展示大量数据的优秀...

    jqgrid分页参数

    ### jqGrid 分页参数详解 #### 一、引言 在Web应用开发中,数据展示是必不可少的一个环节。为了提供更好的用户体验以及优化服务器资源利用,前端分页技术得到了广泛的应用。其中,`jqGrid`是一款非常受欢迎的jQuery...

    jqgrid加载本地数据并且分页例子

    在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从本地数据源加载数据并进行分页显示。 首先,要理解jqGrid的工作原理。它基于jQuery库,通过HTML表格元素来渲染数据,并通过AJAX从...

    jqGrid 做的表格分页

    ; charset=utf-8"&gt; &lt;title&gt;Insert title here ...&lt;link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js" &gt;&lt;/script&gt; ...

    jqgrid分页代码

    根据提供的信息,我们可以了解到这是一段关于使用 Java 和 JqGrid 实现分页功能的后台代码。接下来,我们将深入分析这段代码所涉及的关键知识点,并详细解释这些知识点。 ### 关键知识点 #### 1. JqGrid简介 ...

    JqGrid 纯Json自带分页功能

    loadonce: true, // 如果为true,JqGrid会缓存所有数据并进行本地分页 colModel: [ // 列定义 { name: 'col1', index: 'col1', width: 80 }, { name: 'col2', index: 'col2', width: 90 }, // 其他列定义... ]...

    JQGrid本地数据分页

    用户可以通过点击表格上方的排序图标进行列排序,通过底部的分页栏切换页码,JQGrid会根据设定的参数自动处理这些操作。 为了增强用户体验,我们还可以添加一些自定义的事件处理函数,例如,当用户改变分页大小时...

    jqGrid分页

    **jqGrid分页详解** jqGrid是一款非常流行的JavaScript表格插件,它允许用户在Web页面上展示大量数据并实现高效的数据分页、排序和搜索功能。这个压缩包中包含了一系列必要的资源,包括jar包、CSS文件和JS文件,...

    aspx jqgrid 分页、excel导出最佳实践

    **jqGrid分页** jqGrid的分页功能是通过设置`pager`属性和相关的分页参数来实现的。在ASP.NET页面中,首先需要在HTML部分创建一个jqGrid,并指定分页区域: ```html &lt;table id="grid"&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/...

    Spring MVC 分页组件和JqGrid导出

    在本文中,我们将深入探讨Spring MVC分页组件和JqGrid如何协同工作,实现高效的数据展示和导出功能。Spring MVC作为Java企业级应用的主流框架,提供了强大的MVC架构支持,而JqGrid则是一个功能丰富的jQuery插件,专...

    jqgrid本地数据分页

    本地数据分页是指在客户端进行数据的分页处理,而不是将所有数据一次性从服务器获取。这种模式适用于数据量不大,或者对实时性要求不高的场景。在jqGrid中,本地数据分页可以通过设置`datatype`为`local`来实现。...

    jqgrid分页和footer结算

    【jqGrid分页与Footer结算详解】 jqGrid是一款强大的JavaScript数据网格组件,广泛应用于Web开发中,用于展示和管理大量数据。它提供了丰富的功能,包括数据分页、排序、搜索和编辑等。在本篇文章中,我们将深入...

    基于jqgrid实现树形菜单分页列表查询

    "基于jqgrid实现树形菜单分页列表查询"这一主题,旨在创建一个既能展示层级结构又能进行高效分页查询的表格组件。jqGrid是一款强大的jQuery插件,它提供了丰富的功能,如数据网格、分页、排序、过滤、编辑等,同时...

    jqgrid加载本地数据分页Demo

    当用户点击页码或改变每页记录数时,jqGrid会自动处理数据的加载和显示。`rowNum`参数定义了每页默认显示的记录数,`rowList`则提供了用户可选择的不同记录数选项。 5. **事件监听** jqGrid提供了一系列事件回调,...

    jQuery中jqGrid分页实现代码

    以下是对标题和描述中提到的jqGrid分页实现的详细说明。 首先,我们来看一下前端部分的HTML和JavaScript代码。在HTML部分,你需要引入jqGrid所需的CSS和JavaScript文件,包括jQuery库、jqGrid主文件和主题样式。在`...

    关于jqGrid中的分页

    jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,包括数据的展示、排序、编辑和分页等功能。在本例中,我们探讨的是如何在 jqGrid 中实现分页功能,以及它与后端 Java 服务的交互。 首先,jqGrid 在默认...

    Struts2JQGrid java版本分页

    在这个Java版本的JQGrid分页中,通常会采用服务器端分页的方式,因为Struts2可以方便地处理这些请求。 在实际应用中,Struts2JQGrid的实现步骤可能包括以下几点: 1. 配置Struts2:在项目的配置文件`struts.xml`中...

    jqGrid 3.5源码+DEMO+DOC

    - 排序:用户可以点击列头进行数据排序,支持升序和降序。 - 搜索/过滤:提供高级搜索功能,用户可以基于多种条件过滤数据。 - 编辑与操作:jqGrid支持行内编辑,用户可以直接在表格中修改数据,还提供了添加、...

    bootstrap table 分页栏修改

    - **事件监听**:监听输入框的`change`或`keyup`事件,当用户输入新的页码并按下回车键时,触发跳转操作。 - **API调用**:调用Bootstrap Table的`refresh`方法,传入用户输入的页码,实现页面的切换。 4. **调整...

Global site tag (gtag.js) - Google Analytics