JQuery DataTables adalah plugin daftar data yang sangat berguna, tidak perlu menulis penyortiran paginasi Anda sendiri, pemfilteran, dan fungsi lainnya, cukup kembalikan format json yang ditentukan, plugin dapat membantu Anda menampilkan data. Bagaimana cara menerapkan plugin tampilan tabel yang berguna ini ke proyek Angular?
Artikel ini mengintegrasikan Angular+bootstrap+DataTables
Situs web resmi DataTables:Login hyperlink terlihat.
sudut-datatabel:Login hyperlink terlihat.
(Kerangka Struktural Angular untuk aplikasi web dinamis + plugin DataTables jQuery untuk tabel HTML yang kompleks)
GitHub:Login hyperlink terlihat.
Pertama, mari kita lihat efeknya setelah integrasi, seperti yang ditunjukkan di bawah ini:
Instalasi pemula
Untuk menggunakan tabel data sudut, Anda perlu menginstal Node 8.9 atau yang lebih baru dan NPM 6 atau yang lebih baru.
Dokumen ini hanya membahas proyek yang menggunakan angular-cli. Faktanya, ekosistem front-end tumbuh dengan kecepatan yang tidak dapat saya ikuti lagi. Jadi hanya ada tutorial untuk proyek angular-cli. Jika Anda berhasil membuatnya berfungsi, misalnya, proyek SystemJS, silakan kirimkan permintaan tarik untuk meningkatkan dokumentasi ini. Terima kasih!
Angular-CLI versi 7.YZ
Saya merekomendasikan menggunakan angular-cli untuk membuat dan mengelola proyek sudut
Saya lebih suka memperingatkan Anda bahwa versi demo ada di 7. Versi YZ, sedangkan versi Angular-CLI yang lebih baru mungkin perlu memiliki konfigurasi yang berbeda.
NPM
Sebelum Anda bisa mendapatkan versi terbaru dengan NPM, Anda perlu menginstal dependensinya:
Proyek saya saat ini adalah Angular 6.x, dan antarmukanya menggunakan template dari Bootstrap, dan jQuery telah direferensikan, jadi proyek saya sendiri membutuhkannyaPerlakuan khusus，
Hanya menginstal npm:
Unduh paket plug-in dari situs web resmi datatables, periksa Bootstrap 4 dan DataTables, dan pilih Unduh file di bawah ini. Situs web:Login hyperlink terlihat.
Kami mengekstrak paket yang diunduh ke direktori "src\assets\plugins\datatables.net",Katalog No, silakan buat sendiri！！！
Edit file angular.json untuk menambahkan dependensi dalam properti skrip dan gaya:
Terutama menambahkan file datatables.css dan datatables.js ke proyek.
Konfigurasi NgModule, impor DataTablesModule ke tingkat aplikasi yang sesuai.
Karena rute saya malas untuk memuat jalan, sayaTidak benar-benarDiimpor dalam file "app.module.ts", silakanImpor sesuai dengan situasi aktual Anda。
Jika impor salah, kesalahannya adalah sebagai berikut:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Tidak dapat mengikat ke 'dtOptions' karena ini bukan properti 'table' yang diketahui. ("<div class="row">
<div class="col-12">
<tabel data tabel [ERROR ->]
Penomoran halaman sisi server
Halaman HTML (baseinfocompany-list.component.html):
Kode CSS (harus ditambahkan, dan dengan peringatan):
baseinfocompany-list.component.scss:
styles.scss:
Kode typescript (baseinfocompany-list.component.ts)
Catatan: HttpClientModule juga harus ditambahkan dalam app.module.ts, sebagai berikut:
Kode Cina Cina untuk tabel data adalah sebagai berikut:
Wisatawan, jika Anda ingin melihat konten tersembunyi dari posting ini, silakan Jawab
|
Diposting pada 29/10/2018 14.54.16
|
|
|
|
Diposting pada 10/11/2018 21.58.48
|
Berpartisipasi dalam bentuk arsitek