[자바스크립트 js / 실무 기록] ajax DataTable 사용 시 success는 complete로 사용하기 / 특정 객체 제외하고 리턴하기 / 배열 인덱스 번호 매기기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는

제가 회사에서 작업을 하면서 사용했던 dataTable의 기능에 대해 공유하려 합니다.

자바스크립트 혹은 제이쿼리로 dataTable을 구축할 때 유용하게 사용될 내용이니

이 글을 읽으시는 분들에게 도움이 되길 바라며 적어보겠습니다!

 

// 로 표시된 주석에 코드에 대한 설명을 간략하게 적어놨으니 참고하시면서 코드를 읽어주세요 :)

 

table = $('#ownerlist').DataTable({
                    ajax: {
                        url: "API 주소"
                        type: "GET",
                        dataType: "JSON",
                        complete: function (data) {
                            info = data['responseJSON']
                            console.log('데이터 확인', info);
                            
                            
                            // 이렇게 success 대신 complete 사용해야 출력 가능.

                        },
                        dataSrc: function (res) {
                            var data = res.data;
                            var result = []
                            
                            
                            // 상태가 waiting인 객체 빼고 리턴하기
                            for (let i = 0; i < data.length; i++) {
                                if ( data[i].status == 'waiting' ) {
                                    continue;
                                }
                                result.push(data[i])
                            }

			// 배열에 인덱스 번호 매기기 (테이블에 인덱스 보여지게)
                            for (let i = 0; i < data.length; i++) {
                                data[i].index = i + 1
                                // console.log(data[i])
                            }                            
                            return result
                        }
                    },
                    pageLength: 10,
                    lengthChange: false,
                    info: false,
                    paging: false,
                    ordering: false,
                    searching: false,
                    columns: [
                        { title: '번호', data: "index" },
                        { title: '아이디', data: "phone" },
                        { title: '점주명', data: "name" },
                        { title: '점포명', data: "store" },
                        { title: '필수', data: "necessary" },
                        { title: '선택', data: "selection" },
                        { title: '퀴즈', data: "quiz" },
                        { title: '설문', data: "survey" },
                        {
                            title: '상태', data: "status",
                            render: function (data) {
                                if (data == "not applied") {
                                    // 미신청
                                    return '<p class="statebar state-none">미신청</p>'
                                } else if (data == "not completed") {
                                    // 미수료
                                    return '<p class="statebar state-ing">미수료</p>'
                                } else if (data == "completed") {
                                    // 수료
                                    return '<p class="statebar state-complete">수료</p>'
                                } else if (data == "applied") {
                                    // 삭제
                                    return '<p class="statebar state-applied">승인 완료</p>'
                                }
                            }
                        }
                    ],
                })