blocks|key|1693292|text|只需将.css文件添加到样式部分，将.js文件添加到脚本部分，添加到angular(-cli).json中。我想这会解决你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1693293|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Just add your .css files in styles section and .js files in Scripts section, in angular(-cli).json. I think this would resolve your issues.</p>


blocks|key|4257549|text|我通过执行以下操作让DataTables正常工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4257550|angular.json|4257551|+++++"styles":+[
++++++++++"src/styles.css",
++++++++++"node_modules/bootstrap/dist/css/bootstrap.min.css",
++++++++++"node_modules/datatables.net-dt/css/jquery.dataTables.css"
++++++++],
++++++++"scripts":+[
++++++++++"node_modules/jquery/dist/jquery.js",
++++++++++"node_modules/datatables.net/js/jquery.dataTables.js"
++++++++]|code-block|syntax|javascript|4257552|app.module.ts|4257553|++++++++import+{DataTablesModule}+from+'angular-datatables';


++++++++imports:+[
+++++++++++++++++...
+++++++++++++++++DataTablesModule
++++++++++++++++]|4257554|您可能需要停下来重新服务才能看到更改。|4257555|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I got DataTables working by doing the following:</p>

<p>angular.json</p>

<pre><code>     "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js"
        ]
</code></pre>

<p>app.module.ts</p>

<pre><code>        import {DataTablesModule} from 'angular-datatables';


        imports: [
                 ...
                 DataTablesModule
                ]
</code></pre>

<p>You may have to stop and re-serve to see changes.</p>


blocks|key|4257591|text|通过查看@dickrichie的问题和答案，我仍然有一个错误：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4257592|ERROR+in+node_modules/angular-datatables/src/angular-datatables.directive.d.ts(1
,23):+error+TS2688:+Cannot+find+type+definition+file+for+'datatables.net'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(15,16):+er
ror+TS2503:+Cannot+find+namespace+'DataTables'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(27,25):+er
ror+TS2503:+Cannot+find+namespace+'DataTables'.|code-block|syntax|javascript|4257593|我错过了让Datatables.net在Angular+6上工作的最后两个安装步骤。|4257594|npm+install+jquery+--save
npm+install+datatables.net+--save
npm+install+datatables.net-dt+--save
npm+install+angular-datatables+--save
npm+install+@types/datatables.net+--save-dev|4257595|然后按照@dickrichie的消息编辑angular.json和app.module.ts文件。现在，您添加"datatable“的任何table标记都应该可以工作。|4257596|--编辑|4257597|答案的第一部分是使用angular-datatables，但当@fahimuddin问我在没有这个包的情况下如何做到这一点时，我尝试了不同的方法。|4257598|所以不需要安装最后两个包，angular.json看起来与@dickrichie+answer中的一样，并且是在@+component之前添加的一个组件中：|4257599|declare+var+$:+any;|4257600|然后在ngOnInit()中直接使用jQuery和Datatables：|4257601|$('#your-datatable-id').DataTable();|4257602|它起作用了，没有人抱怨，但我不确定这是不是一个好的做法？(在我的例子中，我正在尝试做一个Angular-Electron应用程序，它仍然不能在Electron上工作，它也不能在angular-datatable上工作，但这是另一个问题！)|4257603|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1D|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

<p>By just watching the question and the answer from @dickrichie, I still had an error:</p>

<pre><code>ERROR in node_modules/angular-datatables/src/angular-datatables.directive.d.ts(1
,23): error TS2688: Cannot find type definition file for 'datatables.net'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(15,16): er
ror TS2503: Cannot find namespace 'DataTables'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(27,25): er
ror TS2503: Cannot find namespace 'DataTables'.
</code></pre>

<p>I was missing the two last install steps to make Datatables.net works with Angular 6.</p>

<pre><code>npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/datatables.net --save-dev
</code></pre>

<p>Then follow the message from @dickrichie to edit angular.json and app.module.ts files. Now any table tag where you add "datatable" should work.</p>

<p>-- EDIT </p>

