jqGrid 페이징 예제

그리드를 사용하면 빠질 수 없는 페이징

맨날하면서 맨날 까먹기때문에 정리 해놓는다.

html 영역

<table id="jqGrid"></table>
<div id="pager"></div>

javascript 영역

$("#jqGrid").jqGrid({
    url: '/services/data/dataList',
    mtype: "GET",
    styleUI : 'Bootstrap',
    datatype: "json",
    jsonReader: {
        root : "rows",  // list 이름
        page :  "page",
        records:  "records",
        total : "total"
    },
    rowNum:10,
    rowList:[10,20,30],
    rownumbers: true,
    colModel: jqGridForm.colModel,
    viewrecords: true,
    height: 500,
    width: 1000
    pager: "#pager",
    pgbuttons: true,
    pginput : true,
    shrinkToFit: true,
    sortable: false,
    loadComplete : function(data){
 
    },onPaging: function (pgButton) {
        var gridPage = $("#jqGrid").getGridParam("page");
        var totalPage = $("#jqGrid").getGridParam("total");
 
        if(pgButton == "next"){            // 다음 페이지
            if(gridPage < totalPage){
                gridPage += 1;
            }else{
                gridPage = page;
            }
        } else if (pgButton == "prev") {    // 이전 페이지
            if(gridPage > 1){
                gridPage -= 1;
            }else{
                gridPage = page;
            }
        } else if (pgButton == "first") {    // 첫 페이지
                gridPage = 1;
        } else if (pgButton == "last") {    // 마지막 페이지
            gridPage = totalPage;
        } else if (pgButton == "user") {    // 사용자 입력 페이징 처리
            var nowPage = Number($("#pager .ui-pg-input").val());
            // 입력한 값이 총 페이지수보다 크다면 수행
            if (totalPage >= nowPage && nowPage > 0) {
                gridPage = nowPage;
            }else{
                $("#pager .ui-pg-input").val(page);
                gridPage = page;
            }
        } else if(pgButton == "records"){
            gridPage = 1;
        }
 
        $("#jqGrid").setGridParam("page", gridPage);
 
        $("#jqGrid").setGridParam({
            postData    : jqGridForm.setParam()
        });
    }
});

jqGrid 페이징 아주 귀찮다.

onPaging 이벤트에서 따로 설정해주어야한다.

(pager 속성 꼭 지정해야함)

특히나 사용자가 input에 값을 넣을 때 주의.

input값을 직접 가져와야한다.

jqGrid에서 담고 있는 값 쓰지 말자.

(만약 입력받고 싶지 않다면 pginput:false로 주면 된다)