개발이야기

동적으로 table 데이터 추가하기 

예제1) javascript 배열 데이터 table에 나타내기

- javascript

function tableCreate(){

  var table_value = new Array();
  var html = '';

  table_value.push({value : '25.5', time : '2020-08-26'}); 
  table_value.push({value : '22.4', time : '2020-08-26'}); 
  table_value.push({value : '10.58', time : '2020-08-26'}); 
  table_value.push({value : '3.44', time : '2020-08-26'}); 
  table_value.push({value : '8.5', time : '2020-08-26'}); 

  for(i in table_value){
  html += '<tr>';
  html += '<td>'+table_value[i].value+'</td>';
  html += '<td>'+table_value[i].time+'</td>';
  html += '</tr>';
  }

  $("#kgTable").empty();
  $("#kgTable").append(html);
			
}

- html

<table id="kgTable">
  <thead>
    <tr>
      <th>중량값</th>
      <th>작동 시간</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<button onclick="tableCreate()">table_append</button>

예제2) javascript ajax for문 데이터 table로 나타내기 

		$.ajax ({
			url : "url",  
			cache : false,
			async:false,
			success : function (data) { 
				var html = '';
				for(var i=0; i<Object.keys(data.data).length; i++ ){
					$('#kgTable > tbody').empty(); //기존 테이블데이터 삭제
					html += '<tr>';
					html += '<td>'+data.data[i].kg_value+'</td>';
					html += '<td>'+ data.data[i].time+'</td>';
					html += '</tr>';
				}
				$("#kgTable").append(html); // 새로운 데이터 덮어쓰기
			
			}
		});

Table paging (bootstrap)

1. html

<!-- paging -->
<nav aria-label="Page navigation example">
	<ul class="pagination pagination-seperated "></ul>
</nav>

- 원하는 위치에 nav 삽입

2. js

function pagination() {
	var req_num_row = 10;  //화면에 표시할 목록 개수
	var $tr = jQuery('.paging');  // paging 대상 class 명
	var total_num_row = $tr.length;
	var num_pages = 0;
	if (total_num_row % req_num_row == 0) {
		num_pages = total_num_row / req_num_row;
	}
	if (total_num_row % req_num_row >= 1) {
		num_pages = total_num_row / req_num_row;
		num_pages++;
		num_pages = Math.floor(num_pages++);
	}

	jQuery('.pagination').append('<li class="page-item">'
					+ '<a class="page-link" href="#" aria-label="Previous">'
					+ '<span aria-hidden="true" class="mdi mdi-chevron-left"></span>'
					+ '<span class="sr-only">Previous</span></a></li>');

	for (var i = 1; i <= num_pages; i++) {
		jQuery('.pagination').append('<li class="page-item "><a class="page-link" href="#">' + i + '</a></li>');
		jQuery('.pagination li:nth-child(2)').addClass("active");
		jQuery('.pagination a').addClass("pagination-link");
	}

	jQuery('.pagination').append('<li class="page-item">'
					+ '<a class="page-link" href="#" aria-label="Next">'
					+ '<span aria-hidden="true" class="mdi mdi-chevron-right"></span>'
					+ '<span class="sr-only">Next</span></a></li>');

	$tr.each(function(i) {
		jQuery(this).hide();
		if (i + 1 <= req_num_row) {
			$tr.eq(i).show();
		}
	});

	jQuery('.pagination a').click('.pagination-link', function(e) {
		e.preventDefault();
		$tr.hide();
		var page = jQuery(this).text();
		var temp = page - 1;
		var start = temp * req_num_row;
		var current_link = temp;

		jQuery('.pagination li').removeClass("active");
		jQuery(this).parent().addClass("active");

		for (var i = 0; i < req_num_row; i++) {
			$tr.eq(start + i).show();
		}

		if (temp >= 1) {
			jQuery('.pagination li:first-child').removeClass("disabled");
		} else {
			jQuery('.pagination li:first-child').addClass("disabled");
		}

	});

	jQuery('.prev').click(function(e) {
		e.preventDefault();
		jQuery('.pagination li:first-child').removeClass("active");
	});

	jQuery('.next').click(function(e) {
		e.preventDefault();
		jQuery('.pagination li:last-child').removeClass("active");
	});

}

jQuery('document').ready(function() {
	pagination();

	jQuery('.pagination li:first-child').addClass("disabled");

});

- paging 대상 : jQuery('tbody tr'); 로 대체하면 paging대상이 tbody tr이 됨. (대체적으로 이렇게 사용)

3.  결과 이미지