<p>The first part of that answer is with using angular-datatables, but as @fahimuddin asked in fact how to do that without that package, I tried differently.</p>

<p>So no need to install the last two packages, the angular.json looks the same as in @dickrichie answer and in a component I just added before the @Component:</p>

<pre><code>declare var $: any;
</code></pre>

<p>And then use directly jQuery and Datatables in ngOnInit():</p>

<pre><code>$('#your-datatable-id').DataTable();
</code></pre>

<p>It works and nobody's complaining but I'm not sure if it's a good practice? (And as in my case I'm trying to do an Angular-Electron app, it's still not working in Electron, it wasn't working with angular-datatable neither, but that's another problem!)</p>


blocks|key|5675502|text|在angular+6+angular-datatables中使用角度数据表|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5675503|在使用NPM:获取最新版本之前，您需要安装其依赖项：|5675504|npm+install+jquery+--save
npm+install+datatables.net+--save
npm+install+datatables.net-dt+--save
npm+install+angular-datatables@6.0.0+--save
npm+install+@types/jquery+--save-dev
npm+install+@types/datatables.net+--save-dev|code-block|syntax|javascript|5675505|angular.json|style|BOLD|5675506|​|5675507|📷|atomic|5675508|5675509|在app.module.ts中导入DataTablesModule|5675510|import+{+DataTablesModule+}+from+'angular-datatables';

imports:+[
++++DataTablesModule
++],|5675511|我的datatableslibrary.ts|5675512|import+{+Component,+OnDestroy,+OnInit+}+from+'@angular/core';
import+{+Http,+Response+}+from+'@angular/http';
import+{+Subject+}+from+'rxjs';
import+{+HttpClient+}+from+'@angular/common/http';
import+{+DataService+}+from+'../data.service';

@Component({
++selector:+'app-datatableslibrary',
++templateUrl:+'./datatableslibrary.component.html',
++styleUrls:+['./datatableslibrary.component.css']
})
export+class+DatatableslibraryComponent+implements+OnInit,+OnDestroy+{

++users$:+any[]+=+[];
++dtOptions:+DataTables.Settings+=+{};
++dtTrigger:+Subject<any>+=+new+Subject();

++constructor(private+http:+HttpClient,+private+data:+DataService)+{
++}

++ngOnInit()+{
++++this.dtOptions+=+{
++++++pagingType:+'full_numbers',
++++++pageLength:+5,
++++++processing:+true
++++};
++++this.data.getUsers().subscribe(data+=>+{
++++++this.users$+=+data;
++++++this.dtTrigger.next();
++++});
++}

++ngOnDestroy():+void+{
++++this.dtTrigger.unsubscribe();
++}

}|5675513|my+datatableslibrary.component.html|5675514|<table+class="table+table-striped+table-bordered+table-sm+row-border+hover"+datatable+[dtOptions]="dtOptions"
++[dtTrigger]="dtTrigger">
++<thead>
++++<tr>
++++++<th>Name</th>
++++++<th>Email</th>
++++++<th>Website</th>
++++</tr>
++</thead>
++<tbody>
++++<tr+*ngFor="let+user+of+users$">
++++++<td>{{+user.name+}}</td>
++++++<td>{{+user.email+}}</td>
++++++<td>{{+user.website+}}</td>
++++</tr>
++</tbody>
</table>|5675515|5675516|5675517|5675518|entityMap|0|LINK|mutability|MUTABLE|url|http://l-lin.github.io/angular-datatables/#/getting-started|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/c4d0913837b4b81ccb4253d2bcf0fdc3.png|imageAlt|2|https://ask.qcloudimg.com/http-save/yehe-900000/39484da4459a7afc85e9909738466c97.png^0|B|I|0|0|0|0|0|C|0|0|1|0|0|1|0|1|1|0|0|1|0|0|X|0|0|2K|0|0|M|0|0|QD|0|0|Z|0|0|BI|0|0|1|0|0|1|0|1|2|0|0|1|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]]|C|$]]|$1|D|3|E|5|6|7|1T|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1U|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1V|8|@$A|1W|B|1X|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1Y|8|@$A|1Z|B|20|M|N]]|9|@]|C|$]]|$1|Q|3|R|5|S|7|21|8|@$A|22|B|23|M|N]]|9|@$A|24|B|25|1|26]]|C|$]]|$1|T|3|P|5|6|7|27|8|@$A|28|B|29|M|N]]|9|@]|C|$]]|$1|U|3|V|5|6|7|2A|8|@$A|2B|B|2C|M|N]]|9|@]|C|$]]|$1|W|3|X|5|H|7|2D|8|@$A|2E|B|2F|M|N]]|9|@]|C|$I|J]]|$1|Y|3|Z|5|6|7|2G|8|@$A|2H|B|2I|M|N]]|9|@]|C|$]]|$1|10|3|11|5|H|7|2J|8|@$A|2K|B|2L|M|N]]|9|@]|C|$I|J]]|$1|12|3|13|5|6|7|2M|8|@$A|2N|B|2O|M|N]]|9|@]|C|$]]|$1|14|3|15|5|H|7|2P|8|@$A|2Q|B|2R|M|N]]|9|@]|C|$I|J]]|$1|16|3|P|5|6|7|2S|8|@$A|2T|B|2U|M|N]]|9|@]|C|$]]|$1|17|3|R|5|S|7|2V|8|@$A|2W|B|2X|M|N]]|9|@$A|2Y|B|2Z|1|30]]|C|$]]|$1|18|3|P|5|6|7|31|8|@$A|32|B|33|M|N]]|9|@]|C|$]]|$1|19|3|-4|5|6|7|34|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]|1H|$5|1I|1D|1J|C|$1K|1L|1M|-4]]|1N|$5|1I|1D|1J|C|$1K|1O|1M|-4]]]]

<p>use angular data tables in Angular 6 <a href="http://l-lin.github.io/angular-datatables/#/getting-started" rel="noreferrer">angular-datatables</a></p>

<p><strong>You need to install its dependencies before getting the latest release using NPM:</strong></p>

<pre><code>npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
</code></pre>

<p><strong>angular.json</strong></p>

<p><a href="https://i.stack.imgur.com/axBgb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/axBgb.png" alt="enter image description here"></a></p>

<p><strong>Import the DataTablesModule in app.module.ts</strong></p>

<pre><code>import { DataTablesModule } from 'angular-datatables';

imports: [
    DataTablesModule
  ],
</code></pre>

<p>my datatableslibrary.ts</p>

<pre><code>import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataService } from '../data.service';

@Component({
  selector: 'app-datatableslibrary',
  templateUrl: './datatableslibrary.component.html',
  styleUrls: ['./datatableslibrary.component.css']
})
export class DatatableslibraryComponent implements OnInit, OnDestroy {

  users$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject&lt;any&gt; = new Subject();

  constructor(private http: HttpClient, private data: DataService) {
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.data.getUsers().subscribe(data =&gt; {
      this.users$ = data;
      this.dtTrigger.next();
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

}
</code></pre>

<p><strong>my datatableslibrary.component.html</strong></p>

<pre><code>&lt;table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
      &lt;th&gt;Website&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr *ngFor="let user of users$"&gt;
      &lt;td&gt;{{ user.name }}&lt;/td&gt;
      &lt;td&gt;{{ user.email }}&lt;/td&gt;
      &lt;td&gt;{{ user.website }}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/Z5qTd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Z5qTd.png" alt="enter image description here"></a></p>


blocks|key|4257678|text|在appmodule.ts+works的导入中添加DataTablesModule.forRoot()！或者，如果您正在使用延迟加载，请记住将其放入每个module.ts中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4257679|entityMap^0|1|C|P|Q|24|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Adding <code>DataTablesModule.forRoot()</code> in imports of <code>appmodule.ts</code> works! Or if you are using a lazy loading remember to put it in every <code>module.ts</code></p>


blocks|key|4257688|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4257689|import+{+Component,+OnInit,+ViewChild,+ElementRef+}+from+'@angular/core';
import+{+ToastrManager+}+from+'ng6-toastr-notifications';
import+{+environment+}+from+'src/environments/environment';
import+{+HttpClient,+HttpParams+}+from+'@angular/common/http';
import+{+LoginService+}+from+'../login.service';
declare+var+$;

class+SiteModal+{
++OrderNumber:+string;
++ContactName:+string;
++EntityName:+string;
++ContactNo:+string;
++CategoryName:+string;
++StatusName:+string;
}

class+DataTablesResponse+{
++data:+any[];
++draw:+number;
++recordsFiltered:+number;
++recordsTotal:+number;
}


@Component({
++selector:+'app-site',
++templateUrl:+'./site.component.html',
++styleUrls:+['./site.component.scss']
})



export+class+SiteComponent+implements+OnInit+{
++@ViewChild('dataTable')+table:+ElementRef;
++dataTable:+any;
++dtOptions:+DataTables.Settings+=+{};
++siteModal:+SiteModal[];
++dataTablesResponse:+DataTablesResponse[];
++datatable:+any;
++public+data:+Object;
++public+temp_var:+Object+=+false;

++constructor(
++++private+http:+HttpClient,
++++public+toastr:+ToastrManager,
++++private+LoginService:+LoginService
++)+{+}



++ngOnInit():+void+{
++++const+that+=+this;
++
++++this.dtOptions+=+{
++++++pagingType:+'full_numbers',
++++++pageLength:+10,
++++++serverSide:+true,
++++++processing:+true,
++++++ordering:+false,
++++++searching:+false,


++++++ajax:+(dataTablesParameters:+any,+callback)+=>+{
++++++++let+params+=+new+HttpParams();
++++++++let+startNumber:+any;

++++++++startNumber+=+dataTablesParameters.start;
++++++++if+(startNumber+!=+0)+{
++++++++++startNumber+=+startNumber+%2B+1
++++++++}+else+{
++++++++++startNumber+=+startNumber;
++++++++}
++++++++params+=+params.append("start",+startNumber);
++++++++params+=+params.append("length",+dataTablesParameters.length);
++++++++let+param+=+params.toString();
++++++++setTimeout(()+=>+{
++++++++++$(".dataTables_empty").hide();
++++++++},+500);
++++++++that.http
++++++++++.post<DataTablesResponse>(
++++++++++++environment.apiUrl+%2B+"api/Entity/GetSiteList",
++++++++++++params,+{}
++++++++++).subscribe(resp+=>+{
++++++++++++that.siteModal+=+resp.data;
++++++++++++debugger
++++++++++++setTimeout(()+=>+{
++++++++++++++$(".dataTables_empty").hide();
++++++++++++},+500);
++++++++++++callback({
++++++++++++++recordsTotal:+resp.recordsTotal,
++++++++++++++recordsFiltered:+resp.recordsFiltered,
++++++++++++++data:+[]
++++++++++++});
++++++++++});
++++++},
++++++columns:+[{+data:+'OrderNumber'+},+{+data:+'ContactName'+},+{+data:+'EntityName'+},+{+data:+'ContactNo'+},+{+data:+'StatusName'+},+{+data:+'CategoryName'+}]
++++};


++}

}|code-block|syntax|javascript|4257690|<section+class="content-header+ng-scope">
++++++++<h1>Site+</h1>
++++</section>
++++
++++<section+class="content">
++++++++<div+class="panel+panel-default">
++++++++++++<div+class="panel-body">
++++++++++++++++<div+class="row">
++++++++++++++++++++<div+class="col-md-12+table-responsive">
++++++++++++++++++++++++<table+id='Clienttbl'+datatable+[dtOptions]="dtOptions"+class="row-border+hover">
++++++++++++++++++++++++++++<thead>
++++++++++++++++++++++++++++++<tr>
++++++++++++++++++++++++++++++++<th>Order+#</th>
++++++++++++++++++++++++++++++++<th>ContactName</th>
++++++++++++++++++++++++++++++++<th>Entity+Name</th>
++++++++++++++++++++++++++++++++<th>ContactNo</th>
++++++++++++++++++++++++++++++++<th>StatusName</th>
++++++++++++++++++++++++++++++++<th>Category+Name</th>
++++++++++++++++++++++++++++++</tr>
++++++++++++++++++++++++++++</thead>
++++++++++++++++++++++++++++<tbody+*ngIf="siteModal?.length+!=+0">
++++++++++++++++++++++++++++++++<tr+*ngFor="let+data+of+siteModal">
++++++++++++++++++++++++++++++++++++<td>{{+data.OrderNumber+}}</td>
++++++++++++++++++++++++++++++++++++<td>{{+data.ContactName+}}</td>
++++++++++++++++++++++++++++++++++++<td>{{+data.EntityName+}}</td>
++++++++++++++++++++++++++++++++++++<td>{{+data.ContactNo+}}</td>
++++++++++++++++++++++++++++++++++++<td>{{+data.StatusName+}}</td>
++++++++++++++++++++++++++++++++++++<td>{{+data.CategoryName+}}</td>
++++++++++++++++++++++++++++++++</tr>
++++++++++++++++++++++++++++</tbody>
++++++++++++++++++++++++++
++++++++++++++++++++++++++</table>+
++++
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>
++++</section>|4257691|<script+src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>|4257692|4257693|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpParams } from '@angular/common/http';
import { LoginService } from '../login.service';
declare var $;

class SiteModal {
  OrderNumber: string;
  ContactName: string;
  EntityName: string;
  ContactNo: string;
  CategoryName: string;
  StatusName: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


@Component({
  selector: 'app-site',
  templateUrl: './site.component.html',
  styleUrls: ['./site.component.scss']
})



export class SiteComponent implements OnInit {
  @ViewChild('dataTable') table: ElementRef;
  dataTable: any;
  dtOptions: DataTables.Settings = {};
  siteModal: SiteModal[];
  dataTablesResponse: DataTablesResponse[];
  datatable: any;
  public data: Object;
  public temp_var: Object = false;

  constructor(
    private http: HttpClient,
    public toastr: ToastrManager,
    private LoginService: LoginService
  ) { }



  ngOnInit(): void {
    const that = this;
  
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ordering: false,
      searching: false,


      ajax: (dataTablesParameters: any, callback) =&gt; {
        let params = new HttpParams();
        let startNumber: any;

        startNumber = dataTablesParameters.start;
        if (startNumber != 0) {
          startNumber = startNumber + 1
        } else {
          startNumber = startNumber;
        }
        params = params.append("start", startNumber);
        params = params.append("length", dataTablesParameters.length);
        let param = params.toString();
        setTimeout(() =&gt; {
          $(".dataTables_empty").hide();
        }, 500);
        that.http
          .post&lt;DataTablesResponse&gt;(
            environment.apiUrl + "api/Entity/GetSiteList",
            params, {}
          ).subscribe(resp =&gt; {
            that.siteModal = resp.data;
            debugger
            setTimeout(() =&gt; {
              $(".dataTables_empty").hide();
            }, 500);
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'OrderNumber' }, { data: 'ContactName' }, { data: 'EntityName' }, { data: 'ContactNo' }, { data: 'StatusName' }, { data: 'CategoryName' }]
    };


  }

}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;section class="content-header ng-scope"&gt;
        &lt;h1&gt;Site &lt;/h1&gt;
    &lt;/section&gt;
    
    &lt;section class="content"&gt;
        &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-body"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12 table-responsive"&gt;
                        &lt;table id='Clienttbl' datatable [dtOptions]="dtOptions" class="row-border hover"&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th&gt;Order #&lt;/th&gt;
                                &lt;th&gt;ContactName&lt;/th&gt;
                                &lt;th&gt;Entity Name&lt;/th&gt;
                                &lt;th&gt;ContactNo&lt;/th&gt;
                                &lt;th&gt;StatusName&lt;/th&gt;
                                &lt;th&gt;Category Name&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody *ngIf="siteModal?.length != 0"&gt;
                                &lt;tr *ngFor="let data of siteModal"&gt;
                                    &lt;td&gt;{{ data.OrderNumber }}&lt;/td&gt;
                                    &lt;td&gt;{{ data.ContactName }}&lt;/td&gt;
                                    &lt;td&gt;{{ data.EntityName }}&lt;/td&gt;
                                    &lt;td&gt;{{ data.ContactNo }}&lt;/td&gt;
                                    &lt;td&gt;{{ data.StatusName }}&lt;/td&gt;
                                    &lt;td&gt;{{ data.CategoryName }}&lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/tbody&gt;
                          
                          &lt;/table&gt; 
    
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2146445|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2146446|从API+url获取JSON数据|blockquote|2146447|2146448|2146449|现在你必须使用两个组件，一个是html文件，另一个是.ts文件|2146450|sample.Component.html|offset|length|style|BOLD|2146451|<table++id="_zonetable"+class="row-border+hover"+datatable+[dtOptions]="dtOptions"+[dtTrigger]="dtTrigger">
+++<thead>
+++---
+++</thead>
++++<tbody>
++++<tr++*ngFor="let+item+of+ArrayResponse+;+let+i=index">
++++++</tr>
++++</tbody>
+</table>|code-block|syntax|javascript|2146452|现在来看看像sample.Component.ts这样的.ts文件|2146453|import+{+Component,+OnInit+,OnDestroy}+from+'@angular/core';
import+{+Subject+}+from+'rxjs';
import+{+DataTableDirective+}+from+'angular-datatables';
declare+var+$:+any;|2146454|现在在导出中：|2146455|export+class+UtilityComponent+implements+OnDestroy,+OnInit+{
dtElement:+DataTableDirective;
dtOptions:+DataTables.Settings+=+{};
dtTrigger:+Subject<any>+=+new+Subject();



+ngOnInit():+void+{
+++this.dtOptions+=+{
++++++pagingType:+'full_numbers',
++++++pageLength:+10
++++};


ngOnDestroy():+void+{
++++//+Do+not+forget+to+unsubscribe+the+event
++++this.dtTrigger.unsubscribe();

+++if+($.fn.DataTable.isDataTable( '#_zonetable' ))+{
++++//+++//+call+the+loader
++++++$('#_zonetable').dataTable().api().destroy();
++++}
++}

++rerender():+void+{
++++this.dtElement.dtInstance.then((dtInstance:+DataTables.Api)+=>+{
++++++//+Destroy+the+table+first
++++++dtInstance.destroy();
++++++//+Call+the+dtTrigger+to+rerender+again
++++++//+this.dtTrigger.next();
++++});
++}

ServiceFunction()+{
++++this.ArrayResponse=[];
++++if+($.fn.DataTable.isDataTable( '#_zonetable' ))+{
++++++//+++//+call+the+loader
++++++++$('#_zonetable').dataTable().api().destroy();
++++++}


this.availservice.JsonAPi()
++.subscribe((json)+=>+{

++++this.ArrayResponse+=+json;+//here+you+will+get+JSON+response
+++++//+Calling+the+DT+trigger+to+manually+render+the+table
++++//+debugger;

++++if+($.fn.DataTable.isDataTable( '#_zonetable'))+{
++++//+++//+call+the+loader
++++++$('#_zonetable').dataTable().api().destroy();
++++++++}
++++++++this.dtTrigger.next();
++++++++console.log(this.ArrayResponse);
++++++++setTimeout(()+=>+{
++++++++++$('.overlaysv').hide();++++++++++++++
++++++++},+2000);

++++++});
++}|2146456|entityMap^0|0|0|0|0|0|0|L|0|0|6|J|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|12|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|13|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|14|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|15|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|16|7|@]|8|@]|9|$]]|$1|H|3|I|4|5|6|17|7|@$J|18|K|19|L|M]]|8|@]|9|$]]|$1|N|3|O|4|P|6|1A|7|@]|8|@]|9|$Q|R]]|$1|S|3|T|4|5|6|1B|7|@$J|1C|K|1D|L|M]]|8|@]|9|$]]|$1|U|3|V|4|P|6|1E|7|@]|8|@]|9|$Q|R]]|$1|W|3|X|4|5|6|1F|7|@]|8|@]|9|$]]|$1|Y|3|Z|4|P|6|1G|7|@]|8|@]|9|$Q|R]]|$1|10|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]]|11|$]]

