JQuery DataTables çok faydalı bir veri listesi eklentisi, kendi sayfa sıralama, filtreleme ve diğer işlevleri yazmanıza gerek yok, sadece belirtilen json formatını geri verin, eklenti veriyi göstermenize yardımcı olabilir. Bu faydalı tablo görüntüleme eklentisini Angular projelerine nasıl uygulayabilirim?
Bu makale, Angular+bootstrap+DataTables entegrasyonunu içerir
DataTables resmi web sitesi:Bağlantı girişi görünür.
açısal veri tabloları:Bağlantı girişi görünür.
(Dinamik web uygulamaları için Angular Structural Framework + karmaşık HTML tabloları için DataTables jQuery eklentisi)
GitHub:Bağlantı girişi görünür.
Öncelikle, aşağıda gösterildiği gibi entegrasyon sonrası etkinliğe bakalım:
Başlangıç kurulumu
Açısal veri tablosunu kullanmak için Node 8.9 veya daha yeni ve NPM 6 veya daha sonrasını kurmanız gerekir.
Bu belge yalnızca angular-cli kullanan projelerle ilgilidir. Aslında, ön uç ekosistemi artık takip edemeyeceğim bir hızla büyüyor. Yani sadece angular-cli projesi için bir eğitim var. Örneğin bir SystemJS projesi gibi çalıştırmayı başarırsanız, lütfen bu dokümantasyonu geliştirmek için bir pull request gönderin. Teşekkür ederim!
Angular-CLI sürüm 7.YZ
Angular projeler oluşturmak ve yönetmek için angular-cli kullanmanızı öneririm
Demo versiyonun 7 sürümde olduğunu uyarmak isterim. YZ versiyonu, ancak Angular-CLI'nin yeni sürümlerinde farklı bir konfigürasyon gerekebilir.
NPM
NPM ile en son sürümü almadan önce, bağımlılıklarını yüklemeniz gerekir:
Şu anki projem Angular 6.x, arayüz Bootstrap'ten bir şablon kullanıyor, jQuery referans aldı, bu yüzden kendi projem buna ihtiyaç duyuyorÖzel muamele，
NPM sadece şunları kurar:
Plug-in paketini datatables resmi web sitesinden indirin, Bootstrap 4 ve DataTables'a bakın ve aşağıdaki Dosyaları İndir'i seçin. Web Sitesi:Bağlantı girişi görünür.
İndirilen paketi "src\assets\plugins\datatables.net" dizinine çıkarıyoruz,Katalog Hayır, lütfen kendiniz oluşturun！！！
angular.json dosyasını script ve stil özelliklerine bağımlılıklar eklemek için düzenleyin:
Projeye genellikle datatables.css ve datatables.js dosyaları ekleyin.
NgModule yapılandırması, DataTablesModule'ü uygulamanın uygun seviyesine aktarın.
Rotamın yolu yüklemesi tembel olduğu için, benPek değil"app.module.ts" dosyasına içe aktarıldı, lütfenGerçek durumunuza göre ithal edin。
Eğer ithalat hatalıysa, hata şöyledir:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'dtOptions' ile bağlanamıyor çünkü 'table'ın bilinen bir özelliği değil. ("<div class="row">
<div class="col-12">
<tablo veri tablosu [HATA ->]
Sunucu tarafı sayfalanma
HTML sayfası (baseinfocompany-list.component.html):
CSS kodu (eklenmelidir ve uyarılarla):
baseinfocompany-list.component.scss dosyası:
styles.scss dosyası:
Typescript kodu (baseinfocompany-list.component.ts)
Not: HttpClientModule de app.module.ts'de aşağıdaki gibi eklenmelidir:
Çin Çin veri tabloları kodu şu şekildedir:
Turistler, bu gönderinin gizli içeriğini görmek isterseniz lütfen Yanıt
| 
Yayınlandı 29.10.2018 14:54:16
|
|
|
|
Yayınlandı 10.11.2018 21:58:48
|
Form mimarına katılın