페이징처리를 위한 2차 배열 형식 만들기.

단순히 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

multiple array