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バージョンですが、Angular-CLIの新しいバージョンは異なる構成が必要になる場合があります。
NPM
NPM付きの最新バージョンを取得する前に、まずその依存関係をインストールする必要があります:
現在のプロジェクトはAngular 6.xで、インターフェースはBootstrapのテンプレートを使っており、jQueryも参照されているので、自分のプロジェクトにも必要です特別扱い，
NPMは以下のみをインストールします:
datatables公式ウェブサイトからプラグインパッケージをダウンロードし、Bootstrap 4とDataTablesを確認し、下の「Download files」を選択してください。 ウェブサイト:ハイパーリンクのログインが見えます。
ダウンロードしたパッケージを「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 class=「row」>
<div class="col-12">
<テーブルデータテーブル [エラー ->]
サーバーサイドページ
HTMLページ(baseinfocompany-list.component.html):
CSSコード(必須追加、注意点付き):
BaseInfoCompany-list.component.scss ファイル:
styles.scss ファイル:
Typescriptコード(baseinfocompany-list.component.ts)
注:HttpClientModuleはapp.module.tsにも以下のように追加されるべきです。
データテーブルの中国語コードは以下の通りです:
観光客の皆さん、この投稿の隠された内容を見たい方は、どうぞ 答える
| 
掲載地 2018/10/29 14:54:16
|
|
|
|
掲載地 2018/11/10 21:58:48
|
フォームアーキテクトに参加してください