jquery
-
datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다. // html = 0){ $(cell).html(''); } $('input',$('.filters th').eq($(api.column(colIdx).header()).index())) .off('keyup change') .on('change', function(e){ $(this).attr('title', $(this).val()); var cursorPosition = this.selectionStart; api.column(colIdx).search(this.value != '' ? this.value : '').draw(); }) .on('keyup', function(e){ e.stopPropagation(..
DataTables columns search 기능 구현datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다. // html = 0){ $(cell).html(''); } $('input',$('.filters th').eq($(api.column(colIdx).header()).index())) .off('keyup change') .on('change', function(e){ $(this).attr('title', $(this).val()); var cursorPosition = this.selectionStart; api.column(colIdx).search(this.value != '' ? this.value : '').draw(); }) .on('keyup', function(e){ e.stopPropagation(..
2024.03.20 -
DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때 sliding 기능을 사용한다. DataTables Columns 설정 table = $('#manager-usedHistory-table').DataTable({ dom : "Bfrtip", paging : false, searching : false, buttons : [], language:eval(datatable_lang), processing: true, columns: [ ...이하생략 { data:null, className: "text-center", //defaultContent: ""+/*[[#{manager.usedhistory.list.view.content}]]*/ ""+"", ..
DataTables sliding 기능 구현DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때 sliding 기능을 사용한다. DataTables Columns 설정 table = $('#manager-usedHistory-table').DataTable({ dom : "Bfrtip", paging : false, searching : false, buttons : [], language:eval(datatable_lang), processing: true, columns: [ ...이하생략 { data:null, className: "text-center", //defaultContent: ""+/*[[#{manager.usedhistory.list.view.content}]]*/ ""+"", ..
2023.08.30 -
Jquery 의 DataTables 를 그린 후 첫번째 Row 를 선택해야할 때 아래와 같이 설정하면 된다. .DataTable({}) 을 통해 옵션 및 데이터 설정을 하고 그려준 후 이벤트 설정을 한다. 이벤트 설정 밑에 아래와 같이 DataTables ID 값. row().select() 를 통해 첫번째 Row 를 자동선택되도록 한다. TableID.row().select(); // HTML // Javascript $(document).ready(function(){ //DataTables 그리기 let dept_table = $('#manager-department-table').DataTable({ .... select: true .... }); // DataTables Select 이벤트 de..
DataTables 첫번째 Row 자동선택 하기(Select 이벤트 발생 시키기)Jquery 의 DataTables 를 그린 후 첫번째 Row 를 선택해야할 때 아래와 같이 설정하면 된다. .DataTable({}) 을 통해 옵션 및 데이터 설정을 하고 그려준 후 이벤트 설정을 한다. 이벤트 설정 밑에 아래와 같이 DataTables ID 값. row().select() 를 통해 첫번째 Row 를 자동선택되도록 한다. TableID.row().select(); // HTML // Javascript $(document).ready(function(){ //DataTables 그리기 let dept_table = $('#manager-department-table').DataTable({ .... select: true .... }); // DataTables Select 이벤트 de..
2023.08.04 -
개발환경 : SpringBoot, Jquery 필요한 input 태그 데이터와 다중 이미지 파일을 업로드 해야하는데 에러상황이 많아 정리 겸 작성한다. 아래 이미지와 같이 String 형 데이터와 int 형 데이터, 다중 이미지 파일이 존재한다. 다중 이미지 파일은 아래와 같다. 이제 실제적으로 javascript 코드를 봐보자 Javascript(Jquery) let formData = new FormData(); formData.append('b_title', 'oboTest'); formData.append('server_seq', 'oboTest2'); formData.append('b_content', 'oboTest3'); fileList.forEach((data, index) => { for..
SpringBoot 환경에서 Javascript FormData 로 image 파일 Upload개발환경 : SpringBoot, Jquery 필요한 input 태그 데이터와 다중 이미지 파일을 업로드 해야하는데 에러상황이 많아 정리 겸 작성한다. 아래 이미지와 같이 String 형 데이터와 int 형 데이터, 다중 이미지 파일이 존재한다. 다중 이미지 파일은 아래와 같다. 이제 실제적으로 javascript 코드를 봐보자 Javascript(Jquery) let formData = new FormData(); formData.append('b_title', 'oboTest'); formData.append('server_seq', 'oboTest2'); formData.append('b_content', 'oboTest3'); fileList.forEach((data, index) => { for..
2023.04.12 -
아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
Javasript input type date min, max 옵션 주기아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
2023.02.14 -
input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
HTML input 태그 maxlength 설정input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
2023.02.06