Programming language/javascript
페이징처리를 위한 2차 배열 형식 만들기.
hello-world
2019. 7. 8. 18:54
728x90
반응형
단순히 1차원 배열 상태의 데이터를 받는다고 치자.
그런데 이 데이터를 이용해 한 화면에 8개 리스트를 만들어 보여주고 나머지들은
페이지처리한다고 할때 데이터가 담긴 배열을 조금 손볼 필요가 있다.
JS
/**
* [ [...], [...] ] --> 다중배열 형식으로 데이터 만들어줌
* @param targetData
* @param rowNm
* @param colNm
* @returns {Array}
*/
function multipleArrays( targetData, rowNm, colNm ) {
var sort = [];
for (var i = 0; i < rowNm; i++) {
sort[i] = [];
for (var j = 0; j < colNm; j++) {
var ln = (i * colNm) + j;
if (ln >= targetData.length) { break; }
sort[i].push(targetData[ln])
}
}
return sort;
}
var testData=[
{id:0, item:'n1', chk:true},
{id:1, item:'n1', chk:true},
{id:2, item:'n2', chk:true},
{id:3, item:'n3', chk:false},
{id:4, item:'n4', chk:true},
{id:5, item:'asdf', chk:false},
{id:6, item:'nasd1', chk:false},
{id:7, item:'ndf1', chk:true},
{id:8, item:'n2s1', chk:false},
{id:9, item:'n1wdf1', chk:true},
{id:10, item:'sd', chk:true},
{id:11, item:'dsd1', chk:false},
{id:12, item:'nsad1', chk:true},
{id:13, item:'aqwe', chk:false},
{id:14, item:'asd', chk:true},
{id:15, item:'jhg', chk:false},
{id:16, item:'iuy', chk:true},
{id:17, item:'qwer', chk:false},
{id:18, item:'edrf', chk:true},
{id:19, item:'dfg', chk:true},
{id:20, item:'qwer', chk:false},
{id:21, item:'cvb', chk:false},
{id:22, item:'sdfg', chk:false},
{id:23, item:'dfg', chk:false}
];
var maxView=8;
var pagingNm=Math.ceil(testData.length/maxView);
//데이터를 8개씩 묶음으로 다중배열로 재할당
var multiArr=multipleArrays( testData, pagingNm, maxView);
var view=document.getElementById("view");
//테스트를 위한 코딩~ 총 3개의 리스트로 구분되어 보이면 성공이닷~
for( var i=0, len=multiArr.length;i<len;i++){
var jLen=multiArr[i].length;
var tag='';
tag+='<ul>';
for( var j=0;j<jLen;j++){
var info=multiArr[i][j];
tag+='<li> user name='+info.item+'</li>';
}
tag+='</ul>';
view.innerHTML+=tag;
}
데모소스는 아래와 같다.
demo : https://codepen.io/uxicode/pen/Rzeqjq
728x90
반응형