데이터테이블 (4) 썸네일형 리스트형 [제이쿼리 jQuery] dataTable 엑셀 추출 시 특정 열 제외하는 방법 / Excluding columns when exporting from dataTable to excel 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 dataTable을 엑셀로 추출할 때 특정 열을 제외하고 추출하는 방법에 대해 공유하겠습니다. 자바스크립트 중 제이쿼리로 데이터테이블(dataTable)을 사용할 때, '엑셀로 내보내기' 기능을 저는 가장 많이 사용합니다. 만약 dataTable 안에 엑셀 추출 기능을 어떻게 넣는지 모르겠다면, 아래의 지난 포스팅을 참고하여 추가해 주세요! [제이쿼리 jQuery] dataTable 엑셀 기능 구현 / dataTable 엑셀 버튼 안 보일 때! copy, PDF, print 모두 다 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트나 제이쿼리로 개발할 때 사용하는 dataTabl.. [제이쿼리 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라는 이름으로..
