withBootstrapOptions를 사용한 각도 데이터 테이블의 스타일 지정 필터 및 페이지 매김 컨트롤

Question

각도 데이터 테이블의 필터링 및 페이지 매김 컨트롤의 모양에 영향을 미치려고하고 프레임 워크의 withBootstrapOptions를 사용하여 수행 할 수 있음을 알게되었습니다. 그러나 페이지 매김 항목, 페이지 크기 입력란 및 필터 입력란의 스타일에 영향을 줄 수있는 옵션을 찾지 못하는 것 같습니다. 내가하고 싶은 것은 입력 필드와 버튼의 높이를 더 작게 만드는 것입니다. 아래의 코드는 지금까지 시도한 것입니다 : 나는 스타일링을 할 테이블에 내 자신의 클래스를 추가하려고 봤는데의 xxx에 ul 요소의 클래스를 설정 할 수 있었다

.withBootstrap() 
.withBootstrapOptions({ 
    TableTools: { 
     classes: { 
      container: 'btn-group', 
      buttons: { 
       normal: 'btn btn-danger' 
      } 
     } 
    }, 
    ColVis: { 
     classes: { 
      masterButton: 'btn btn-primary' 
     } 
    }, 
    pagination: { 
     classes: { 
      ul: 'xxx', 
      li: 'yyy', 
      a: 'zzz' 
     } 
    } 
}) 

위의 코드를 사용하여 페이지 매김을 제어했지만 li 또는 a 요소로 작업하려고 시도했지만 작동하지 않습니다. 이것이 가능한가? 누군가가 날 필터 입력 필드 및 페이지 매기기 필드/단추 높이 조작 할 수있는 예제를 제공 할 수 있습니까?

'withBootstrapOptions'도우미와 함께 사용할 수있는 모든 옵션에 대한 설명서를 어디에서 찾을 수 있는지 알고있는 사람이 있습니까? 내 검색을 통해 찾을 수 없습니다.

Answer 1

브라우저에서 개발자 도구를 사용하는 경우 각도 데이터 테이블은 이미 스타일을 지정할 수있는 페이지 매기기 단추에 클래스를 배치합니다. Chrome에서 개발자 도구를 보려면 요소를 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'를 선택합니다. 사용 가능한 클래스를 스타일별로 볼 수 있어야합니다.

현재 페이지 매기기 단추의 클래스는 "paginate_button 현재"입니다. 다른 버튼에는 "paginate_button"클래스가 있습니다.

CSS를 사용하면 원하는대로 스타일을 지정할 수 있습니다. 예를 들어

,

.paginate_button{ 
background: #fff; 
cursor: pointer; 
} 
.paginate_button:hover{ 
    background: #b20000; 
} 
.paginate_button.current{ 
    background: #b20000; 
} 

는 귀하의 페이지에 그 스타일을 넣습니다. 패딩과 여백도 변경할 수 있어야합니다. 이것은 자바 스크립트에서 변경하려고하는 것보다 훨씬 더 깨끗하게 보일 것입니다.