使用带有顶级工具栏的免费 jqgrid:
$.extend(true, $.jgrid.defaults, {
mtype: 'POST',
iconSet: "fontAwesome" ,
navOptions: {
position: "center"},
autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
toppager: true,
viewrecords: false,
rowList: [50, 500, 1000],
rowNum: 50,
...
按钮和寻呼机位于工具栏的左侧,呈现为内联块元素。在中心部分。使用如何将寻呼机放置到免费 jqgrid 中工具栏顶部的答案中的代码删除了顶级工具栏的左右部分
$("#grid_toppager")
.find(".ui-pg-button")
.each(function (i) {
$(this).attr({
tabindex: String(i),
role: "button"
});
});
$("#grid_toppager_left").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_center").attr("colspan", "2");
$("#grid_toppager_center").css({ width: "", "text-align": "left", "white-space": "" });
$("#grid_toppager_center").find(">.navtable").append(
$("#grid_toppager_center").find(">table.ui-pg-table")
);
$("#grid_toppager_center").find(">.navtable>table.ui-pg-table").css({display: "inline-block"});
$grid.bind("jqGridAfterGridComplete", function () {
var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
$toppager.find(".navtable").css("width", "");
});
相同的代码用于编辑具有不同行数的表。仅当有一页以上(超过 50 行)时,如何在顶级工具栏中显示 jqgrid 寻呼机?
许多表包含很少的行,并且显示寻呼机不是必需的。
如果添加了新行,分页器应自动或交替出现,用户可以刷新页面以强制分页器出现。
更新
根据 如何在单个请求上检索colmodel和数据并加快jqgrid加载,使用具有速度检索的远程分页数据
仅返回 pagesize+1 行。JSON 结果在 ASP.NET MVC4 中创建,没有记录值:
return new
{
total = rowList.Count() < rows ? page : page + 1,
page,
rows = rowList
};
p.reccount 和 p.records 始终具有相同的值,因此永远不会显示寻呼机。在这种情况下如何有条件地显示寻呼机?也许应该使用页面中的记录与页面大小进行比较?