Kendo - KendoGrid (Jquery) 그리드(테이블) 페이징 처리 - paging (3)

 

지난 글(template)에 이어서 이번 글에서는 kendo Grid 페이징 처리에 대해서 알아보자.
https://hanke-r.tistory.com/215

Kendo - KendoGrid (Jquery) 그리드(테이블) 이벤트 처리 - template (3)

2줄만 추가하면 깔끔하게 페이징 처리가 된다.

 

var dataSource = new kendo.data.DataSource({
    data : data,
    pageSize: 5
})

$("#grid").kendoGrid({
    dataSource : dataSource,
    pageable : true,
    columns: [
        {
            field: "ID",
            title: "ID",
            width: 100,
            attributes: { style: "text-align: center" },
        },
        {
            field: "Name",
            title: "이름",
            width: 100,
            attributes: { style: "text-align: center" },
            template : function(data){
                return "<span onclick='fn_alertName(\""+ data.Name +"\")'>"+ data.Name+"</span>"
            }
        },
        {
            field: "comment",
            title: "가입인사",
            template: function(data){
                console.log(data);
                // 내용

                if(data.Name == "Hanker"){
                    return "<span style='color: blue; font-weight: bold'>" + data.comment + "</span>";
                } else {
                    return data.comment;
                }
            }
        },
        {
            field: "Date",
            title: "가입일",
            width: 250,
            attributes: { style: "text-align: center" },
        }
    ],
})

위 코드에서 추가된 줄은

- pageSize : 5            // 5개만 보여주기

- pageable : true       // paging 설정 

 

위 두줄을 추가해주면 페이징 처리가 된다.

 

 

 

 

 

 

끝.