Jquery/Bootstrap 잡기술 : DataTables 확장모듈 커스텀, 클릭-모달창 생성 이벤트 대응, 상위-하위요소 접근 등

부트스트랩 dataTables 확장모듈 커스텀

SearchFilter 에 자동으로 생성되는 lable 태그에 float-right 속성을 추가하고 싶음

jquery.dataTables.js 파일

var filter = $('<div/>', {
                'id': ! features.f ? tableId+'_filter' : null,
                'class': classes.sFilter
            } )
            .append( $('<label/>' ).append( str ) );

var filter = $('<div/>', {
                'id': ! features.f ? tableId+'_filter' : null,
                'class': classes.sFilter
            } )
            .append( $('<label class=\"float-right\" />' ).append( str ) );

이렇게 수정.

DataTable 확장모듈 - 테이블에서 특정 컬럼 숨기기

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

data-column 으로 텍스트별 지정된 인덱스 번호를 가져와서 table.colimn으로 테이블에서 해당 인덱스 오브젝트를 가져온 다음 visible 진행. column.visible()로 현재 설정값 가져온다음 !로 반전해서 적용.

---

제이쿼리 클릭 이벤트시 모달창 실행 + 닫기

$('tr').click( function() {
    $('#myModal').modal();
    $('#myModal').modal('hide');
  });

제이쿼리 특정 요소의 하위 요소 접근

$('#dataTable_filter').children('label')
$('#dataTable_filter').find('label')

상위요소 접근 + 특정 속성에 접근 및 값 변경

$('.dataTable').parent('div').attr('class')
$('.dataTable').parent('div').attr('style','width:100rem;height:50em;overflow:scroll');

Object DOM으로 반환된것 다시 원래대로 사용

$.each(name,function() {
      var $this = $(this)
      console.log($this.find('td').text());

    });

로딩페이지 :

모달창 미리 띄워둔 다음, 자바스크립트 상에서 페이지 로드 끝나면 fadeOut되게 구현

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery"; 
    });
}); -> 실패

.promise.done() 이용해 강제 콜백 이벤트 적용

$('.dataTables_length').html(tmp).promise().done(function(){
    alert('callback');
  });
혹은
$('.dataTable').parent('div').attr('style','width:100rem;height:75vh;overflow-x:scroll;margin-bottom:1rem;').promise().done( function() {
    $('#Loading').fadeOut();
});

요소 강제 클릭

$('.sorting.sorting_asc').trigger("click");

마우스 올렸을때 → hover + 특정 클래스 가졌을때만 동작

tr[class="odd"]:hover,tr[class="even"]:hover{
  background-color: #ffffffcc;
  color : #121212;
}

제이쿼리 요소 생성

var addButton =$('<button>', {
            'id' : "userAddbtn",
            'class' : "btn btn-primary",
            'type' : 'submit',
            text : "사용자 추가",
            css : {
                width: "200px",
        height: "30px",
            }
        })

모달 아래에서 올라오게

<div id="alertModal" class="modal fade" data-backdrop="false"  >
    <div class="modal-dialog" style="transform: translate3d(0,100vh,0);">
        <div class="modal-content">
            <div class="modal-body">
                님 환영합니다!
            </div>
        </div> 
    </div>
</div>

모달 떠도 뒷배경 스크롤 가능하게

.modal-open { overflow-y: auto; }
$('.modal-open').css('overflow-y','auto');

쿠키 사용, 생성, 수정 및 삭제 + 다른페이지에서 만든 쿠키 삭제

if($.cookie("loginAlert") != 0)
  {
      $('#alertModal').modal();
  }
  setTimeout(function() {
      $('#alertModal').modal('hide');         
      $.cookie("loginAlert",0);
  },3000);
});

$(document).on('click','.logoutButton',function(){
  $.removeCookie('loginAlert');
  alert('logout');
});

$.removeCookie('filter', { path: '/' });