chatgpt . 조금 변형해서 쓸 예정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DataTables 예제</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Korean.json"></script>
<script>
$(document).ready(function() {
function getDefaultOptions() {
return {
paging: true,
searching: true,
ordering: true,
info: true,
autoWidth: false,
language: {
url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Korean.json"
}
};
}
function createDataTable(selector, customOptions) {
var options = getDefaultOptions();
$.extend(options, customOptions);
$(selector).DataTable(options);
}
// 일반 테이블 생성
createDataTable('#myTable1', {});
// 특별한 옵션이 필요한 테이블 생성
createDataTable('#myTable2', {
paging: false,
order: [[1, 'asc']],
columnDefs: [{
targets: 0,
visible: false
}]
});
// 스크롤 옵션을 적용한 테이블 생성
createDataTable('#myTable3', {
scrollY: "200px",
scrollCollapse: true,
paging: false
});
});
</script>
</head>
<body>
<h1>DataTables 예제</h1>
<table id="myTable1" class="display">
<thead>
<tr>
<th>이름</th>
<th>위치</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>서울</td>
<td>30</td>
</tr>
<tr>
<td>이순신</td>
<td>부산</td>
<td>45</td>
</tr>
</tbody>
</table>
<table id="myTable2" class="display">
<thead>
<tr>
<th>이름</th>
<th>위치</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>박문수</td>
<td>인천</td>
<td>25</td>
</tr>
<tr>
<td>정약용</td>
<td>대구</td>
<td>33</td>
</tr>
</tbody>
</table>
<table id="myTable3" class="display">
<thead>
<tr>
<th>이름</th>
<th>위치</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>김유신</td>
<td>경주</td>
<td>51</td>
</tr>
<tr>
<td>신사임당</td>
<td>강릉</td>
<td>42</td>
</tr>
</tbody>
</table>
</body>
</html>
rowCallback 1,2 페이지 이동할 때마다 동작
createdRow 최초 생성시
'Lang > Javascript' 카테고리의 다른 글
| Datatables dom으로 버튼 넣으면 줄바꿈 생길 시 (0) | 2023.11.30 |
|---|---|
| goolgle maps + markerwithlabel 사용 시 infoWindow가 동작하지 않을 때 (0) | 2023.11.19 |