데이터테이블 button 클릭 후 update
본문
'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정보들이 표기 됩니다 근데 저 수정버튼을 클릭 하게 되면
$(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
필요한 데이터들이 정상적으로 DB에 저장되어있다고 가정할때 다음과 같이 해볼 수 있을 것 같습니다.
$(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로 수정하시면 됩니다.
참고하셔서 원하시는 형태로 작업하시면 되지 않을까 합니다.
답변을 작성하시기 전에 로그인 해주세요.