spgray0426
133
2021-11-05 13:22:05 작성 2021-11-05 14:13:25 수정됨
2
140

datatable 질문 입니다


데이터 테이블로 다음과 같이 테이블을 만들었는데 


화면을 줄이면 이렇게 검색창이랑 페이징하는게 가운데로 가더라구요


이거를 화면 줄였을때도 그대로 있도록 하고 싶은데 보통은 어떻게 하나요



코드는 


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<!-- datatable 관련 css,자바 스크립트 -->
<link rel="stylesheet"
	href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css" />
<script
	src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

<style>
/*클릭하지 않은 링크*/
a:link {
	color: black;
	text-decoration: none;
}
/*클릭했던 링크*/
a:visited {
	color: black;
	text-decoration: none;
}
/*클릭하려고 마우스 올릴때*/
a:hover {
	color: black;
	text-decoration: underline;
}

table {
	width: 100%;
	font-size: 10px;
	text-align: center;
}

thead, th {
	text-align: center;
}
</style>
<script>
	// Korean
	var lang_kor = {
		"decimal" : "",
		"emptyTable" : "데이터가 없습니다.",
		"info" : "_START_ - _END_ (총 _TOTAL_ 명)",
		"infoEmpty" : "0명",
		"infoFiltered" : "(전체 _MAX_ 명 중 검색결과)",
		"infoPostFix" : "",
		"thousands" : ",",
		"lengthMenu" : "_MENU_",
		"loadingRecords" : "로딩중...",
		"processing" : "처리중...",
		"search" : "검색 : ",
		"zeroRecords" : "검색된 데이터가 없습니다.",
		"paginate" : {
			"first" : "첫 페이지",
			"last" : "마지막 페이지",
			"next" : "다음",
			"previous" : "이전"
		},
		"aria" : {
			"sortAscending" : " :  오름차순 정렬",
			"sortDescending" : " :  내림차순 정렬"
		}
	};

	jQuery(function($) {
		$("#foo-table").DataTable({
			stateSave : true,
			info : false,
			/* columnDefs: [
				// 2번째 항목 넓이를 100px로 설정
				{ targets: [0,1,2], width: 100 }
			], */
			language : lang_kor

		});
	});
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<c:import url="/cmm/header" />

<body>


	<div style="padding-left: 10em; padding-right: 10em; min-width: 1100px">
		<table id="foo-table" class="table table-bordered">
			<thead>
				<tr>
					<th>번호</th>
					<th>구분</th>
					<th>성함</th>
					<th>전화번호</th>
					<th>휴대폰번호</th>
					<th>주소</th>
					<th>고장내용</th>
				</tr>
			</thead>

			<tbody>
				<c:forEach items="${list}" var="list">
					<tr>
						<td><a href="/board/view?rno=${list.rno}">${list.rno}</a></td>
						<c:choose>
							<c:when test="${list.rtype eq '접수'}">
								<td><a href="/board/view?rno=${list.rno}"
									style="color: red;">${list.rtype}</a></td>
							</c:when>
							<c:when test="${list.rtype eq '진행'}">
								<td><a href="/board/view?rno=${list.rno}"
									style="color: blue;">${list.rtype}</a></td>
							</c:when>
							<c:otherwise>
								<td><a href="/board/view?rno=${list.rno}"
									style="color: black;">${list.rtype}</a></td>
							</c:otherwise>
						</c:choose>

						<td><a href="/board/view?rno=${list.rno}">${list.ctname}</a></td>
						<td><a href="/board/view?rno=${list.rno}">${list.ctpn}</a></td>
						<td><a href="/board/view?rno=${list.rno}">${list.ctmpn}</a></td>
						<td><a href="/board/view?rno=${list.rno}">${list.ctaddr}</a></td>
						<td><a href="/board/view?rno=${list.rno}">${list.faultcontent}</a></td>
					</tr>
				</c:forEach>
			</tbody>

		</table>
	</div>
</body>
</html>

이건데 css를 datatables.min.css 쓰고있어서 문제가 생기는거 같은데 제가 css를 다시 만들어야할까요?

0
  • 답변 2

  • 20170923
    2k
    2021-11-05 13:56:01

    이미지만 보고 html css를 분석하기에 제 실력은 너무도 미천한 것 같습니다.

  • spgray0426
    133
    2021-11-05 14:14:04

    소스 추가 하긴했는데 이게 실행했을때 소스랑 다른데.. 실행소스 가져올까요?

  • 로그인을 하시면 답변을 등록할 수 있습니다.