[YOGOJOGO]
[dataTable]
재래김유진
2020. 2. 18. 17:09
728x90
반응형
1. 테이블에 넣을 데이터들을 ajax로 불러온다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@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으로 불러왔다.)
|
1
2
|
<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
DataTables Table plug-in for jQuery Advanced tables, instantly DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any H
datatables.net
3. 고라고 table에 DataTable 적용하기
+ Ajax로 가져온 데이터 파라라락 뿌리기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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 그려줄 부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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>
|
오잉? 끝나부렀네,,
728x90
반응형