JavaScript/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 -
동적으로 javascript 에서 Select Box option 값을 추가 및 삭제해보자 아래와 같이 Select Box 가 존재한다. 선택 전체 제목 내용 작성자 제목+내용 제목+내용+작성자 $("#server_seq option[value='전체']").remove(); 특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다. $("#server_seq").append("특정값"); 특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다. $("#server_seq").children('option:not(:first)').remove(); 첫번째값을 제외하고 모든 option 값을 삭제..
[Jquery] Select Box option 추가 및 삭제동적으로 javascript 에서 Select Box option 값을 추가 및 삭제해보자 아래와 같이 Select Box 가 존재한다. 선택 전체 제목 내용 작성자 제목+내용 제목+내용+작성자 $("#server_seq option[value='전체']").remove(); 특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다. $("#server_seq").append("특정값"); 특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다. $("#server_seq").children('option:not(:first)').remove(); 첫번째값을 제외하고 모든 option 값을 삭제..
2023.03.29 -
아래와 같이 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 -
jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다. $("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다. $("#form 태그 id").serialize() $("#form 태그 id").serialize(); // 결과 a=123&b=456&c=789 $("#form 태그 id").serializeArray() $("#form 태그 id").serializeArrary(); // 결과 [{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}] 위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 ..
[JQuery] Form 태그 데이터 JSON 형태로 넘기기jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다. $("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다. $("#form 태그 id").serialize() $("#form 태그 id").serialize(); // 결과 a=123&b=456&c=789 $("#form 태그 id").serializeArray() $("#form 태그 id").serializeArrary(); // 결과 [{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}] 위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 ..
2022.12.13