presentjava
246
2017-02-01 21:27:56
1
756

페이징 처리 및 검색 조건 후 이미지 data 유지 방법을 구합니다.


안녕하세요..자바 완전 초급인 학생입니다.

페이징 및 검색 조건 처리 완료 후 이미지 data를 유지하는 방법을 잘 모르다보니 헤매고 있습니다.

carousel에 ajax 처리 하여 이미지 등록하여 검색이나 페이징하기 전 클릭 시 이미지는 나오는데

페이징 이동이나 검색을 하게 되면 기본 이미지로 바뀌어서 아직까지 헤매고 있습니다.

어떻게 처리를 해야 해야 되는지요???

아는 분한테 물어보니  jsp 안에서 ajax로 처리를 하는 방법이 있다고 하는데...

어떤 방법이 있는지 궁금합니다.

일단 저의 코드를 올리겠습니다.


<div class="panel">

<div class="panel-body">

<h3>PPT LIST</h3>

<div class="col-md-12 padding-0">

<div class="col-md-8" style="padding-left: 2px;">

<!-- 검색 조건 처리 -->

<select name="searchType">

<option value="n"

<c:out value="${cri.searchType == null?'selected':''}"/>>---</option>

<option value="k"

<c:out value="${cri.searchType eq 'k'?'selected':''}"/>>PPT_KIND</option>

<option value="t"

<c:out value="${cri.searchType eq 't'?'selected':''}"/>>PPT_TITLE</option>

</select>

<!-- input-group -->

<div class="input-group">

<div class="input-group-text">

<input type="text" class="form-control" name="keyword" id="keywordInput" value="${cri.keyword}">

</div>

<!-- /input-group -->

<!-- btn-group -->

<div class="input-group-btn">

<button type="button" class="btn btn-default" id="searchBtn">검색</button>

</div>

<!-- /btn-group -->

</div>

</div>

</div>

</div>

<!-- ppt list 출력-->

<div class="panel-body">

<div class="responsive-table">

<table class="table table-striped table-bordered" width="100%" cellspacing="0">

<thead>

<tr>

<th>발표분야</th>

<th>제목</th>

</tr>

</thead>

<tbody>

<!-- 로그인한 정보에 따른 ppt 리스트 보여주기 -->

<c:forEach items="${pptUserList}" var="PptVO">

<ul class="pptUserList">

<tr id="${PptVO.pptno}">

<td>${PptVO.ppt_kind}</td>

<td><a class="title-tag" id="${PptVO.pptno}"

name="${PptVO.fno}" href="#">${PptVO.ppt_title}</a></td>

</tr>

</ul>

</c:forEach> <!-- /.로그인한 정보에 따른 ppt 리스트 보여주기 -->

</tbody>

</table>

</div>

<!-- list paging 처리 -->

<div class="col-md-8">

<ul class="pagination pull-right">

<c:if test="${pageMaker.prev}">

<li><a href="myPage${pageMaker.makeSearch(pageMaker.startPage - 1)}"

aria-label="Previous"><span aria-hidden="true">«</span></a></li>

</c:if>

<c:forEach begin="${pageMaker.startPage}" end="${pageMaker.endPage}" var="idx">

<li class="active"

<c:out value="${pageMaker.cri.page == idx?'class = active':''}"/>>

<a href="myPage${pageMaker.makeSearch(idx)}">${idx}</a>

</li>

</c:forEach>

<c:if test="${pageMaker.next && pageMaker.endPage > 0}">

<li><a href="myPage${pageMaker.makeSearch(pageMaker.endPage + 1)}"

aria-label="Next"><span aria-hidden="true">»</span></a></li>

</c:if>

</ul>

</div> <!-- /.list paging 처리 -->

</div> <!-- /.ppt list 출력-->

</div>


<!-- ppt 정보 & img 뿌리기 -->

<div class="panel box-v4">

<div class="panel-heading bg-white border-none">

<h4><span class="icon-notebook icons"></span> PPT 정보</h4>

</div>


<div class="panel-body">

<div class="col-md-12 col-sm-12 col-xs-12">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<div class="carousel-inner" id="imgContext">

<div class="item active">

<img class="img-responsive" data-src="holder.js/900x500/auto"

src="../resources/miminium-master/asset/img/bg1.jpg">

</div>

 <div class="item">

<img class="img-responsive" data-src="holder.js/900x500/auto"

src="../resources/miminium-master/asset/img/bg1.jpg">

</div>

<div class="item">

<img class="img-responsive" data-src="holder.js/900x500/auto"

src="../resources/miminium-master/asset/img/bg1.jpg">

</div> 

</div>

<a class="left carousel-control" id="prevBtn" href="#carousel-example-generic" 

role="button" data-slide="prev"> 

<span class="glyphicon glyphicon-chevron-left"></span></a> 

<a class="right carousel-control" id="nextBtn" href="#carousel-example-generic" 

role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

