2026, 새로운 도약을 시작합니다.

제이쿼리 데이터테이블 select option 추가 채택완료

데이터테이블 사용하고 있고 리스트들은 표기하는데 성공하였습니다 근데 문제는 DB에있는 값에 따라 select option 상태를변경하고싶습니다

Copy


'columns':[

            { data : null,

              render : function(data, type, row){ //render = data에서 변화를 줄때 사용하는 함수

                return ++ i;

              }

            },

            { data: 'wr_subject'},

            { data: 'wr_1'},

            { data: 'wr_2'},

            { data: 'wr_3'},

            { data: 'wr_4'},

            { data: null},

            { data: 'wr_6'},

            { data: 'wr_id',

                render : function(data,type,row){

                var btn = ``;

                btn += `수정`

                return btn;

                }

            },    

 

            ],

저 data:null 자리에 select option기능을 넣어주고싶은데 어떻게 해야할지 모르겠습니다ㅠㅠㅠ 밑에 btn처럼 해야하는건지... 방법좀 알려주세요

답변 1개

채택된 답변
+20 포인트

대략적으로 다음과 같이 해 볼 수 있을 것 같습니다.

select 옵션을 추가하고 해당 옵션의 상태를 DB에 있는 값에 따라 선택하려면 columns 옵션 내에서 render 함수를 사용하여 각 셀의 내용을 변경 하면 될 것 같네요.

참고하셔서 원하시는 로직으로 구현 하시면 되지 않을까 합니다.

Copy


'columns': [

    { 

        data: null,

        render: function (data, type, row, meta) {

            return meta.row + 1;

        }

    },

    { data: 'wr_subject' },

    { data: 'wr_1' },

    { 

        data: 'wr_3', 

        render: function(data, type, row) {

            var options = ['Option 1', 'Option 2', 'Option 3']; // 옵션 목록

            var select = '';

            

            for (var i = 0; i  options.length; i++) {

                var selected = (data === options[i]) ? 'selected' : '';

                select += '' + options[i] + '';

            }

            

            select += '';

            return select;

        }

    },

    { data: 'wr_4' },

    { data: 'wr_6' },

    { data: null },

    { 

        data: 'wr_id',

        render: function(data, type, row) {

            var btn = '수정';

            return btn;

        }

    },    

],
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고