DataTables 버튼 (복사, pdf, 엑셀, 프린트 버튼)

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>
 
Colored by Color Scripter cs
다음글 • 2022-10-14
201 . [PHP] 반복문 수행중 중단 / 종료하는 방법 (Break, Return, exit, die)
PHP에서 반복문(예를 들어 for, foreach, while 등) 을 중단하거나 종료하는 방법으로는 주로 break, return, exit, die 키워드를 사용합니다. 각 키워드가 ...