hoony's web study

728x90
반응형

Jquery 

DataTable 을 사용하면서 이것저것하다보니 정말 부딪히는게 많은거 같습니다.
DataTable에 보면 select dropdown list를 동적으로 붙이는 일이 있어서 찾아보니 찾은 것입니다.

참고한 URL : http://live.datatables.net/yogayixa/1/edit

 

JS Bin

Sample of the bin:

live.datatables.net

위의 사이트를 참고해서 만들어봤구요. 
전 좀 다르게 구성을 했습니다.
사실 위의 사이트는 제가 이해를 못하는게 더 많아서요. 

제가 한 방식은 

코드를 가져오는 json변수를 하나 선언했구요.

let statusCdList = [];

아래에서 이것을 ajax로 받아서 할당을 했습니다.
물론 중요한것은 여기 부터 시작입니다.

{
                    targets: [6],
                    render: function (data, type, row) { 
                        let $select = $('<select class="team_status input-sm col-sm-7" > </select>', {
                           id : row.idx,
                           value : data
                        });
                        $.each(statusCdList.data, function (k, v) {
                            if(1 == 1){
                                var $option = $('<option></option>' ,{
                                    text : v.COMM_CD_NAME,
                                    value : v.COMM_CD
                                });
                                if(data == v.COMM_CD){
                                    $option.attr("selected", "selected");
                                }
                                $select.append($option);
                            }
                        });
                        // return statusCdList;
                        return $select.prop("outerHTML");
                    }
                }

위처럼 Dropdownlist를 뿌려줄때 위와 같이 해주었구요. 
제가 삽질을 한 부분은 바로 statusCdList.data였어요. 
statusCdList로 반복을 할려니 계속 오류가 나더군요. 

,initComplete : function (){
                $('#dataTable tbody').on('change', 'select.team_status', function(){
                    let changed = $(this).find(":selected").val();
                    var row = dataT.row($(this).closest('tr'));
                    var data = row.data();
                    fn_changeEvent(data.idx,changed);
                });
            }

위의 코드는 만들어진 dropdown list의 change 이벤트로 값을 받아서 처리하는 부분입니다.
DataTable에서 알아야할 것이 참 많은것 같네요.

728x90

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading