티스토리 뷰



DataTables 를 이용해서 테이블을 만든 후 복사하기/엑셀로 저장하기/PDF로 저장하기/프린트 하기 버튼을 달아보자.



   buttons: [
                'copy''excel''pdf''print'
            ]



부분을 옵션으로 주면 간단하게 적용할 수 있다. 만약 오류가 발생되거나 아무 버튼도 노출되지 않는다면 필요한 js파일을 모두 정상적으로 불러 왔는지 체크해볼것.



<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> 

<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> 

<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>





결과물 (좌측 상단의 버튼들)





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
83
84
85
86
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
 
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
 
</head>
<body>
 
<div style="width:800px;margin:40px auto 0">
    <table id="example" class="display" width="100%"></table>
</div>
 
<script type="text/javascript">
    var dataSet = [
        [ "Tiger Nixon""System Architect""Edinburgh""5421""2011/04/25""$320,800" ],
        [ "Garrett Winters""Accountant""Tokyo""8422""2011/07/25""$170,750" ],
        [ "Ashton Cox""Junior Technical Author""San Francisco""1562""2009/01/12""$86,000" ],
        [ "Cedric Kelly""Senior Javascript Developer""Edinburgh""6224""2012/03/29""$433,060" ],
        [ "Airi Satou""Accountant""Tokyo""5407""2008/11/28""$162,700" ],
        [ "Brielle Williamson""Integration Specialist""New York""4804""2012/12/02""$372,000" ],
        [ "Herrod Chandler""Sales Assistant""San Francisco""9608""2012/08/06""$137,500" ],
        [ "Rhona Davidson""Integration Specialist""Tokyo""6200""2010/10/14""$327,900" ],
        [ "Colleen Hurst""Javascript Developer""San Francisco""2360""2009/09/15""$205,500" ],
        [ "Sonya Frost""Software Engineer""Edinburgh""1667""2008/12/13""$103,600" ],
        [ "Jena Gaines""Office Manager""London""3814""2008/12/19""$90,560" ],
        [ "Quinn Flynn""Support Lead""Edinburgh""9497""2013/03/03""$342,000" ],
        [ "Charde Marshall""Regional Director""San Francisco""6741""2008/10/16""$470,600" ],
        [ "Haley Kennedy""Senior Marketing Designer""London""3597""2012/12/18""$313,500" ],
        [ "Tatyana Fitzpatrick""Regional Director""London""1965""2010/03/17""$385,750" ],
        [ "Michael Silva""Marketing Designer""London""1581""2012/11/27""$198,500" ],
        [ "Paul Byrd""Chief Financial Officer (CFO)""New York""3059""2010/06/09""$725,000" ],
        [ "Gloria Little""Systems Administrator""New York""1721""2009/04/10""$237,500" ],
        [ "Bradley Greer""Software Engineer""London""2558""2012/10/13""$132,000" ],
        [ "Dai Rios""Personnel Lead""Edinburgh""2290""2012/09/26""$217,500" ],
        [ "Jenette Caldwell""Development Lead""New York""1937""2011/09/03""$345,000" ],
        [ "Yuri Berry""Chief Marketing Officer (CMO)""New York""6154""2009/06/25""$675,000" ],
        [ "Caesar Vance""Pre-Sales Support""New York""8330""2011/12/12""$106,450" ],
        [ "Doris Wilder""Sales Assistant""Sidney""3023""2010/09/20""$85,600" ],
        [ "Angelica Ramos""Chief Executive Officer (CEO)""London""5797""2009/10/09""$1,200,000" ],
        [ "Gavin Joyce""Developer""Edinburgh""8822""2010/12/22""$92,575" ],
        [ "Jennifer Chang""Regional Director""Singapore""9239""2010/11/14""$357,650" ],
        [ "Brenden Wagner""Software Engineer""San Francisco""1314""2011/06/07""$206,850" ],
        [ "Fiona Green""Chief Operating Officer (COO)""San Francisco""2947""2010/03/11""$850,000" ],
        [ "Shou Itou""Regional Marketing""Tokyo""8899""2011/08/14""$163,000" ],
        [ "Michelle House""Integration Specialist""Sidney""2769""2011/06/02""$95,400" ],
        [ "Suki Burks""Developer""London""6832""2009/10/22""$114,500" ],
        [ "Prescott Bartlett""Technical Author""London""3606""2011/05/07""$145,000" ],
        [ "Gavin Cortez""Team Leader""San Francisco""2860""2008/10/26""$235,500" ],
        [ "Martena Mccray""Post-Sales support""Edinburgh""8240""2011/03/09""$324,050" ],
        [ "Unity Butler""Marketing Designer""San Francisco""5384""2009/12/09""$85,675" ]
    ];
 
    $(document).ready(function() {
        $('#example').DataTable( {
            dom : 'Bfrtip',
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ],
            buttons: [
                'copy''excel''pdf''print'
            ]
        } );
    } );
</script>
 
</body>
</html>
 
cs


댓글
Kakao 다음웹툰 / 웹표준 및 ft기술, 웹접근성 / 세아이 아빠, 제주 거주 중..
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday