如何创建一个公共服务以将 jQuery 数据表集成到 angular 中的所有页面 [英] How to create a common service to integrate jQuery datatable for all pages in angular
问题描述
我想创建公共服务以在多个页面上集成 jQuery 数据表(带有导出按钮).
我已经安装了 jquery 和 jquery 类型.还在 tsconfig types 数组中包含了 jquery.
类型":[jQuery"]
在索引页上包含数据表所需的 CDN.
在typings.d.ts中添加了一个JQuery接口:
interface JQuery {<dataTable>(options?: any): any;}
角度服务:
ApplyDatatable() {$(".mydataTable").dataTable({"pagingType": "full_numbers","iDisplayLength": 10,bJQueryUI:真,"aLengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],选择:真,"asorting": [],aoColumnDefs":[{'bSortable':假,'aTargets': ['disableSorting', 'noExport']}],纽扣: [{扩展:'集合',文本:'出口',纽扣: [//'复制',{扩展:'copyHtml5',出口选项:{列:':可见',列:thead th:not(.noExport)"}},{扩展:'csvHtml5',出口选项:{列:':可见',列:thead th:not(.noExport)"}}],dom: 'lfBrtip',});}
出现错误:
jquery__WEBPACK_IMPORTED_MODULE_6__(...).dataTable 不是函数(在浏览器控制台上).
编译项目时出现错误属性 'dataTable' 在类型 'JQuery' 上不存在
当使用 jQuery 插件时,您应该创建一个 Angular 组件作为数据表的包装器.然后就可以在组件渲染后调用jQuery插件了.
import { Component, AfterViewInit } from '@angular/core';导入'jquery';@成分({选择器:'应用程序数据表',...})导出类 AppDatatables 实现 AfterViewInit {ngAfterViewInit() {($(".mydataTable") as any).dataTable({...});}}
组件模板:
<小时>
因为您已经在另一个问题 如何为每个新页面(视图)呈现这个,这个问题现在也解决了,因为每次加载/创建新页面时都会重新添加组件.
I want to create common service to integrate jQuery datatables(with export buttons) on multiple pages.
I have installed jquery and typings for jquery. Also have included jquery in tsconfig types array.
"types": [
"jquery"
]
Included required cdn(s) for datatable on index page.
Added an interface JQuery in typings.d.ts :
interface JQuery {
<dataTable>(options?: any): any;
}
Angular Service :
ApplyDatatable() {
$(".mydataTable").dataTable({
"pagingType": "full_numbers",
"iDisplayLength": 10,
bJQueryUI: true,
"aLengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],
select: true,
"aaSorting": [],
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': ['disableSorting', 'noExport']
}],
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
//'copy',
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
columns: "thead th:not(.noExport)"
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible',
columns: "thead th:not(.noExport)"
}
}
],
dom: 'lfBrtip',
});
}
Getting error :
jquery__WEBPACK_IMPORTED_MODULE_6__(...).dataTable is not a function (on browser console).
while compiling project getting the error Property 'dataTable' does not exist on type 'JQuery'
When using a jQuery plugin, you should create an Angular component as a wrapper for the datatable. Then you can call the jQuery plugin after the component renders.
import { Component, AfterViewInit } from '@angular/core';
import 'jquery';
@Component({
selector: 'app-datatables',
...
})
export class AppDatatables implements AfterViewInit {
ngAfterViewInit() {
($(".mydataTable") as any).dataTable({
...
});
}
}
Component template:
<div class="mydataTable"></div>
Since you already asked in another question how to render this for every new page(view), that problem is solved now as well, since the component will be re-added every time a new page is loaded/created.
这篇关于如何创建一个公共服务以将 jQuery 数据表集成到 angular 中的所有页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!