JQuery DataTables는 매우 유용한 데이터 리스트 플러그인입니다. 직접 페이지 정렬, 필터링 등 기능을 만들 필요 없이, 지정된 json 형식으로 반환하기만 하면 됩니다. 플러그인이 데이터를 표시하는 데 도움을 줄 수 있습니다. 이 유용한 표 표시 플러그인을 Angular 프로젝트에 어떻게 적용할 수 있을까요?
이 문서는 Angular+부트스트랩+DataTables를 통합합니다
DataTables 공식 웹사이트:하이퍼링크 로그인이 보입니다.
angular-datatables:하이퍼링크 로그인이 보입니다.
(동적 웹 애플리케이션을 위한 Angular Structural Framework + 복잡한 HTML 테이블을 위한 DataTables jQuery 플러그인)
GitHub:하이퍼링크 로그인이 보입니다.
먼저, 아래에 보이는 것처럼 적분 후의 효과를 살펴보겠습니다:
스타터 설치
Angular 데이터 테이블을 사용하려면 Node 8.9 이상과 NPM 6 이상을 설치해야 합니다.
이 문서는 angular-cli를 사용하는 프로젝트만을 다룹니다. 사실, 프론트엔드 생태계가 제가 따라잡을 수 없는 속도로 성장하고 있습니다. 그래서 angular-cli 프로젝트에 대한 튜토리얼만 있습니다. 예를 들어, SystemJS 프로젝트에서 작동하게 된다면, 이 문서를 개선하기 위해 풀 리퀘스트를 제출해 주세요. 감사합니다!
Angular-CLI 버전 7.YZ
angular 프로젝트를 만들고 관리할 때는 angular-cli를 사용하는 것을 추천합니다
데모 버전이 7에 있다는 점을 미리 알려드리고 싶습니다. YZ 버전은 다른 구성이 필요할 수 있습니다.
NPM
NPM이 포함된 최신 버전을 받기 전에, 그 의존성을 설치해야 합니다:
현재 프로젝트는 Angular 6.x이고, 인터페이스는 Bootstrap의 템플릿을 사용했으며, jQuery도 참조되어 제 프로젝트에 필요합니다특별 대우，
NPM은 다음만 설치합니다:
datatables 공식 웹사이트에서 플러그인 패키지를 다운로드하고, Bootstrap 4와 DataTables를 확인한 후 아래의 다운로드 파일을 선택하세요. 웹사이트:하이퍼링크 로그인이 보입니다.
다운로드한 패키지를 "src\assets\plugins\datatables.net" 디렉터리로 압축 해제합니다.카탈로그 아니요, 제발 직접 만들어 주세요！！！
스크립트와 스타일 속성에 의존성을 추가하도록 angular.json 파일을 편집하세요:
주로 프로젝트에 datatables.css 및 datatables.js 파일을 추가하는 것입니다.
NgModule 구성, DataTablesModule을 애플리케이션의 적절한 수준으로 가져오세요.
제 경로가 길을 적는 게 게을라서,설마"app.module.ts" 파일로 가져와주세요실제 상황에 맞게 수입하세요。
임포트가 잘못되면 오류는 다음과 같습니다:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'dtOptions'는 'table'의 알려진 속성이 아니기 때문에 바인딩할 수 없습니다. ("<div 클래스="행">
<div class="col-12">
<테이블 데이터테이블 [오류 ->]
서버 측 페이지네이션
HTML 페이지 (baseinfocompany-list.component.html):
CSS 코드 (반드시 추가해야 하며, 주의사항 있음):
BaseInfoCompany-list.component.scss 파일:
styles.scss 파일:
타입스크립트 코드 (baseinfocompany-list.component.ts)
참고: HttpClientModule도 app.module.ts에 다음과 같이 추가되어야 합니다:
데이터테이블의 중국어 코드는 다음과 같습니다:
관광객 여러분, 이 게시물의 숨겨진 내용을 보고 싶으시다면 부탁드립니다 회답
| 
게시됨 2018. 10. 29. 오후 2:54:16
|
|
|
|
게시됨 2018. 11. 10. 오후 9:58:48
|
형태 건축가에 참여하세요