728x90
반응형
이미 지금까지 설명해온 글들만 이해가 됐다면, postNumber(게시물의 개수)를 다루는 법은 정말 쉽다.
1. 먼저 클라이언트 쪽에서 보여지는 드롭박스를 만든다.
<select id = "selectpage" name="data-table-default_length" aria-controls="data-table-default" class="custom-select custom-select-sm width-80 mb-2">
<option class ="postnumber" value="10">10</option>
<option class ="postnumber" value="25">25</option>
<option class ="postnumber" value="50">50</option>
<option class ="postnumber" value="100">100</option>
</select>
2. 그 다음 클릭 했을 경우의 selected된 값을 가져오고 selectpage 함수에 넘긴다.
$('#selectpage').click(function() {
selectpage(pagingObject,{
option : $('#selectpage option:selected').val()
})
});
3. selectpage 함수를 실행하고 마지막에 pagereload 실행
// 페이지 개수 지정
function selectpage(Object, jsondata) {
if(Object.postNum != jsondata.option) {
Object.postNum = jsondata.option
pagereload(Object);
}
}
1. 그다음 엑셀 파일 다운로드는 먼저 클라이언트 코드는 이렇다.
<input type="button" class="ml-2 mb-2 btn btn-default" value="Excel" onclick="exceldownload(pagingObject);"/>
2. exceldownload 함수
function _excelDown(fileName, sheetName, Object, thlist, tdkeylist){
const excelarray = Object.array;
var thlist = thlist;
var tdkeylist = tdkeylist;
var html = ''; html += '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
html += ' <head>';
html += ' <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
html += ' <xml>';
html += ' <x:ExcelWorkbook>';
html += ' <x:ExcelWorksheets>';
html += ' <x:ExcelWorksheet>';
html += ' <x:Name>' + sheetName + '</x:Name>';
html += ' <x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions>';
html += ' </x:ExcelWorksheet>';
html += ' </x:ExcelWorksheets>';
html += ' </x:ExcelWorkbook>';
html += ' </xml>';
html += ' </head>';
html += ' <body>';
// ----------------- 시트 내용 부분 -----------------
html += "<table >";
html += " <thead>";
html += " <tr>";
for ( var i = 0; i < thlist.length; i ++) {
html += "<th>";
html += thlist[i];
html += "</th>";
}
html += "</tr>";
html += " </thead>";
html += " <tbody>";
for (var i = 0; i < Object.array.length; i ++) {
html += " <tr>";
for(var j = 0; j < tdkeylist.length; j ++) {
html += " <td>";
if(tdkeylist[j] == "CA")
{
html += moment(Object.array[i][tdkeylist[j]]).format('YYYY-MM-DD');
}
else if(tdkeylist[j] == "PD") {
if (parseInt(Object.array[i].PD/60)==0)
html += ((Object.array[i][tdkeylist[j]])%60)+"s";
else
html += parseInt((Object.array[i][tdkeylist[j]])/60)+"m "+(parseInt(parseInt(Object.array[i][tdkeylist[j]])%60))+"s"
}
else
{
html += Object.array[i][tdkeylist[j]];
}
html += " </td>" ;
}
html += " </tr>";
}
html += " </tbody>";
html += "</table>";
// }
//시트 내용 부분 -----------------
html += ' </body>'; html += '</html>';
// 데이터 타입
var data_type = 'data:application/vnd.ms-excel';
var ua = window.navigator.userAgent; var blob = new Blob([html], {type: "application/csv;charset=utf-8;"});
if ((ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) && window.navigator.msSaveBlob)
{ // ie이고 msSaveBlob 기능을 지원하는 경우
navigator.msSaveBlob(blob, fileName);
}
else { // ie가 아닌 경우 (바로 다운이 되지 않기 때문에 클릭 버튼을 만들어 클릭을 임의로 수행하도록 처리)
var anchor = window.document.createElement('a');
anchor.href = window.URL.createObjectURL(blob);
anchor.download = fileName; document.body.appendChild(anchor); anchor.click();
// 클릭(다운) 후 요소 제거
document.body.removeChild(anchor);
}
}
function exceldownload(Object)
{ // 대상 테이블을 가져옴
var table = document.getElementById("data-table-combine");
if(table){ // CASE 대상 테이블이 존재하는 경우
var thlist = []; // th 들어갈 배열
var tdkeylist = []; // tr을 추출하기위해 배열의 식별 값을 가져옴
for(var i = 0; i < $('#memDiv1 th').length; i ++) {
if($('#memDiv1 th').eq(i).text() != "") {
thlist.push($('#memDiv1 th').eq(i).text())
tdkeylist.push($('#memDiv1 th').eq(i).attr('name'))
}
}
// 엑셀다운 (엑셀파일명, 시트명, 내부데이터HTML)
_excelDown("oasis_excel.xls", "Sheet", Object, thlist, tdkeylist)
}
}
현재 보여지는 리스트들만 담아서 데이터를 엑셀로 다운로드 받을 수 있게끔 하였다.
728x90
반응형
'Node.js - JQuery' 카테고리의 다른 글
| Node.js , JQuery | 쇼핑몰 만들기 | 화면 구성 (0) | 2021.09.15 |
|---|---|
| Node.js , JQuery | 테이블 만들기 | 정렬하기 (0) | 2021.09.15 |
| Node.js , JQuery | 테이블 만들기 | 검색하기 (0) | 2021.09.15 |
| Node.js , JQuery | 테이블 만들기 | 페이지네이션 (0) | 2021.09.15 |
| Node.js , JQuery | 테이블 만들기 | 데이터 삭제(2) (0) | 2021.09.14 |