http://link2me.tistory.com/1128 에서 작성했던 테이블을 부트스트랩 기반으로 변경을 해봤다.
=== index.php ===
<?php
require_once 'dbconnect.php'; // db접속 성공
require_once 'phpclass/dbClass.php';
require_once 'phpclass/boardiClass.php';
$c = new MySQLiDbClass();
$link_url = $_SERVER['PHP_SELF']; // 현재 실행중인 파일명 가져오기
$rowsPage = 12;
// 화면에 출력할 칼럼 발췌
$flddata ="uid,ItemName,Price,Quantity";
$where ="";
$curPage = isset($_GET['p']) ? $_GET['p'] : 1;
$result = $c->getDbArray('items',$where,$flddata,'',$rowsPage,$curPage);
$totalcnt = $c->getDbRows('items',$where);
$b = new boardiClass();
?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/display.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="header" width="30"><input type="checkbox" id="checkall" /></th>
<th class="header" width="100">No</th>
<th class="header" width="250">아이템</th>
<th class="header" width="250">가격</th>
<th class="header" width="200">수량</th>
</tr>
</thead>
<?php
// 테이블 리스트
$b->tablelistView_checkbox($result);
?>
<td colspan="5" style="text-align:left;">
<button type="button" class="btn btn-success btn-sm" id="optdel">선택삭제</button>
<button type="button" class="btn btn-success btn-sm" id="optmp3">선택듣기</button>
</td>
</table>
<a class="btn btn-default pull-right">글쓰기</a>
<?php $b->PageLinkView($link_url,$totalcnt,$rowsPage,$curPage);?>
</div>
</div>
</body>
</html>
=== table.css ===
th.header {
background:#F4F9FF;
color:#444444;
vertical-align:middle;
border-bottom:1px solid #E6E6E6;
font-size:1em;
height:2em;
}
=== display.js ===
$(function(){
// class td1 중에서 짝수번째 요소만 선택해서 배경색을 지정색으로 표시
// $(".tr1:odd").css("background-color","#F4F9FF"); // 부트스트랩 클래스에서 설정가능하므로 불필요
$('.tr1').click(function() {
var idx=$(this).attr('id');
}).mouseover(function() {
$(this).children('.td2').css({'backgroundColor':'#DCDCDC','cursor':'pointer'});
}).mouseout(function() {
$(this).children('.td2').css({'backgroundColor':'#FFFFFF','cursor':'default'});
});
// 전체 선택, 전체 해제
$("#checkall").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$('#optdel').click(function(){
var chkdata = new Array();
// 헤더에 있는 체크박스는 제외
//$('.chkbox:checked').each(function() {
$('input:checkbox[name="uid[]"]:checked').each(function() {
// 체크한 아이템 배열로 저장
chkdata.push($(this).val());
//alert($(this).val());
});
if(chkdata.length != 0){ // 배열의 길이가 0 이 아니면
alert(chkdata);
$.post('ajax.php',{chkdata:chkdata}, function(response) {
alert(response);
});
} else {
alert('선택한 항목이 없습니다.');
}
});
$('#optmp3').click(function(){
var chkdata = new Array();
$('input:checkbox[name="uid[]"]:checked').each(function() {
// 체크한 아이템 배열로 저장
chkdata.push($(this).val());
});
if(chkdata.length != 0){ // 배열의 길이가 0 이 아니면
//alert(chkdata);
$.post('ajax.php',{chkdata:chkdata}, function(response) {
alert(response);
});
} else {
alert('선택한 항목이 없습니다.');
}
});
});
=== boardiClass.php 에서 발췌 ===
페이지네이션 표시를 아래 그림처럼 해주기 위해서는
<div class="text-center">
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul></div>
과 같이 해주면 된다.
http://www.w3schools.com/bootstrap/bootstrap_pagination.asp 를 테스트 해볼 수 있다.
function PageLinkView($link_url,$totalcnt,$rowsPage,$curPage){
echo '<div style="position:relative;vertical-align:top;padding-top:0;margin-top:0">';
echo "<span style='position:absolute;top:10px;'>[전체 글수:".$totalcnt."]</span>";
echo '<div class="text-center">';
echo '<ul class="pagination">';
$Info = $this->PageList($totalcnt,$rowsPage,$curPage,'');
if($Info['current_block'] > 2){
echo "<li><a href='".$link_url."?p=1'>◀</a></li> ";
}
if($Info['current_block'] > 1){
echo "<li><a href='".$link_url."?p=".$Info['prev']."'>◁</a></li> ";
}
foreach($Info['current'] as $w) {
if($curPage == $w){
echo "<li><a href='".$link_url."?p=".$w."'><span style='color:red;'>".$w."</span></a></li> ";
} else {
echo "<li><a href='".$link_url."?p=".$w."'>".$w."</a></li> ";
}
}
if($Info['current_block'] < ($Info['total_block'])){
echo "<li><a href='".$link_url."?p=".$Info['next']."'>▷</a></li> ";
}
if($Info['current_block'] < ($Info['total_block']-1)){
echo "<li><a href='".$link_url."?p=".$Info['totalPage']."'>▶</a></li> ";
}
echo '</ul>';
echo '</div>';
echo '</div>';
}
'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글
| 부트스트랩 기반 WYSIWYG editor summernote (2) | 2017.03.19 |
|---|---|
| 부트스트랩 테이블 만들기(수정) (0) | 2017.02.02 |
| 부트스트랩 테이블 속성 (0) | 2017.01.31 |
| 부트스트랩 버튼 (0) | 2017.01.31 |
| HTML5 테이블 만들기 (체크박스, MySQL 연동) (0) | 2016.11.28 |
Link2Me
topmenu-01.zip
node-v0.10.13-x86.msi
jre-8u111-windows-i586-iftw.exe