M, V 그리고 C의 각방생활(10) - jqGrid를 이용한 paging과 sorting

안녕하세요. 지난 시간에는 jqGrid를 이용해서 리스트를 구현해봤습니다. 정말 맛보기였죠? :)
이번 시간은 실제 데이터베이스에서 데이터 조회, 페이징과 정렬부분을 다루도록 하겠습니다.

먼저 데이터베이스 생성

테이블 구조는 다음과 같습니다.

컬럼명	데이터 타입
dirId	int
name	nvarchar(50)
phone	nvarchar(50)
email	nvarchar(50)
speedDial	decimal(2,0)

그냥 기본세팅이죠^^;

엔터티 모델 클래스를 생성할 건데요, 자세히(?)를 원하신다면 이전 포스팅을 참고해주세요^^;
완료가 되면,

여기까지 잘 오셨죠? 저는 Entity Set Name을 TelDir에서 TelDirSet으로 변경하였습니다. 헷갈려서요^^;;

자. 이제는 본격적(?)으로 살펴볼까요? (어째.. 오늘도 맛보기일것 같은 분위기가 물~씬 풍기시죠? ㅡ,.ㅡ;)

페이징 기능을 달자

지난 뷰페이지에 pager란 id로 div 태그를 추가하겠습니다.

<div id="pager" class="scroll" style="text-align:center;"></div>

테이블 뒤에 추가하시면 됩니다.
그리고, 스크립트 부분도 수정해야겠죠?

<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: '<%= Url.Action("EntityGridData", "Home") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
colModel: [
{ name: 'dirId', index: 'dirId', width: 40, align: 'center' },
{ name: 'name', index: 'name', width: 100, align: 'left' },
{ name: 'phone', index: 'phone', width: 150, align: 'left' },
{ name: 'email', index: 'email', width: 250, align: 'left' },
{ name: 'speedDial', index: 'speedDial', width: 100, align: 'center'}],
pager: $('#pager'),
emptyrecords: "Nothing to display",
rowNum: 3,
rowList: [3, 10, 20, 50],
sortname: 'dirId',
sortorder: "desc",
viewrecords: true,
caption: '전화번호부'
});
});
</script>

추가된 부분은 굵은글씨로 표시하였습니다. 일단, grid.locale-en.js를 추가해야되더라고요^^; 디폴트로 그냥 jqGrid 스크립트를 넣을때 추가하라고 하였는데, 제가 지난 포스팅때는 빠뜨렸죠.
이런 언어 스크립트 파일에는 페이징 관련한 디폴트 값들이 들어가 있습니다.

defaults:{
recordtext:"View {0} - {1} of {2}",
emptyrecords:"No records to view",
loadtext:"Loading...",
pgtext:"Page {0} of {1}"
}

나머지 프로퍼티에 대한 설명을 드리자면,
pager는 위 이미지 보이시죠? ^^; 저렇게 레코드들을 이동할수 있게 해주는 페이징 바를 정의합니다.
저같은 경우는 $('#pager')로 jQuery 표현을 썼는데요, jqGrid의 wiki를 보니 '#pager', 'pager', jQuery('#pager') 세가지 경우가 모두 가능한데요. 앞에 두가지 방법을 추천한다네요. 흠. jQuery 변수가 내보내기, 가져오기 모듈을 이용할때 문제를 발생시킬수 있다고 합니다. 이 부분은 차츰(?) 찾아보도록 하죠;;

The definition of the pager in the grid can be done this way:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules.

emptyrecords는 말 그대로 데이터가 없을 때 표현할 문구를 나타내고요,
rowNum은 페이지에서 보여줄 레코드 갯수,
rowList는 페이지 갯수를 선택할 수 있도록 하는 셀렉트박스의 옵션들,
sortname, sortorder는 각각 정렬할 컬럼과 정렬방식(오름차순, 내림차순),
viewrecords는 토탈 레코드의 수(위 이미지에서 View 1 -3 of 5)를 표현하는 것을 허용할 것인지 여부를 나타냅니다.

이제 뷰페이지는 완성이 되었고요, 컨트롤러 손봐야겠죠?
EntityGridData() 라는 이름의 액션메쏘드를 추가하겠습니다.

[HttpPost]
public ActionResult EntityGridData(string sidx, string sord, int page, int rows)
{
// 데이터베이스 연결
MvcDbEntities _db = new MvcDbEntities();

// 페이징 변수 세팅
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows; // 3
int totalRecords = _db.TelDirSet.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

// 데이터 조회(페이징&정렬)
// sidx : dirId
// sord : desc
var dirs = _db.TelDirSet
.OrderBy("it." + sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();

var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from dir in dirs
select new
{
i = dir.dirId,
cell = new string[] {
dir.dirId.ToString(), dir.name.ToString(), dir.phone.ToString(), dir.email.ToString(), dir.speedDial.ToString()
}
}).ToArray()
};
return Json(jsonData);
}

궁금해 보이는 것이 없죠? ㅎㅎ
jqGrid가 EntityGridData를 호출할때 파라미터(sidx : dirId, sord : desc, page : 1, rows : 3)를 날립니다~~~
실행을 해보면,

너무 간단하게 페이징 기능이 완성되었습니다^^
네이게이션 기능 되고요~ 셀렉트박스로 로우 갯수 선택 기능 되고요~ No탭 클릭하시면 정렬 기능 됩니다요~

마무리요

실행화면 출력하고 보니 아직도 맛!보!기! 인것을 보면 아직 한참 멀은 듯 합니다.
더 알찬 정보로 준비하도록 하겠습니다^^
감사합니다.


참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager&s[]=paging&s[]=properties