Language/CSS&javascript

jquery datatable move to page 페이지 수동 이동

jquery datatable 에서 페이징 처리를 제공 하고 있지만 리스트에서 이벤트가 발생하거나 새로고침을 하거나 기타등등의 이유로 페이지를 강제로 이동시켜야 하는 경우가 있습니다. 사용방법 let page_datatable = $("#sample_datatable").DataTable(); page_datatable.page(num).draw(false); page(이동할 페이지번호).draw(false) 를 실행해 주면 됩니다. 이동할 페이지 번호는 1페이지라면 0을 입력해 주어야 합니다. 현재 페이지 번호 확인하기 jquery datatable page number 페이지 번호 가져오기 확인 jquery datatable 페이징 처리를 사용하면 하단에 페이지 번호가 나오고 알아서 동작을 한다. 하..

2023. 8. 9. 15:38

Language/CSS&javascript

jquery datatable page number 페이지 번호 가져오기 확인

jquery datatable 페이징 처리를 사용하면 하단에 페이지 번호가 나오고 알아서 동작을 한다. 하지만 복잡한 이벤트가 발생하는 페이지에서 jquery datatable 을 사용하다 보면 페이지 번호를 가지고 와서 처리를 해야하는 경우가 있다. 그럴 때 사용하는 방법은 아래 와 같다. 사용방법 let page_datatable = $(#page_datatable).DataTable(); 우선 데이터 테이블을 변수에 담아준다. 그럼 해당 값을 가지고 페이지 번호를 가져온다. let page_number = page_datatable.info().page; 이렇게 page_number 가 가져온다. 여기서 특이점은 페이징처리에서 나오는 페이지 번호는 1부터 시작하지만 이 page 번호는 0부터 시작한..

2023. 8. 9. 08:46

Language/CSS&javascript

클립보드로 복사하기 javascript jQuery

프로세스 copy_btn 버튼을 생성 복사하고 싶은 내용을 div 에 넣어주기 방문자가 copy_btn 버튼을 클릭하면 input box 에 해당 내용 넣어주기. 해당 input box. 내용을 클립보드로 복사 방문자에게 클립복사 완료 메시지 뿌려주기. INPUT , div 만들기 복사할 내용 보여주기. input 은 display:none 이나 hidden 으로 처리하면 선택을 할 수 없기 때문에 하면 안됩니다. 복사할 내용은 꼭 div가 아니어도 상관 없습니다. 필요에 따라 변경하시면 됩니다. 클립보드 복사 스크립트 클립보드에 복사하는 스크립트 문구는 아래와 같습니다. execCommand 는 IE 9.0 미만과 사파리는 지원하지 않습니다. 그렇기 때문에 try 로 묶어서 사용하지 못할 경우 aler..

2023. 2. 27. 11:49

Language/CSS&javascript

[JavaScript] jQuery 라디오버튼, 체크박스 체크 된 값 가져오기

checkbox 와 radio checkbox 와 radio 버튼을 간단하게 설명하자면 checkbox 여러개를 선택 가능 선택한거 취소 가능 한개도 선택하지 않을 수 있음. radio 반드시 한개만 선택 가능 선택하면 같은 name 을 가진 것들 중에 한개를 반드시 선택. 선택한거 취소 불가능 radio 버튼 선택한 값 가져오기 라디오 버튼의 체크 여부와 체크된 값을 jQuery 를 사용하여 가져오는 값에 대하여 알아보면 아래와 같다. var radioVar = $('input[name=radio_test]:checked').val(); // 선택된 값 var radio_check = $('input[name=radio_test]').is(":checked"); // 체크 여부 checkbox 선택한 ..

2023. 1. 17. 16:41

Language/CSS&javascript

[JavaScript] var, let, const 차이점

JavaScript 에서 변수 선언 방식에는 var, let, const 가 있다. 이들의 차이점은 무엇이며 어떻게 사용하면 되는지에 대하여 알아보자. 1. var 의 문제점 예전에는 JavaScript 에서 변수는 var 를 사용하였다. 하지만 var 는 큰 단점을 가지고 있다. var text = 'java' console.log(text) var text = 'script' console.log(text) Output: java script 변수를 한 번 더 선언 했지만 해당 코드는 에러가 발생하지 않고 각 다른 값이 출력 되는 것을 볼 수 있다. 옛날에는 유연한 변수선언 방식으로 장점으로 꼽혔으나, 현재는 이런 유연한 때문에 오류가 발생하면 파악하기도 어렵고 값이 이렇게 변경될 여지가 있다. 그래..

2023. 1. 12. 18:32

Language/CSS&javascript

[JavaScript] 한글, 영어(알파벳), 숫자 만 입력 받기(정규표현식)

등록이나 수정페이지에서 입력 받을 때 숫자만 입력 받거나, 영어-알파벳 또는 한글만 입력 받을 수 있도록 제한이 필요할 수가 있습니다. 숫자는 number type을 사용할 수도 있지만 꼭 text type 으로 받아야 한다면 정규표현식을 사용하면 쉽게 구현하여 확인 할 수 있습니다. 어떻게 구현하는지 알아보겠습니다. 정규표현식 정규표현식의 문법을 간단하게 알아보면 아래와 같습니다. ^ : 문자열의 시작을 의미 [pattenr] : 찾으려는 패턴 \+ : 문자 1개 이상을 의미 $ : 문자열의 끝을 의미 문자열에 한글만 있는지 확인 정규표현식 패턴 /^[ㄱ-ㅎ|가-힣]+$/ 는 한글 1개 이상을 의미합니다. const regex = /^[ㄱ-ㅎ|가-힣]+$/; let str = "가나다"; console..

2023. 1. 12. 17:32

Language/CSS&javascript

[HTML] input number 숫자 최소값, 최대값 설정

input number 숫자만 입력 받고 싶을 때는 type="text 가 아닌 아래와 같이 입력해 주면 된다.

2023. 1. 11. 15:17

Language/CSS&javascript

[CSS] input box 테두리 없애기 ( + 부트스트랩 bootstrap 5 )

html 에서 input box의 테두리를 없애야 필요가 있을 경우가 있습니다. 그럴때는 CSS 으로 추가해 주어야 합니다. 부트스트랩 부트스트랩을 사용하고 있다면 기존에 제공해 주고 있는 것으로 사용할 수 있습니다. 부트스트랩을 사용하면 조금 더 깔끔한 코드를 얻을 수 있습니다.

2023. 1. 10. 16:50

Language/CSS&javascript

jQuery 데이타(data) 속성 값으로 데이터 요소 찾는 방법

data 넣는 방법 $('li').data('seq', 1); 단순하게 이렇게 넣으면 데이터가 들어간다. 하지만 데이터를 넣고 이 데이터를 가지고 무언가 따로 처리하여 찾아야 한다면 못찾을 확률이 있다. 만약 동적 처리를 하기 위해서 찾았는데 못찾을 경우 바꾸어 주면 된다. $('li').attr('data-seq', 1); 그럴 경우에는 attr 속성을 사용하여 넣어주면 된다. data 찾는 방법 이렇게 li에 속성으로 seq 값을 넣어주었다. 이 seq 값으로 li를 찾는다면 아래와 같이 하면 된다. $('li').find('[data-seq="1"]') 그럼 해당 dat의 값을 가지고 요소를 찾을 수 있다.

2023. 1. 6. 10:28

Language/CSS&javascript

[jQuery, javascript] 동적으로 radio, checkbox를 만들었을 경우 이벤트 동작 처리하기 - onclick, onchange

radio 와 checkbox. 등은 선택 했을 경우와 값이 바뀔 경우 이벤트를 처리하는 경우가 종종 있다. 그런데 이 이벤트를 제대로 작성했는데도 동작을 하지 않았다. $("input:radio[name='radio_test']").on("change", function(){ alert("왜 안뜨니..."); }); 무엇이 문제 일까 고민을 했다. 다른 점은 저 라디오 버튼을 동적으로 생성 했다는 것이었다. 이럴 경우에는 $(document).on을 사용하여 이벤트를 바인딩 하면 된다. $(document).on('change', "input:radio[name='radio_test']", function() { alert("이제 뜬다"); }); document.ready 나 document.load..

2022. 6. 23. 17:52