데이터테이블 button 클릭 후 update 채택완료

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: 'wr_id',

                render : function(data,type,row){

                var btn = ``;

                btn += `<button type="button" class="t_btn">수정</button>`

                return btn;

                }

            },

이런 식으로 해서 Datatable에는 정상적으로 DB정보들이 표기 됩니다 근데 저 수정버튼을 클릭 하게 되면

Copy
$(document).on("click",".t_btn",function(){

 let data ={

            wr_1 : ??,

            wr_2 : wr_2,

            wr_3 : wr_3,

            wr_4 : wr_4,

            wr_5 : wr_5,

            wr_6 : wr_6,

            wr_id : wr_id

        };

         console.log(data);

        if(confirm("정보를 수정하시겠습니까?")){

            $.ajax({

                type:"POST",

                url:URL 생략,

                data: data,

               

                success: function(res){

                    console.log(res);

                },

                error : function(){},

                });

이렇게 ajax페이지로 넘기려고합니다 ㅠ 

ajax페이지에 넘길 data를 어떻게 줘야할지 몰라 질문드립니다 제발 알려주세요

답변 1개

채택된 답변
+20 포인트

필요한 데이터들이 정상적으로 DB에 저장되어있다고 가정할때 다음과 같이 해볼 수 있을 것 같습니다.

 

Copy
$(document).on("click", ".t_btn", function () {
  var row = $(this).closest("tr");
  var rowData = dataTable.row(row).data();
  var wr_id = rowData.wr_id;
  var wr_1 = rowData.wr_1;
  var wr_2 = rowData.wr_2;
  var wr_3 = rowData.wr_3;
  var wr_4 = rowData.wr_4;

  var data = {
    wr_id: wr_id,
    wr_1: wr_1,
    wr_2: wr_2,
    wr_3: wr_3,
    wr_4: wr_4,
    // ... (다른 필드도 추가)
  };

  if (confirm("정보를 수정하시겠습니까?")) {
    $.ajax({
      type: "POST",
      url: "URL 생략",
      data: data,
      success: function (res) {
        console.log(res);
      },
      error: function () {
        // 오류 처리 로직
      },
    });
  }
});

"dataTable"은 생성한 DataTables 객체를 가리키며, "URL 생략" 부분은 실제 서버 엔드포인트로의 URL로 수정하시면 됩니다.

 

참고하셔서 원하시는 형태로 작업하시면 되지 않을까 합니다.

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

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

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

로그인
🐛 버그신고