ASP.NET MVC에서 Linq to Sql 또는 EF(Entity Framework)를 이용해 DataTables를 개발하는 방법에 대해 작성하려 한다.
이 글에서는 Linq to Sql로 설명 하지만, 구현하는 방법은 EF도 크게 다르지 않을것 같다는 생각이 든다.


DataTables를 간단하게 설명하자면 데이터를 테이블로 표현할때 사용되는 jquery 라이브러리로 페이징, 정렬, 검색, 커스터마이징 등 다양한 기능을 지원하여 손쉽게 개발할 수 있다.


Linq to SqlEF의 아주 간단한 차이점을 말하자면 아래와 같다.

1. Linq to Sql은 MS-SQL만 지원하지만 EF는 대부분의 DB엔진을 지원한다.
2. Linq to Sql은 DB First이며, EF는 DB First, Code First 선택 가능하다. (DB First, Code First에 대한 개념은 인터넷을 찾아보세요.)


구현에 앞서 Linq to Sql의 간단한 사용법을 먼저 확인하고 넘어가자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// DB Context 객체 선언
dbDataContext db = new dbDataContext();
 
// 다음과 같은 Query를 Linq로 표현해보자.
// Account라는 테이블에서 전화번호 1111을 포함한 홍길동이라는 사람을 찾는다.
// SELECT * FROM Account WHERE name = '홍길동' AND phone like '%1111%'
// Linq를 사용하는 방법은 크게 두가지가 있다.
 
// 1. 쿼리 형식 (자세한 사용법은 인터넷을 찾아보세요.)
 
// 반환형은 IQueryable<Account>이다.
var data = from d in db.Account
           where d.name == "홍길동" && d.phone.Contains("1111")
           select d;
 
// 2. 함수 형식
// 반환형은 위와 같이 IQueryable<Account>이다.
var data = db.Account.where(a => a.name == "홍길동" && a.phone.Contains("1111"));
cs


DataTables 공식 홈페이지


1. Quick Start
    1) Html을 작성한다.
    2) DataTables의 Javascript, CSS 파일을 CDN 혹은 다운로드 하여 참조 한다.
    3) Javascript 소스에서 DataTables 초기화

* 아래 소스 참조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- DataTables CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
 
<table id="table_1">
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>Row 1 Data 3</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>Row 2 Data 3</td>
        </tr>
        <tr>
            <td>Row 3 Data 1</td>
            <td>Row 4 Data 2</td>
            <td>Row 5 Data 3</td>
        </tr>
    </tbody>
</table>
 
<script>
    $(document).ready( function () {
        $('#table_1').DataTable();
    });
</script>
cs


! DataTables 사용시 데이터를 어디서 처리하는지에 따라 Client-side와 Server-side로 기능을 구현할 수 있다.


2. Client-side processing
    1)  Client-side의 경우 Quick Start와 동일하다. 
        페이지가 열렸을때 Html Table을 작성한 뒤 Script로 초기화만 하면 끝난다.

* 아래 소스 참조 (ASP.NET MVC Razor 구문을 사용하였다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- DataTables CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
 
<table id="table_1">
    <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
            <th>col3</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>item.name</td>
                <td>item.phone</td>
                <td>item.address</td>
            </tr>
        }
    </tbody>
</table>
 
<script>
    $(document).ready( function () {
        $('#table_1').DataTable();
    });
</script>
cs


3. Server-side processing (참조 https://datatables.net/manual/server-side)
    1) Server-side의 경우 DataTables의 옵션으로 쉽게 구현이 가능하다.
    2) Server딴에 데이터를 얻어오기 위한 REST를 구현해야한다.


* 구현시 주의 사항
    -> ajax 옵션에서 컬럼을 지정할 수 있다.
    -> 컬럼을 지정하지 않을 시 컬럼 순서대로 데이터가 매칭된다.

* 아래 소스 참조 (Client딴)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- DataTables CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
 
<table id="table_1">
    <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
 
<script>
    $(document).ready( function () {
        $('#table_1').DataTable({
            serverSide: true// Server-side 활성화
            ajax: {
                url: '@Url.Action("GetAccounts")'// 데이터를 얻어오기 위한 EndPoint Url
                type: 'POST'
            },
            columns: [
                { "data""name" },
                { "data""phone" },
                { "data""address" }
            ]
        });
    });
</script>
 
cs


* 아래 소스 참조 (Server딴)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
[HttpPost]
public async JsonResult GetAccounts(DataTablesModel model)
{
    try
    {
        using(dbDataContext db = new dbDataContext())
        {
            var accounts = from d in db.Account
                           where d.name.Contains(model.search.value) && d.phone.Contains(model.search.value)
                           select new 
                           {
                                name = d.name,
                                phone = d.phone,
                                address = d.address
                           };
 
 
            //정렬은 직접 구현해보세요.
            // hint
            // 1. model.order[].column의 값이 정렬할 column 명입니다.
            // 2. model.order[].dir의 값이 정렬 방법입니다. desc or asc
            // 3. 멀티 정렬도 가능합니다.
            
            // 페이징 기능 구현
            int pageLength = model.length == -1 ? accounts.Count() : model.length;
            accounts = accounts.Skip(model.start).Take(pageLength);
 
            return Json(new
            {
                draw = model.draw,
                recordsTotal = db.Account.Count(),
                recordsFiltered = accounts.Count(),
                data = accounts, // 이때 DB에서 Query를 실행하여 데이터를 가져온다.
                error = false
            });
        }
    }
    catch(Exception ex)
    {
        return Json(new
        {
            draw = model.draw,
            recordsTotal = 0,
            recordsFiltered = 0,
            data = "",
            error = ex.ToString()
        });        
    }
}
 
#region DataTables Request Model
public class DataTablesModel
{
    public int draw { get; set; }
    public int start { get; set; } // 시작 페이지
    public int length { get; set; } // 페이지에 보여질 Row의 수
    public List<Column> columns { get; set; }
    public Search search { get; set; }
    public List<Order> order { get; set; }
}
 
public class Column
{
    public string data { get; set; }
    public string name { get; set; }
    public bool searchable { get; set; }
    public bool orderable { get; set; }
    public Search search { get; set; }
}
 
public class Search
{
    public string value { get; set; }
    public string regex { get; set; }
}
 
public class Order
{
    public int column { get; set; }
    public string dir { get; set; }
}
#endregion
cs


끗.

+ Recent posts