jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:
<body>
...
<table id="list"></table>
<div id="gridpager"></div>
...
</body>
js代码:
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
});
不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。
导航栏的属性:
$.jgrid = {
defaults : {
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No records to view",
loadtext: "Loading...",
pgtext : "Page {0} of {1}"
},
...
}
如果想改变这些设置:
1、方法一:
jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
2、方法二:
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
emptyrecords: "Nothing to display",
...
});
导航栏的属性
属性名 |
类型 |
说明 |
默认值 |
是否可以被修改 |
lastpage |
integer |
只读属性,总页数 |
0 |
NO |
pager |
mixed |
导航栏对象,必须是一个有效的html元素,位置可以随意 |
空字符串 |
NO |
pagerpos |
string |
定义导航栏的位置,默认分为三部分:翻页,导航工具及记录信息 |
center |
NO |
pgbuttons |
boolean |
是否显示翻页按钮 |
true |
NO |
pginput |
boolean |
是否显示跳转页面的输入框 |
true |
NO |
pgtext |
string |
页面信息,第一个值是当前页第二个值是总页数 |
语言包 |
YES |
reccount |
integer |
只读属性,实际记录数,千万不能跟records 参数搞混了,通常情况下他们是相同的,假如我们定义rowNum=15,但我们从服务器端返回的记录为20即records=20,而reccount=15,表格中也显示15条记录。 |
0 |
NO |
recordpos |
string |
定义记录信息的位置,可选值:left, center, right |
right |
NO |
records |
integer |
只读属性,从服务器端返回的记录数 |
none |
NO |
recordtext |
string |
显示记录的信息,只有当viewrecords为true时起效,且记录数必须大于0 |
语言包 |
yes |
rowList |
array[] |
可以改变表格可以显示的记录数,格式为[10,20,30] |
空array[] |
no |
rowNum |
integer |
设置表格可以显示的记录数 |
20 |
yes |
viewrecords |
boolean |
是否要显示总记录数信息 |
false |
no |
|
|
|
|
|
所有这些参数都是可以修改的,比如:
<script>
...
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
...
</script>
跟翻页相关的事件只有一个:onPaging
事件名 |
参数 |
说明 |
onPaging |
pgButton |
当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值: first,last,prev,next |
分享到:
相关推荐
2. **分页**:提供分页功能,支持前后翻页、跳转到指定页及自定义每页显示行数。 3. **排序**:用户可以对列进行点击排序,支持多列排序。 4. **过滤**:内置的过滤工具允许用户根据特定条件筛选数据。 5. **编辑**...
### jqGrid的翻页导航实现方法详解 #### 一、jqGrid简介 jqGrid是一款功能强大的基于jQuery的表格插件,它可以实现数据的展示、排序、分页、搜索等多种功能。在网页应用开发中,jqGrid因其丰富的特性而受到开发者的...
jQgrid提供了翻页功能,开发者可以根据需要来配置翻页参数,以实现所需的翻页效果。 配置json jQgrid提供了配置json功能,开发者可以根据需要来配置json数据,以实现所需的数据展示效果。 方法 jQgrid提供了许多...
总的来说,解决jqGrid翻页时数据选中丢失的关键在于利用jqGrid提供的事件机制,结合自定义的数组来存储用户的选择。这样,即使数据重新加载,也能保持用户的操作状态,提高了用户体验。对于类似的前端数据管理问题,...
### jqGrid 分页参数详解 #### 一、引言 在Web应用开发中,数据展示是必不可少的一个环节。为了提供更好的用户体验以及优化服务器资源利用,前端分页技术得到了广泛的应用。其中,`jqGrid`是一款非常受欢迎的jQuery...
文件中提及了jqGrid中的一些核心概念,例如ColModel API、参数配置、自定义搜索、搜索工具栏、搜索、自定义格式化类型、格式化、自定义按钮、翻页功能、配置json、方法和事件。这些内容涉及了如何通过编程方式操作...
- 分页:jqGrid可以轻松实现数据分页,用户可以设定每页显示的数据数量,同时提供向前、向后翻页的功能。 - 排序:用户可以点击列头进行数据排序,支持升序和降序。 - 搜索/过滤:提供高级搜索功能,用户可以基于...
JQGrid 系列教程 JQGrid 是一个基于 jQuery 的表格控件,它使用 AJAX 方式与服务器端通信,能够实现多种功能,如排序、过滤、分页、编辑等。下面是 JQGrid 的一些关键特点和使用方法。 JQGrid 的特点 * 外观时髦...
- 分页:内置强大的分页功能,可以设置每页显示的记录数,用户可以轻松翻页浏览大量数据。 - 搜索过滤:提供了多种搜索过滤条件,支持快速定位和筛选数据。 - 国际化:jqGrid支持多语言,满足全球化需求。 - 自适应...
- 分页:内置分页功能,可以设置每页显示的数据数量,并提供向前向后翻页按钮。 - 排序:用户可以通过点击列头进行数据排序,支持多列排序。 - 搜索:提供高级搜索功能,可对多列数据进行条件筛选。 - 编辑:...
- **数据分页**:内置分页功能,可设置每页显示的数据量,并支持前后翻页、跳转到指定页。 - **排序**:用户可以对列进行升序或降序的排序。 - **过滤与搜索**:提供了强大的过滤和搜索功能,包括基本的文本搜索...
用户可以方便地切换不同大小的每页记录数,或者通过导航按钮来翻页。 3. 编辑功能:jqGrid提供行内编辑、弹窗编辑等多种编辑模式。在本例中,dialog弹出层被用来实现编辑功能,这样可以提供更好的用户体验,将编辑...
- **翻页**: 支持多种翻页方式,包括传统的分页导航以及更高级的无限滚动模式。 - **配置JSON**: 可以通过JSON对象的方式指定表格的各种属性和初始状态。 - **方法**: jqGrid还提供了一系列API方法,方便开发者进行...
- **pager**: 定义翻页导航栏,可以放在页面的任意位置。 - **rowNum**: 显示的记录条数。 - **rowList**: 可以改变显示记录数的下拉列表。 - **sortname**: 默认排序列。 - **viewrecords**: 是否显示总记录数。 *...
6. **pager**: 定义翻页使用的导航栏,需要指定一个有效的 HTML 元素作为容器。 7. **rowNum**: 在表格中显示的记录条数。 8. **rowList**: 一个下拉列表,允许用户选择不同的记录条数,从而动态调整每页显示的...
在翻页方面,jqGrid 提供了分页控件,用户可以选择显示多少行数据,并可以方便地浏览前后页。同时,文档还涵盖了如何处理数据加载、编辑、保存和验证的事件,以及如何使用 jqGrid 的API进行操作。 总的来说,jqGrid...
JqGrid 3.6 API 中文版 JqGrid 是一个基于 jQuery 的表格插件,提供了丰富的功能和灵活的配置选项,帮助开发者快速构建复杂的数据表格。下面是 JqGrid 3.6 API 中文版的知识点总结: jqGrid 的原理 jqGrid 是典型...
注意,由于所有数据都已加载到客户端,所以在用户翻页时,JQGrid会使用本地存储的数据来生成新的页面,而不是向服务器请求。这样可能会消耗更多的客户端资源,特别是在数据量非常大的情况下。 为了优化这种一次性...
- 翻页:配置翻页功能,包括分页显示、翻页大小设置等。 JqGrid的学习包括理解ColModelAPI、参数、事件、数据操作等核心概念。ColModelAPI允许开发者定义列的属性,比如宽度、是否可排序、是否可编辑等。通过学习...