데이터 리스트 출력방법(문자열 포멧(금액))

결과물

DB 데이터를 받아와서 테이블에 출력하는 형식이다.

 

/* SumList 페이지 만들기*/
        function MakeSumList(data) {
            
            $(".SegmentList_Active_tr").remove();
            for (var i = 0; i < data.rows.length; i++) {
                var tr = $("<tr />").attr({ "class": "SegmentList_Active_tr" }).css("cursor", "pointer");
                //리스트 번호
                var td = $("<td />").attr({ "class": "Bchart4_1" });
                td.text(data.rows[i].No);
                tr.append(td);
                
                var td1 = $("<td />").attr({ "class": "barline_1" });
                tr.append(td1);
                //고객사명
                var td2 = $("<td />").attr({ "class": "Bchart4_1" });
                var span = $("<span />");
                var a = $("<a />");
                a.text(data.rows[i].cstName);
                a.attr("value", data.rows[i].cstNo);
                a.bind("click", function () { Customer_Manage($(this).val()); });
                span.append(a);
                td2.append(span);
                tr.append(td2);

                var td3 = $("<td />").attr({ "class": "barline_1" });
                tr.append(td3);
                //사업자번호
                var td4 = $("<td />").attr({ "class": "Bchart4_1" });
                td4.text(data.rows[i].bizNo);
                tr.append(td4);

                var td5 = $("<td />").attr({ "class": "barline_1" });
                tr.append(td5);
                //연락처
                var td6 = $("<td />").attr({ "class": "Bchart4_1" });
                td6.text(data.rows[i].phone);
                tr.append(td6);


                var td7 = $("<td />").attr({ "class": "barline_1" });
                tr.append(td7);
                //파트너사명
                var td8 = $("<td />").attr({ "class": "Bchart4_1" });
                td8.text(data.rows[i].ptName);
                tr.append(td8);

                var td9 = $("<td />").attr({ "class": "barline_1" });
                tr.append(td9);
                //발주총액
                var td10 = $("<td />").attr({ "class": "Bchart4_1" });
                //td10.text(data.rows[i].sumSellAmount);
                var totsumSellAmount = data.rows[i].sumSellAmount;
                if (totsumSellAmount > "0") {
                    totsumSellAmount = totsumSellAmount.replace(/,/g, '');
                }
                td10.text(totsumSellAmount.format());
                tr.append(td10);

                $("#Tbl_SegmentList").append(tr);
            }
        }

한줄 한줄 변수를 선언해서 tr에 추가하고 최종적으로 테이블에 추가하는 방식이다.

td10 의 경우 발주 총액을 받아오는 부분인데 금액의 경우 천 단위로 변경하기 위해서 format 함수를 사용하였다.

 

Number.prototype.format = function () {
    if (this == 0) return 0;
    var reg = /(^[+-]?\d+)(\d{3})/;
    var n = (this + '');
    while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2');
    return n;
};

// 문자열 타입에서 쓸 수 있도록 format() 함수 추가 
String.prototype.format = function () {
    var num = parseFloat(this);
    if (isNaN(num)) return "0";
    return num.format();
};

천단위 구분하는 형식은 자주 사용하므로 js파일로 따로 생성하여 필요할 때 가져가서 사용하면 된다.

 

String 형식으로 받아왔을 경우 Int형식으로 파싱하여 number 프로토타입으로 넘겨준다.

 

/* SumList 페이지 만들기2*/
        function MakeSumList_S(data) {
            $(".SegmentList_Active_tr").empty();
            let html = "";
            let totsumSellAmount = "";
            for (var i = 0; i < data.rows.length; i++) {
                totsumSellAmount = data.rows[i].sumSellAmount;
                if (totsumSellAmount > "0") {
                    totsumSellAmount = totsumSellAmount.replace(/,/g, '');
                }

                html += `<tr class="SegmentList_Active_tr" style="cursor:pointer;" onclick="Customer_Manage(${data.rows[i].cstNo});">`;
                html += `<td class="Bchart4_1">${data.rows[i].No}</td><td class="barline_1"></td>`;
                html += `<td class="Bchart4_1"><span><a>${data.rows[i].cstName}</a></span></td><td class="barline_1"></td>`;
                html += `<td class="Bchart4_1">${data.rows[i].bizNo}</td><td class="barline_1"></td>`;
                html += `<td class="Bchart4_1">${data.rows[i].phone}</td><td class="barline_1"></td>`;
                html += `<td class="Bchart4_1">${data.rows[i].ptName}</td><td class="barline_1"></td>`;
                html += '<td class="Bchart4_1">'+totsumSellAmount.format()+'</td><td class="barline_1"></td>';
                html += `</tr>`;
            }
            $("#Tbl_SegmentList").append(html);
        }

두번째 방법은 html 이라는 변수를 선언하고 변수에 문자들을 더하는 형식으로 만들어준다.

나는 두번째 방법이 직관적이고 편해서 주로 사용한다.