Library/DataTables
DataTables 커스텀 중 코드
원2
2021. 11. 19. 18:59
728x90
반응형
<%--
Created by IntelliJ IDEA.
User: everitime
Date: 2021-11-18
Time: 오후 2:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
<link/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<%-- <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>--%>
</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<h3>반갑다 데이터테이블아 ㅋ</h3>
</div>
<table class="table table-hover stripe" id="testTable">
<thead class="thead-dark">
<tr>
<th>num</th>
<th>title</th>
<th>content</th>
<th>id</th>
<th>date</th>
<th>hit</th>
</tr>
</thead>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$('#testTable').DataTable({
processing: true,
severSide: true,
ajax: {
url: '/dataTablesData',
dataSrc: ''
},
language: {
search: "검색해보거라 : ",
zeroRecords: "일치하는 데이터가 없어요...",
info: "현재 _START_ - _END_ / 총 _TOTAL_건",
lengthMenu: "한 페이지당 _MENU_ 개씩 보기",
paginate: {
next: "다음",
previous: "이전",
},
},
//각각의 열의 클래스명을 수정할 수 있다. 근데 0,0 자리 테이블 헤드까지 잡아먹는다...
columns: [
{
data: "num",
className: "table-active"
},
{data: "title"},
{data: "content"},
{data: "id"},
{data: "date"},
{data: "hit"}
]
// //한 열의 전체를 수정
// columnDefs: [
// {className: "table-success", targets: [ 1, 1 ]}
// ]
});
});
</script>
<%--<script>--%>
<%-- $(document).ready( function () {--%>
<%-- $('#testTables').DataTable();--%>
<%-- });--%>
<%--</script>--%>
</html>728x90
반응형