Web/front-end
[DataTables] 내부에 버튼 만들기
hjkongkong
2022. 5. 30. 21:04
DataTables 내부에 버튼 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var table = $('#dataTable3').DataTable({
select: true,
data: tableDataList,
"columns": [{
data: "name"
},
{
data: "age"
},
{
data: "office"
},
{
data: null,
render: function(data, type, row) {
var myBtnElem = "<button id='myBtn' type='button' data-toggle='buttons' aria-pressed='false' autocomplete='off' class='btn btn-outline-primary btn-sm' onClick='myFunc(\"" + data.name + "\",\"" + data.age + "\",\"" + data.office + "\")'>버튼</button>";
return myBtnElem;
}
}
],
rowCallback: function(row, data) {
var str = data.mouseoverComment.replace("<br>", "\n");
$(row).attr('title', str);
}
});
|
cs |
render을 이용해서 만들었다.
|
1
2
3
4
5
6
|
function myFunc(name, age, office) {
console.log(name + "/"+ age+"/"+office);
}
|
cs |
참고 :
https://datatables.net/reference/option/columns.render
https://datatables.net/forums/discussion/comment/166893/#Comment_166893
버튼이 하나 눌린다면 기존에 눌렀던 버튼의 active를 제거
(버튼 클릭시 다른 버튼들 active 제거)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).on("click", "button[id='myBtn']", function() {
$(document).on('click', '#myBtn', function(e) {
e.stopImmediatePropagation(); //click 이벤트가 여러번 실행되는 현상이 발생 방지
const elems = document.querySelectorAll("#myBtn");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
e.target.classList.add("active");
});
});
|
cs |
참고 :
https://m.blog.naver.com/dbjina/221124483583
https://stackoverflow.com/questions/22270664/how-to-remove-a-class-from-elements-in-pure-javascript
++ 참고로 id로 값을 가져오기때문에 getElementById를 사용하는 것이 querySelector을 사용하는 것보다 빠르다..
getElementById의 반환값은 HTMLCollection, querySelectorAll의 반환값은 NodeList