728x90
반응형

Front/JS & jQuery 438

[jQuery] daterangepicker 사용 ( 기간 검색하기 )

datepicker는 jQuery 에서 제공하는 달력 위젯인데, 쉽게 말하면 datepicker는 달력 1개 daterangepicker는 달력 2개가 띄워져서 기간으로 날짜를 선택가능하다는 것이다. dataranepicker를 사용하려면 우선 jQuery파일들을 import해야한다. $( 'selector' ). daterangepicker() ; 하면 선택한 요소에 daterangepicker 위젯이 띄워진다. ex ) $('input[name="dates"]').daterangepicker(); 참고사이트에 예제와 option들과 event 종류에 대해 자세히 설명되어있어 첨부한다. 참고: https://www.daterangepicker.com/ Date Range Picker — JavaScri..

Front/JS & jQuery 2022.06.09

[jQuery] .siblings()

Syntax $("선택자").siblings(); // 선택한 요소의 형제요소들을 선택한다. $("선택자").siblings("선택자"); // 선택한 요소의 형제 중에 선택자를 이용해 선택한다. Ex $('.btn-outline-primary').click(function(){ $(this).siblings().removeClass("active"); $(this).addClass("active"); }); ➡ 클릭한 요소의 형제들을 선택해서 active클래스를 제거해주고 클릭한 요소에 active클래스를 추가해준다.

Front/JS & jQuery 2022.06.06

[jQuery][datatables] columnDefs . width

Ex $('#table').DataTable({ columnDefs : [ ,{ "width": "10%", "targets": [2,3,4] } ,{ "width": "15%", "targets": [1] } ] ➡ targets로 설정된 열의 너비를 설정해준다. https://datatables.net/reference/option/columns.width columns.width columns.width Since: DataTables 1.10 Column width assignment. Description This parameter can be used to define the width of a column, and may take any CSS value (3em, 20px etc). Ple..

Front/JS & jQuery 2022.06.05

[jquery][datatables] 열너비조정 함수모음

https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/ jQuery DataTables: Column width issues with Bootstrap tabs | Gyrocode.com Provides solutions to common problems with incorrect column widths for a table using jQuery DataTables and Bootstrap tabs. www.gyrocode.com 너비를 다시 계산해주는 함수가 columns.adjust() 만 알고있었는데 생각보다 다양한 함수가 있다는 것을 알게되어서 잘 설명해놓은 포스트를 첨부해놓는다.

Front/JS & jQuery 2022.06.04

[js][datatables] columns.adjust()

Syntax column.adjust() ➡ 레이아웃의 너비를 다시 계산한다. Example $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); }); ➡ 부트스트랩의 탭을 사용했을 때 다른 탭을 눌러서 다른 테이블이 다시 로딩될때 datatables의 table 너비를 다시 계산하라는 명령. columns.adjust().draw() ➡ 너비를 다시 계산한 후 다시 그리라는 명령. 참조 https://datatables.net/reference/api/columns.adjust() columns.adjust() columns.adjust() ..

Front/JS & jQuery 2022.06.02

[jQuery] .trigger('click') 과 .on('click')

.trigger('click') 과 .on('click')의 차이점은 trigger는 클릭이벤트를 강제로 실행시키는 것 click말고도 여러가지 event들을 사용할 수 있다. $(selector).trigger(event,eventObj,param1,param2,...) 내가 직접실행하지 않아도 강제로 이벤트가 실행된다. https://www.w3schools.com/jquery/event_trigger.asp jQuery trigger() Method W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, ..

Front/JS & jQuery 2022.05.31

[jQuery] .attr() .prop() 차이

https://devlogofchris.tistory.com/58 [$,JQuery] .attr()과 .prop()의 차이점 [jQuery] .attr() 과 .prop() 의 차이 jQuery 를 사용하다 보면 태그들의 속성값을 정의하거나 가져오기 위해 .attr() 함수를 사용하는 경우가 많을 것이다. 그런데 jQuery 1.6 이후 부터 .attr() 함수가 용.. devlogofchris.tistory.com 동적으로 생성한 selectbox를 조건에 따라 selected 속성을 주는 요소를 변경시키는 이벤트를 주어야 했는데, 적용이 처음 로딩시에만 되고 작동을 하지 않아서 구글링을 해보니 jQuery 1.6이후부터 .attr() 함수가 용도에 따라 attr()과 .prop()으로 분리된다고 되어..

Front/JS & jQuery 2022.05.30
728x90
반응형