|
|
Publicado em 29/10/2018 14:54:16
|
|
|
|
O JQuery DataTables é um plugin de lista de dados muito útil, não precisa escrever suas próprias funções de ordenação de paginação, filtragem e outras funções, basta devolver o formato json especificado, o plugin pode ajudar a exibir os dados. Como aplicar esse útil plugin de exibição de tabelas em projetos Angular?
Este artigo integra Angular+bootstrap+DataTables
Site oficial do DataTables:O login do hiperlink está visível.
Tabelas de dados angulares:O login do hiperlink está visível.
(Angular Structural Framework para aplicações web dinâmicas + plugin DataTables jQuery para tabelas HTML complexas)
GitHub:O login do hiperlink está visível.
Primeiro, vamos analisar o efeito após a integração, como mostrado abaixo:
Instalação do motor de arranque
Para usar a tabela de dados angular, você precisa instalar o Node 8.9 ou posterior e o NPM 6 ou posterior.
Este documento trata apenas de projetos que utilizam angular-cli. Na verdade, o ecossistema front-end está crescendo em um ritmo que eu não consigo mais acompanhar. Então, existe apenas um tutorial para o projeto angular-cli. Se você conseguir fazer funcionar, por exemplo, um projeto SystemJS, por favor, envie um pull request para melhorar essa documentação. Obrigado!
Angular-CLI versão 7.YZ
Recomendo usar o Angular-CLI para criar e gerenciar projetos Angular
Prefiro avisar que a versão demo está no 7. YZ, enquanto versões mais recentes do Angular-CLI podem precisar de uma configuração diferente.
NPM
Antes de poder obter a versão mais recente com NPM, você precisa instalar suas dependências:
Meu projeto atual é Angular 6.x, e a interface usa um template do Bootstrap, e o jQuery já foi referenciado, então meu próprio projeto precisa deleTratamento especial，
Instalações apenas de NPM:
Baixe o pacote de plug-ins no site oficial do datatables, confira Bootstrap 4 e DataTables, e selecione Baixar arquivos abaixo. Site:O login do hiperlink está visível.
Extraímos o pacote baixado para o diretório "src\assets\plugins\datatables.net",Catálogo Não, por favor, crie você mesmo！！！
Edite o arquivo angular.json para adicionar dependências no script e nas propriedades de estilo:
Principalmente adicione arquivos datatables.css e datatables.js ao projeto.
Configuração do NgModule, importar DataTablesModule para o nível apropriado da aplicação.
Como minha rota é preguiçosa para carregar o caminho, euNão exatamenteImportado no arquivo "app.module.ts", por favorImporte de acordo com sua situação real。
Se a importação estiver errada, o erro é o seguinte:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Não dá para vincular a 'dtOptions' porque não é uma propriedade conhecida de 'table'. ("<div class="row">
<classe de div="col-12">
<tabela de dados [ERRO ->]
Paginação do lado do servidor
Página HTML (baseinfocompany-list.component.html):
Código CSS (deve ser adicionado, com ressalvas):
baseinfocompany-list.component.scss arquivo:
Arquivo styles.scss:
Código Typescript (baseinfocompany-list.component.ts)
Nota: HttpClientModule também deve ser adicionado em app.module.ts, conforme segue:
O código chinês chinês para tabelas de dados é o seguinte:
Turistas, se quiserem ver o conteúdo oculto deste post, por favor Resposta
|
Anterior:Os trabalhadores de pós-produção de cinema e televisão, assim como aqueles que gostam de estudar, devem usar tecnologia de chave de filmes e televisãoPróximo:O NPM remove o módulo de desinstalação
|
Publicado em 10/11/2018 21:58:48
|
Participe do formulário arquiteto