DataTable (11) 썸네일형 리스트형 [제이쿼리 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] dataTable 안에 리스트 번호 넣기 안녕하세요! 디자인도 하고 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 dataTable 안에 리스트 번호 넣는 내용을 넣어볼게요. 자바스크립트, 제이쿼리를 하다보면 유용하게 쓰이는 dataTable! 이번에도 매우 간단한 내용이니까, 쉽게 따라하실 수 있을 거예요. 완성된 모습 자세히 보면 왼쪽 열에 리스트 번호가 적혀 있죠? 확대하면 이렇게 보입니다! 리스트 앞에 번호를 넣는 법 js안의 dataTable 코드를 아래와 같이 수정해 주세요. api를 연동하고 서버에서 불러오는 데이터의 갯수에 따라 리스트 번호가 순차적으로 매겨지는 건데요. dataSrc 안에 해당 코드를 넣어주면 됩니다. 코드에서 '// 리스트번호' 주석을 봐주세요. 반복문을 통해 리스트 번호가 listIndex라는 이름으로.. [제이쿼리 jQuery] dataTable 안에 버튼 넣기 / dataTable 안에 버튼 눌러서 모달 열기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 dataTable안에 버튼을 넣는 법에 대해 공유하려 합니다. 저 같은 경우는 dataTable에 버튼을 넣고 버튼을 누르면 모달이 열리도록 작업했어요. 완성된 모습 마지막 column 2개에 버튼이 생성되어 있는데요. 확대하면 이렇습니다. 알고 나면, 굉장히 쉬운 dataTable! 🥰 아래 이미지처럼 dataTable 코드의 columns 안에 태그를 직접 넣어주면 됩니다. data-target을 사용하여 버튼을 눌렀을 때 열릴 모달을 호출해 주세요. 참고용 html 코드 또, 보면 알겠지만 data-target, data-toggle을 통해 버튼을 눌렀을 때 모달을 뜨게 할 수도 있어요. 여기서 '#listView'는.. [제이쿼리 jQuery] dataTable 엑셀 기능 구현 / dataTable 엑셀 버튼 안 보일 때! copy, PDF, print 모두 다 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트나 제이쿼리로 개발할 때 사용하는 dataTable에 엑셀 기능을 추가하는 방법에 대해 알아보겠습니다. 생각 보다 진짜 간단하니까 천천히 따라해 주세요 :) 1. 해당 내용을 복사 후 > html body 하단에 붙여넣기 2. js 파일의 dataTable 코드에 엑셀 기능 추가하기 이미지의 238번~243번 줄이 해당 내용입니다. 이 코드를 추가 했을 때 dataTable에 '엑셀 다운로드'버튼이 안 생긴다면, 십중팔구 1번 과정을 생략한 경우예요. (는 사실 내 이야기) 이렇게 파일명(title), 버튼에 들어갈 글자(text)까지 정할 수 있습니다. 엑셀 말고 복사, PDF, 프린트 기능이 사용하고 싶다면,.. [자바스크립트 js] dataTable data to string / 말줄임(...) 방법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 '말줄임'하는 법에 대해 공유하려 합니다. 말줄임은 보통 한정된 공간에서 텍스트 내용이 너무 길어지면 사용하는데요. 예를 들어, 국민 포털 네이버에서 뉴스탭에 들어가보면 이런 모습을 볼 수 있죠. 빨간색 동그라미로 표시한 부분을 봐주세요. 표시된 부분이 '말줄임'을 사용한 거랍니다. 자, 그럼 말줄임 적용하는 코드를 보여드릴게요. api에서 data를 가져왔다고 가정한 코드입니다. 그리고 더 나아가, dataTable에서 data를 렌더링할 때 해당 코드를 보고 따라하시면 되는데요. 순서대로 설명을 해드릴게요. limit 라는 변수 안에 40을 할당합니다. 글자로 치면 40자가 되겠죠? 이번..
