トップレベルのツールバーを備えた無料の 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 は常に同じ値を持つため、ページャーは表示されません。この場合、条件付きでページャーを表示する方法は? ページ内のレコードとページサイズの比較を使用する必要がありますか?