<blockquote>
  <p>Get JSON data from API url</p>
</blockquote>

<p>Now you have to play in two components only one is html &amp; other is .ts file</p>

<p><strong>sample.Component.html</strong>
</p>

<pre><code>&lt;table  id="_zonetable" class="row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"&gt;
   &lt;thead&gt;
   ---
   &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr  *ngFor="let item of ArrayResponse ; let i=index"&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>



<p>now come to .ts file like <strong>sample.Component.ts</strong></p>

<pre><code>import { Component, OnInit ,OnDestroy} from '@angular/core';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
declare var $: any;
</code></pre>

<p>now in the export : </p>

<pre><code>export class UtilityComponent implements OnDestroy, OnInit {
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject&lt;any&gt; = new Subject();



 ngOnInit(): void {
   this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
    };


ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();

   if ($.fn.DataTable.isDataTable( '#_zonetable' )) {
    //   // call the loader
      $('#_zonetable').dataTable().api().destroy();
    }
  }

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      // this.dtTrigger.next();
    });
  }

ServiceFunction() {
    this.ArrayResponse=[];
    if ($.fn.DataTable.isDataTable( '#_zonetable' )) {
      //   // call the loader
        $('#_zonetable').dataTable().api().destroy();
      }


this.availservice.JsonAPi()
  .subscribe((json) =&gt; {

    this.ArrayResponse = json; //here you will get JSON response
     // Calling the DT trigger to manually render the table
    // debugger;

    if ($.fn.DataTable.isDataTable( '#_zonetable')) {
    //   // call the loader
      $('#_zonetable').dataTable().api().destroy();
        }
        this.dtTrigger.next();
        console.log(this.ArrayResponse);
        setTimeout(() =&gt; {
          $('.overlaysv').hide();              
        }, 2000);

      });
  }
