코딩도 합니다/jQuery (16) 썸네일형 리스트형 [제이쿼리 jQuery] dataTable header 너비와 body 너비 다를 때 해결 방법 / dataTable header width not aligned with body width in modal 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. jQuery로 개발할 때 dataTable 라이브러리는 정말 유용하게 쓰이죠 :) 이번 포스팅에서는 dataTable header 너비와 body 너비 다를 때 해결 방법에 대해 다뤄보겠습니다. dataTable header width not aligned with body width in modal * 이 포스팅은 이미 제이쿼리로 dataTable을 구현되어 있다는 가정 하에 작성되었습니다. 문제 파악 이 현상은 부트스트랩을 사용하여 모달을 만들고, 생성한 모달 안에 dataTable이 있을 때 발생합니다. 모달을 열었을 때 이미지와 같이 dataTable의 header와 body의 너비가 다르게 보여지죠. 문제 해결 js 파일에 코드를 .. [제이쿼리 에러 jQuery Error] Uncaught TypeError: $(...).summernote is not a function / summernote 에러 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 html에 summernote를 적용할 때 자주 볼 수 있는 $(...).summernote is not a function 에러를 해결하는 방법에 대해 공유하겠습니다. 이 에러의 발생 이유는 2개입니다. 각각의 이유와 에러 해결 방법을 아래에 적어둘게요! 1. jQuery를 2번 import 했을 경우 => 이미 jQuery를 적용한 상태에서 summernote 홈페이지에 있는 코드를 그대로 복붙 했다가 발생하는 에러. => jQuery import한 코드를 하나만 남기고 삭제해 주세요! 2. jQuery import한 코드 위에 summernote script 코드 작성한 경우 => summernote를 jQuery 호.. [제이쿼리 jQuery] 인풋 타입 파일로 업로드할 때 이미지 사이즈 제한·지정하기 / Limiting image size when upload 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 개발할 때, 인풋 타입 파일로 업로드할 때 이미지 사이즈 제한·지정하는 방법에 대해 알아보겠습니다. 여기서 말하는 인풋 타입 파일이란, 아래와 같은 내용입니다. 이렇게 input 태그에 type 속성을 file로 정해주면 아래 이미지처럼 자동으로 파일을 선택하는 버튼과 선택한 파일 명이 보여지는 기능이 구현이 됩니다. 참 유용한 기능이죠? 이 때, 어떻게 하면 업로드하는 이미지의 사이즈를 제한할 수 있을까요? 지금부터 알아보겠습니다. 인풋 타입 파일로 업로드할 때 이미지 사이즈 제한·지정하는 방법 1. input 태그에 data-* 속성 추가하기 data-width, data-height 속.. [제이쿼리 jQuery] dataTable 엑셀 추출 시 특정 열 제외하는 방법 / Excluding columns when exporting from dataTable to excel 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 dataTable을 엑셀로 추출할 때 특정 열을 제외하고 추출하는 방법에 대해 공유하겠습니다. 자바스크립트 중 제이쿼리로 데이터테이블(dataTable)을 사용할 때, '엑셀로 내보내기' 기능을 저는 가장 많이 사용합니다. 만약 dataTable 안에 엑셀 추출 기능을 어떻게 넣는지 모르겠다면, 아래의 지난 포스팅을 참고하여 추가해 주세요! [제이쿼리 jQuery] dataTable 엑셀 기능 구현 / dataTable 엑셀 버튼 안 보일 때! copy, PDF, print 모두 다 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트나 제이쿼리로 개발할 때 사용하는 dataTabl.. [제이쿼리 jQuery] dataTable 초기화 시키는 법 / Cannot reinitialise DataTable. 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트나 제이쿼리에서 dataTable을 구현할 때 마주하는 'Cannot reinitialise DataTable.' 에러 해결 방법에 대해 공유하겠습니다. 우선, 'Cannot reinitialise DataTable.'를 번역하자면 'DataTable을 다시 초기화할 수 없습니다.'라는 뜻입니다. 이 에러는 이미 테이블이 그려져 있는데, 그 위에 다른 테이블을 렌더링하려고 할 때 발생하는데요. 자, 지금부터 해당 에러 해결방법에 대해 알려드리겠습니다. js 코드를 봐주세요. dataTable을 작성할 때 우리는 ajax를 먼저 작성한 후에 여러 옵션들과 columns를 작성하는데요. 노란색 부분 옵션 공간에 de.. [제이쿼리 jQuery] dataTable 검색한 데이터 가져오기 / Get filtered data from dataTable 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 dataTable을 다뤄볼 건데요. 그 중에서도 dataTable에서 검색한 data를 가져오는 방법에 대해 알려드리겠습니다. 먼저 해당 작업을 완료 했을 때 콘솔창에 찍히는 모습을 보여드릴게요. 이미지를 보시면 다양한 데이터들이 보이죠? 저희는 지금부터 1. 검색된 data를 가져오기 2. 검색된 data 사용하기 에 대해 알아봅시다. 검색된 data를 가져오기 아이디 sendGroupBtn을 눌렀을 때 해당 코드들을 실행하게 했습니다. filter : 'applied'가 중요한 내용인데요. 저희는 이 코드로 필터링된 data를 가져올 수 있습니다. searchData라는 변수를 만들어서 .. [제이쿼리 jQuery] dataTable 구간 검색하기 / dataTable range search 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 오늘은 제이쿼리 혹은 자바스크립트로 dataTable을 개발할 때 dataTable안에서 구간 검색하는 방법에 대해 공유하려 합니다. 구간 검색이 뭔지 한번에 감이 안 오실까봐 이미지를 준비했어요. 이미지를 보니 한번에 이해가 되시죠? 이렇게 시작 번호와 종료 번호를 입력하고 '검색'버튼을 누르면 그 범위 내의 정보만을 dataTable에 보여준다고 생각하시면 될 것 같아요. html 작성하기 먼저 html 코드를 봐볼까요? d-flex, flex-row와 같은 내용은 해당 코드 안에서 '부트스트랩'을 사용한 것입니다. 개의지 않고 봐주시면 될 거 같아요. 부트스트랩 사용 방법에 대해서는 나중에 꼭 포스팅을 해서 공유하도록 하겠습니다. 코드.. [제이쿼리 jQuery] dataTable 클릭한 행 데이터 가져오기 / Get the data for the rows from the selector in dataTable 안녕하세요! 디자인도 하고 개발도 하는 '디발자 뚝딱'입니다. 오늘은 dataTable에서 해당 행의 데이터를 가져 오는 법을 공유해드리려고 합니다. 이해를 돕기 위해 추가설명을 해드릴게요. 저 같은 경우에는 하나의 행의 데이터를 가져와서, 모달로 따로 띄우기 위해서 해당 기능을 사용했어요. 말이 조금 어렵나요? 예를 들어, dataTable에 [이름, 나이, 휴대폰번호, '더보기'버튼]이 있는 4개의 열이 있다고 칩시다. 그리고 이 내용들은 하나의 행에 차례대로 적혀서 나열이 되어 있겠죠? 여기서 '더보기'버튼을 누르면 모달이 뜨고, 모달에서는 input 태그를 사용해서 이 데이터들을 입력 및 수정할 수 있게 만드는 거죠. ('더보기'버튼을 넣는 법과, 버튼을 눌렀을 때 모달을 띄우는 건 글 하단에 링.. [제이쿼리 jQuery] 글자수 제한 / 글자수 체크 / textarea 사이즈 조절 방지 안녕하세요! 디자인도 하고 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트/제이쿼리를 사용하여 위 이미지 우측 상단에 보이는 '0자/200자'처럼 글자수를 체크하는 기능을 공유하려고 합니다. 자소서 쓸 때 많이 봤던 그림이죠? 저 글자수 채우려고 얼마나 머리를 쥐어 짜냈었는지..ㅎㅎ 자, 각설하고! 요약하면 이렇습니다. 1. 타이핑이 될 때마다 글자수가 카운트 되게 한다. 2. 200자가 넘으면 타이핑이 되지 않도록 한다. html textarea태그의 maxlenth 속성을 사용해서 글자수를 200으로 제한했습니다. 즉, 200자 이상 타이핑이 되지 않도록 하는 거죠. +) 그리고 여기서 'resize: none'은 textarea의 사이즈가 조절되지 않도록 방지하는 코드입니다. 0자..
