728x90
반응형
<script>
$(document).ready(function () {
var table = $("#testTable").DataTable({
serverSide: true,
processing: true,
//이건 선택할때 페이지 넘겨도 선택 계속 되어있게 만드는것
ajax: {
url: '/dataTablesAjax',
// 아래는 진행 순서. 받아와야 하는게 총 갯수, 페이징,
dataSrc: function(d) {
console.log(d);
return d.data;
},
// 여기서 데이터를 보낸다.
data: function (d) {
console.log(d);
//여기서의 data 는 아래 columns의 "num" 과 같은 것.
console.log(d.columns[d.order[0].column].data, d.order[0].dir);
d.orderCol0 = d.columns[d.order[0].column].data;
d.orderDir0 = d.order[0].dir;
// 검색 데이터 (태그form의 아이디 값testTableForm) 식으로 작성
d.target = $("form#testTableForm select#target").val(); // TODO: 검색 대상 (select box)
d.searchContent = $("#testTable_filter input[type='search']")[0].value;
}
// type:"GET"
},
columns: [
{data:"num"},
{data:"title",
// 링크 걸기 지금 해야하는건 boardController 의 쿼리변경 num 이 아니라 title 로 뿌려줘야함.
render: function (data, type, row) {
if (type == "display") {
data = '<a href="/boardView?title=' + data + '">' + data + '</a>';
}
return data;
}},
{data:"content"},
{data:"id"},
{data:"date"},
{data:"hit"}
],
columnDefs: [
{
className: "text-center", targets: "_all"
}
],
dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-5'f><'col-sm-12 col-md-1'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
//여기 안에 <select id=\"target\"><option value=\"num\">num</option><option value=\"title\">title</option></select> 처럼 커스텀을 할 수 있다.
language: {
search: "<select class=\'custom-select col-sm-4\' id=\'target\'><option value=\'\'>전체</option><option value=\'num\'>Num</option><option value=\'title\'>Title</option><option value=\'content\'>Content</option><option value=\'id\'>Id</option></select>",
zeroRecords: "일치하는 데이터가 없어요...",
info: "현재 _START_ - _END_ / 총 _TOTAL_건",
lengthMenu: "한 페이지당 _MENU_ 개씩 보기",
loadingRecodes: "로딩중...",
processing: "잠시만 기다려주세요...",
infoEmpty: "0 건",
infoFiltered: "(총 _MAX_ 건중에서 필터링 됨)",
paginate: {
next: "다음",
previous: "이전",
},
select: {
rows: {
_: "[ %d 개의 행 선택됨 ]"
}
}
},
select: {
style: "multi",
selector: "td:first-child"
},
order:[
[0, "desc"]
],
buttons: [
{
className: "dt-button btn btn-dark",
id: "searchButton",
text: "검색",
}
],
initComplete: function () {
this.api().columns().every( function (e) {
if( e == 1 || e == 2) {
var column = this;
// col_name = dt_columns[Number(this[0].toString())].title
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^' + val + '$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function ( d , j ) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}
});
}
//서버사이드에선 페이지 랜더링이 안먹히나봄;;
// deferRender: true,
// rowId: "title"
});
// 바로바로 검색안되게 만드는거
$("form#testTableForm #testTable_filter input[type='search']").unbind();
// 엔터를 누르면 검색이 돌아가게 하는거 (keyCode 13번은 엔터) 테이블을 선언해주고 draw를 넘겨줘야 값을 받아줌 // 근데 여기 값은 왜 안넘어감?
$("form#testTableForm #testTable_filter input[type='search']").keyup(function(e) {
if (e.keyCode === 13) {
$("#testTable").DataTable().search(this.value).draw();
}
});
// 선택자의 구분을 명확하게 하기 위해서 table에 form 태그를 걸어준다. 나중에 꼬이면 답이 없어짐.
$(".dt-button").click(function (e) {
$("#testTable").DataTable().search($("form#testTableForm #testTable_filter input[type='search']")[0].value).draw();
});
});
</script>728x90
반응형
'Library > DataTables' 카테고리의 다른 글
| autoWidth 옵션 (0) | 2022.04.14 |
|---|---|
| 상단의 테이블 헤더가 아래 컬럼과 맞지 않을 때 (1) | 2022.01.25 |
| DataTablse server side 진심편 (0) | 2021.12.20 |
| 특정 값 선택하는 방법 (0) | 2021.11.26 |
| DataTables 다중 정렬 (0) | 2021.11.24 |
| DataTalbes Button 생성 (0) | 2021.11.23 |