게시판 버튼형 카테고리 구현 방법[AJAX]

게시판을 구현하다 보면 버튼형 카테고리를 사용할 일이 있을 경우가 있습니다.

미숙하지만 개발에 필요해서 기능 구현한 후 포스팅해봅니다.

필요하신 분들에게 도움이 되셨으면 좋겠습니다.

 

[최종 구현 화면]

 

[개발환경]

 

Java 1.8

eGovFrame

Mysql 5.6

톰캣 v8.5

 

JQUERY

 

<script src="http://code.jquery.com/jquery-latest.js"></script>       //필수 script입니다.
 
<script type="text/javascript">
 
var path = "${pageContext.request.contextPath }";
var qustr = "${searchVO.qustr}";
 
$(function(){
    
    $("input:button[name='button']").on('click',function(){
        var kind = $(this).val();       //버튼이 클릭 되었을 시, 개별 버튼의 값이 kind 변수에 담겨집니다.
        $.ajax({
            
            url : path+"/onlinecounsel/expertmb/list_ajax.do",
            type : "post",
            cache : false,
            headers : {"cache-control":"no-cache","pragma":"no-cache"},
            data : {
                 id : $(this).val(),
                "kind":kind    // 버튼의 value값에 따라 작동합니다.
                
            },
            success : function(data){
                console.log(data);
                $('body').html(data); // 성공 시, body부분에 data라는 html 문장들을 다 적용시킵니다.
            },
            error : function(data){
                alert('error');
            }//error
        })//ajax
    });//button click
    
}); 
 
</script>

 

JSP

 

<form:form commandName="searchVO" method="get"  id="listForm" action="${path}/onlinecounsel/expertmb/list.do">
    
    <div class="panel">
        <h4>분야별 전문위원</h4><br>
        <div class="panel-body">
            <div class="form-inline" >
                <input type="button" id="button" name="button" value="창업지원" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="인사/노무" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="사업화" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="법무" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="금융" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="경영전략" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="특허" class="btn btn btn-primary btn-bg"/>
                <br>
                <input type="button" id="button" name="button" value="수출입" class="btn btn btn-primary btn-bg"/>
                <input type="button" id="button" name="button" value="기술" class="btn btn btn-primary btn-bg"/>
            </div><br><br>
        </div>
    </div> 
 
    <div class="panel">
        <div class="panel-body">
            <div class="pull-left mt10">
                <span><spring:message code="list.totalCnt" text="총 게시물  " />  <fmt:formatNumber value="${resultCnt}" type="number" /> / <spring:message code="list.page" text="페이지 " />(<c:out value="${searchVO.pageIndex}"/>/<c:out value="${totalPageCnt}"/>)</span>
            </div><br>    
            <div class="table-responsive">
                <table id="mainTable" class="table table-striped table-bordered text-center">
                    <caption></caption>
                        <colgroup>
                            <col width="5%">
                            <col width="10%">
                            <col width="10%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>이름</th>
                                <th>컨설팅 분야</th>
                            </tr>
                        </thead>
                    <tbody>
                    <c:set var="ii" value="${resultCnt - (searchVO.pageIndex -1) * paginationInfo.recordCountPerPage }" />
                        <c:forEach var="result" items="${resultList}" varStatus="status">
                        <tr style="text-align:center;">
                            <td><c:out value="${ii}"/></td>                    
                            <td><c:out value="${result.me_name}"/></td>
                            <td><c:out value="${result.me_cert_key }"/></td>            
                        </tr>
                    <c:set var="ii" value="${ii - 1}" />
                    </c:forEach>
                    
                    <c:if test="${fn:length(resultList) == 0}">
                        <tr>
                            <td colspan="8"><spring:message code="list.noResult" text="조회결과가 없습니다." /></td>
                        </tr>
                    </c:if>
                    </tbody>
                </table>
            <div class="pull-right">
                <form:hidden path="pageIndex" />
                <ol class="pagination" id="pagination">
                    <ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_go_page" />
                </ol>
            </div>
            <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <!--  end panel -->
 
</form:form>

 

CONTROLLER

 

@RequestMapping(value ="/onlinecounsel/expertmb/list_ajax.do")
    public ModelAndView list_expertmb_ajax(            //여기서는 ModelAndView를 사용하는게 중요 포인트입니다.
            @ModelAttribute("searchVO") MemberVO searchVO,
            HttpServletRequest request,
            HttpServletResponse response,
            ModelMap model) throws Exception {
        
        String kind = request.getParameter("kind");       //request에서 getParameter를 사용하여 kind 값을 불러옵니다.
        
        searchVO.setSite_code(loginService.getSiteCode());
      
        PaginationInfo paginationInfo = new PaginationInfo();
        
        paginationInfo.setCurrentPageNo(searchVO.getPageIndex());        
        paginationInfo.setRecordCountPerPage(searchVO.getPageUnit());
        paginationInfo.setPageSize(searchVO.getPageSize());                
        
        searchVO.setFirstIndex(paginationInfo.getFirstRecordIndex());
        searchVO.setLastIndex(paginationInfo.getLastRecordIndex());
        searchVO.setRecordCountPerPage(paginationInfo.getRecordCountPerPage());
        
        Map<String, Object> map = onlineCounselService.getExpertMbListm(searchVO);        //Map을 이용하여 List 및 페이징 기능을 구현합니다.
        int totCnt = Integer.parseInt((String)map.get("resultCnt"));
        
        paginationInfo.setTotalRecordCount(totCnt);
           
        ModelAndView ajaxList = new ModelAndView("tiles:bsite/onlinecounsel/expertmb/list");      //ajaxList라는 변수에 위에서 선언한 변수들을 모두 담아준 다음
        ajaxList.addObject("kind",kind);
        ajaxList.addObject("resultList",map.get("resultList"));
        ajaxList.addObject("resultCnt", map.get("resultCnt"));
        ajaxList.addObject("totalPageCnt", (int)Math.ceil(totCnt / (double)searchVO.getPageUnit()));
        ajaxList.addObject("paginationInfo", paginationInfo);
        
        return ajaxList;        // return 으로 빼줍니다.
    }

 

XML

<sql id="SearchWhere">        // 조건부분을 sql id로 설정해줍니다.
            where 1=1
                <![CDATA[ and me_cert_key LIKE CONCAT('%', #{kind},'%')  ]]> 
        </sql> 
        
        
         <select id="getExpertMbListm" parameterType="MemberVO"  resultType="MemberVO">
            SELECT 
                *
            FROM 
                tbl_member
                <include refid="SearchWhere"/>
        <![CDATA[            
            Order by me_idx desc
            LIMIT #{recordCountPerPage} OFFSET #{firstIndex}
        ]]>                
    </select>
    
    <select id="getExpertMbListCntm" parameterType="MemberVO" resultType="java.lang.Integer" >
        <![CDATA[
            SELECT 
                COUNT(*)
            FROM tbl_member
        ]]> 
        <include refid="SearchWhere"/>
    </select>

 

모르시는 부분 있으면 댓글로 남겨주세요~