<div class="panel-body padding-0">

<div id="context" class="col-md-12 col-xs-12 col-md-12 padding-0 box-v4-alert">

<h2 id='pTitle'></h2>

<p id='pDesc'></p>

</div>

<div class="calendar fc fc-ltr fc-unthemed">

<div class="fc-toolbar"></div>

</div>

</div>

</div>

</div>

</div> <!-- /.ppt 정보 & img 뿌리기 -->


<!-- 스크립트 -->

<script>

$(document).ready(function() {

 

$(".title-tag").on("click", function(event) {


event.preventDefault();


var pptno = $(this).attr('id'); // pptno를 아이디 값에 속성을 매김

var fno = $(this).attr('name'); // fno를 name 값에 속성을 매김

console.log(fno);

console.log(pptno);

/*pptRead를 ajax로 불러오기*/

$.ajax({

url : "../ppt/pptRead/" + pptno, // pptRead를 controller에 출력하여 pptno에 대한 ppt를 읽는다.

type : "get", // get 방식


success : function(data) {

console.log(data.ppt_title);

console.log(data.ppt_desc);

$('#pTitle').empty(); 

$('#pDesc').empty(); 

// title과 desc 데이터를 비운다.

$('#pTitle').append(data.ppt_title);

$('#pDesc').append(data.ppt_desc);

// title과 desc에 대한 내용을 삽입한다.

}

}); // ajax로 ppt_title과 ppt_context 내용 출력

/*이미지와 버튼을 한번 없애준후 append로 재 삽입을 한다.*/

$('#imgContext').remove();

$('#prevBtn').remove();

$('#nextBtn').remove();

$('#carousel-example-generic').append( 

'<div class="carousel-inner" id="imgContext"></div>'

+ '<a class="left carousel-control" id="prevBtn" href="#carousel-example-generic"' 

+ 'role="button" data-slide="prev">' 

+ '<span class="glyphicon glyphicon-chevron-left"></span></a>' 

+ '<a class="right carousel-control" id="nextBtn" href="#carousel-example-generic"' 

+ 'role="button" data-slide="next">'

+ '<span class="glyphicon glyphicon-chevron-right"></span></a>'

);

/*imgRead를 ajax로 불러오기*/

$.ajax({

url : "../ppt/imgRead/" + fno, // imgRead에 대한 fno을 불러온다.

type : "get",

success : function(data) {

 

$.each(data, function(index, obj){ 

console.log(obj.img);

/*if~else구문으로 img를 active 실시*/

if(index==0){

                   $('#imgContext').append(

                     '<div class="item active">'

                    + '<img class="img-responsive"' 

                    + 'data-src="holder.js/900x500/auto"' 

                    + 'src="../ppt/show?name=' + obj.img + '">'

                    + '</div>'

                         

                   );

} else {

$('#imgContext').append(

                   '<div class="item">'

                  + '<img class="img-responsive"' 

                  + 'data-src="holder.js/900x500/auto"' 

                  + 'src="../ppt/show?name=' + obj.img + '">'

                  + '</div>'

                       

                  );

};

                    console.log(obj);

                  }); 

}

});


}); // ajax 처리로 이미지 및 ppt 정보 호출


$("#searchBtn").on("click", function(event) {

self.location = "myPage" + '${pageMaker.makeQuery(1)}' + "&searchType="

+ $("select option:selected").val() 

+ "&keyword=" + $('#keywordInput').val();

}); // 검색 조건 처리

var msg = '${msg}';

if (msg == 'success') {

alert('완료되었습니다.');

}

var formObj = $("form[role='form']");

console.log(formObj);


$("#updateBtn").on("click", function() {

formObj.submit();

}); // 유저 정보 update


$("#deleteBtn").on("click", function() {

formObj.attr("action", "delete");

formObj.attr("mehtod", "post");

formObj.submit();

}); // 유저 정보 delete


$("#createBtn").on("click", function(){

var cookie = document.cookie.split(';');

       console.log('로그인쿠키값!! : ' + cookie);


       var cooki = JSON.stringify(cookie);



       var cook = new Array();

       cook = cooki.split("=");


       console.log(cook[1]);


       var cook2 = new Array();

       cook2 = cook[1].split('"');


       console.log(cook2[0]);

       

$("#useridF").val(cook2[0]);

$("#f1").attr("action", "dropzone").submit();

}); // 생성 페이지 이동

});

</script>


0
0
  • 답변 1

  • 전재형
    4k
    2017-02-02 00:00:07

    죄송합니다. ㅜ 길어서 다 읽어보지 않았습니다.


    보통 페이징 검색 조건을 남기는 것은

    페이지의 히든 파라미터를 넘기거나

    다음 페이징 페이지에서 그 이후 페이징으로 넘어갈때 파라미터를 같이 넘기는 것이 일반적이라고 알고 있습니다.


    www.a.com/abc?condition1=123&page=3

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