[dataTable]

데이터 테이블 개꿀딹? 

1. 테이블에 넣을 데이터들을 ajax로 불러온다 

 

@RequestMapping("ajax/egovSampleAvg.do")
    @ResponseBody
    public Map<String,Object>  updateSampleView1( String itemId, SampleDefaultVO searchVO, Model model, SampleVO sampleVO) throws Exception {
        
        Map<String, Object> rtnMap = new HashMap<String, Object>();
        
        //그냥 list함수에서는 페이징 들어가있어서 쿼리 새로 만들어줌
        List<SampleVO> sampleavg = sampleService.selectSampleAvg(sampleVO);
        
        rtnMap.put("data", sampleavg);
        
        return rtnMap;
    }

 

 

2. datatable을 사용하도록 략깐의 환경설정(?)을 해준다.

(파일들을 다운받아 경로를 맞춰줘도 되지만 난 칸탄하게 cdn으로 불러왔다.)

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

 

DataTables | Table plug-in for jQuery

 

3. 고라고 table에 DataTable 적용하기 

    + Ajax로 가져온 데이터 파라라락 뿌리기

jQuery(function($){
         $("#myTable").DataTable({
             ajax : {
                 url : "ajax/dataTableList.do", 
                 dataSrc: 'data'
         },
         columns: [
             { targets: 0, data: "itemId" },
             { targets: 1, data: "itemName" },
             { targets: 2, data: "priceOpen" },
             { targets: 3, data: "priceHigh" },
             { targets: 4, data: "priceLow" },
             { targets: 5, data: "priceClose" },
             { targets: 6, data: "pd" },
             { targets: 7, data: "fr" },
             { targets: 8, data: "volume" }
                 ],
         });
     });

 

 

4. 요거이 table 그려줄 부분 

            <table id="myTable" class="display">
                <thead>
                    <tr>
                        <th>종목코드</th>
                        <th>종목명</th>
                        <th>시가</th>
                        <th>고가</th>
                        <th>저가</th>
                        <th>종가</th>
                        <th>전일대비</th>
                        <th>등락률</th>
                        <th>거래량</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>

 

 

 

오잉? 끝나부렀네,,