JQuery DataTables is a very useful data list plugin, no need to write your own pagination sorting, filtering and other functions, just return the specified json format, the plugin can help you display the data. How to apply this useful table display plugin to Angular projects?
This article integrates Angular+bootstrap+DataTables
DataTables official website:The hyperlink login is visible.
angular-datatables：The hyperlink login is visible.
(Angular Structural Framework for dynamic web applications + DataTables jQuery plugin for complex HTML tables)
GitHub：The hyperlink login is visible.
First, let's take a look at the effect after integration, as shown below:
Starter installation
To use the angular data table, you need to install Node 8.9 or later and NPM 6 or later.
This document only deals with projects that use angular-cli. In fact, the front-end ecosystem is growing at a pace that I can no longer follow. So there is only a tutorial for the angular-cli project. If you manage to make it work, for example, a SystemJS project, please submit a pull request to improve this documentation. Thank you!
Angular-CLI version 7.YZ
I recommend using angular-cli to create and manage angular projects
I prefer to warn you that the demo version is on 7. YZ version, while newer versions of Angular-CLI may need to have a different configuration.
NPM
Before you can get the latest version with NPM, you need to install its dependencies:
My current project is Angular 6.x, and the interface uses a template from Bootstrap, and jQuery has been referenced, so my own project needs itSpecial treatment，
npm only installs:
Download the plug-in package from the datatables official website, check Bootstrap 4 and DataTables, and select Download files below. Website:The hyperlink login is visible.
We extract the downloaded package to the "src\assets\plugins\datatables.net" directory,Catalog No, please create it yourself！！！
Edit the angular.json file to add dependencies in the script and style properties:
Mainly add datatables.css and datatables.js files to the project.
NgModule configuration, import DataTablesModule to the appropriate level of the application.
Since my route is lazy to load the way, INot reallyImported in the "app.module.ts" file, pleaseImport according to your actual situation。
If the import is wrong, the error is as follows:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'dtOptions' since it isn't a known property of 'table'. ("<div class="row">
<div class="col-12">
<table datatable [ERROR ->]
Server-side pagination
HTML page (baseinfocompany-list.component.html):
CSS code (must be added, and with caveats):
baseinfocompany-list.component.scss file:
styles.scss file:
Typescript code (baseinfocompany-list.component.ts)
Note: HttpClientModule should also be added in app.module.ts, as follows:
The Chinese Chinese code for datatables is as follows:
Tourists, if you want to see the hidden content of this post, please Reply
|
Posted on 10/29/2018 2:54:16 PM
|
|
|
|
Posted on 11/10/2018 9:58:48 PM
|
Participate in the form architect