</code></pre>


blocks|key|5675604|text|您需要对angular.json文件进行更改：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5675605|"styles":+[
++++...
++++"node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
++++...
],
"scripts":+[
++++...
++++"node_modules/datatables.net/js/jquery.dataTables.js",
++++"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
++++...
]|code-block|syntax|javascript|5675606|扩展插件也是如此。|5675607|entityMap^0|4|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>You need to do changes into <code>angular.json</code> file:</p>

<pre><code>"styles": [
    ...
    "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
    ...
],
"scripts": [
    ...
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
    ...
]

</code></pre>

<p>And the same way for extensions plugins.</p>


<p>I am trying to add Datatables plugin (datatables.net) facility with my angualar 6 project.
I am not sure how should I include the necessary css, js and other required files to my project with npm installer.
After selecting my necessary options I am following the NPM Install method with these : </p>

<pre><code>npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4
</code></pre>

<p>After Installing, I am not sure how will I use these in my project. my project is using ngx-bootstrap (<a href="https://www.npmjs.com/package/ngx-bootstrap" rel="noreferrer">https://www.npmjs.com/package/ngx-bootstrap</a>) for styling.</p>

<pre><code>style.scss // where I am only importing my css theme from node_modules
</code></pre>

<p>In ngx-bootstrap the styles are component wise, and I am using those easily.
So, how can I use datatables features as a component ?
In another way, where should I include the css, and required js files to achieve the datatables facilities on a page?</p>

<p>If anyone has done it please let me know, or any suggestions will be appreciated.</p>

<p>Thanks.</p>


Using full featured Datatables Plugin with Angular 6

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试在我的angualar6项目中添加Datatables插件(datatables.net)工具。我不确定我应该如何包含必要的css，js和其他必要的文件，我的项目与npm安装程序。在选择了必要的选项后，我将按照NPM的安装方法执行以下操作：npm install --save datatables.net-b...

问在Angular 6中使用全功能的Datatables插件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular 6中使用全功能的Datatables插件EN