개발이야기

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.  결과 이미지

버튼 클릭 시 tab 추가

1. html

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>
                <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
            </p>
            <!-- Nav tabs -->
            <ul id="tab-list" class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab1" role="tab" data-toggle="tab"><span>Tab 1 </span><span class="glyphicon glyphicon-pencil text-muted edit"></span></a></li>
            </ul>

            <!-- Tab panes -->
            <div id="tab-content" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
            </div>
        </div>
    </div>
</div>

• ul : tab list
• li : tab list 각 요소
• tab-content : tab의 내용

2. js

var button='<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab(){
	var tabs=$("#tab-list li:not(:first)");
	var len=1
	$(tabs).each(function(k,v){
		len++;
		$(this).find('a').html('Tab ' + len + button);
	})
	tabID--;
}

$(document).ready(function() {
    $('#btn-add-tab').click(function() {
        tabID++;
        $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab"><span>Tab ' + tabID + '</span> <span class="glyphicon glyphicon-pencil text-muted edit"></span> <button class="close" type="button" title="Remove this page">×</button></a></li>'));
        $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
        $(".edit").click(editHandler);
    });
    
    $('#tab-list').on('click', '.close', function() {
        var tabID = $(this).parents('a').attr('href');
        $(this).parents('li').remove();
        $(tabID).remove();

        //display first tab
        var tabFirst = $('#tab-list a:first');
        resetTab();
        tabFirst.tab('show');
    });

    var list = document.getElementById("tab-list");
});

var editHandler = function() {
  var t = $(this);
  t.css("visibility", "hidden");
  $(this).prev().attr("contenteditable", "true").focusout(function() {
    $(this).removeAttr("contenteditable").off("focusout");
    t.css("visibility", "visible");
  });
};

$(".edit").click(editHandler);

• tab ID : 고유 id 값 부여
• resetTab() : tab 삭제시 tab ID 값이 1씩 줄어듬
• btn-add-tab click : 추가 버튼 클릭시 tab 생성 (tab 이름, edit 버튼, close 버튼)

(출처 : https://www.codeply.com/go/4yGNCaA8Xs/bootstrap-tabs-add-edit-remove)