Web/front-end

[DataTables] ajax 통신으로 데이터를 받아서 테이블에 넣기

hjkongkong 2022. 3. 16. 20:38
1
2
3
4
5
6
7
8
9
10
11
12
<div class="table-responsive">
    <table class="table table-bordered display" id="dataTable1"
    width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Start</th>
                <th>End</th>
                <th>Comment</th>
            </tr>
        </thead>
    </table>
</div>
 cs

테이블의 <tbody>를 만들어줄 것이다.

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
// dataTable1 생성
data_list = new Object();
$.ajax({
    type : "GET",
    url : "http://localhost:포트/v1/api",
    dataType : "json",
    async:false,
    error : function(XMLHttpRequest, textStatus, errorThrown){
        alert('통신 실패');
    },
    success : function(response){    
        data_list =  response;
    }
 });
 
var table1 = $('#dataTable1').DataTable({
    select: true,
    data : data_list,
    "columns": [
        { data : "Col_Name" },
        { data : "Start" },
        { data : "End" },
        { data : "Comment" }
    ]
 });
 
// select check
$('#dataTable1 tbody').on('click', 'tr', function() {
    // JavaScript 객체
    thisRow = table1.rows(this).data()[0]; 
 
    var start;
    var end;
    var textContextResult = thisRow.Col_Name+ ":";
 
    // row 가공
    if (thisRow.Start != "-") {
        start = parseInt(thisRow.Start);
        if (isNaN(start)) {
            alert("start 값 오류입니다.");
        } else {
            textContextResult += (start - 20) + "-";
        }
    }
 
 
    if (thisRow.End != "-") {
        end = parseInt(thisRow.End);
        if (isNaN(end)) {
            alert("end 값 오류입니다.");
        } else {
            textContextResult += (end + 20);
        }
    }
 
    if (thisRow.Start == "-" && thisRow.End == "-") {
        textContextResult = "";
        alert("start, end 값이 없습니다.");
    } else {
        clipBoardCopy(textContextResult);
    }
});
 
 
 cs

생성 됨

Julia:1780-28500
클립보드 결과

 

저작자표시