Search

<table datatable [dtOptions]="dtOptions" class="row-border hover"> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> </tr> </thead> <tbody *ngIf="persons?.length != 0"> <tr *ngFor="let person of persons"> <td>{{ person.id }}</td> <td>{{ person.firstName }}</td> <td>{{ person.lastName }}</td> </tr> </tbody> <tbody *ngIf="persons?.length == 0"> <tr> <td colspan="3" class="no-data-available">No data!</td> </tr> <tbody> </table> dtOptions: any = {} @Input()persons: Person[] constructor() { } ngOnInit() { this.dtOptions = { data: [], pagingType: 'full_numbers', pageLength: 2, responsive: true, } } ngOnChanges() { if (this.persons) { this.dtOptions.data = persons } } This is my api end point http://localhost:4200/#/users?page=1&recordSize=2

Hello, I am trying to implement a simple pagination on my dataTable The table is initialized like this: let userList: any = $('#userList'); this.datatable = userList.DataTable({ 'ajax': { 'url': "/api/user/all", 'type': "GET", headers: { 'Authorization': apiRequest.token }, }, "iDisplayLength": 10, "bPaginate": true, dom: '<"html5buttons"B>lTfgitp', responsive: { details: { display: $.fn.dataTable.Responsive.display.childRowImmediate, type: '' } } }); I don't want to add column definitions here, since I want to process everything in the html (I have a ngFor that passes trough the response and fills the columns with data) I've tried with a ton of responses but none of them seem to work: {"draw":1,"recordsTotal":10,"recordsFiltered":1,"data":[{"userID":2,"userFirstName":"tester","userLastName":"tester 2","userStatus":"premium","userEmail":"bla@bla.com","isConnected":null,"isOnDiscord":false,"userRole":3,"userDiscordUID":null,"userDiscordUsername":null,"userStartDate":"2017-11-07T15:17:17.000Z","userExpiration":"2018-04-25T00:00:00.000Z","userBlacklistReason":"","isReseller":false,"ips":[],"orders":[]}]} Can you guys give me a quick info on how to implement this ? Thank you

Hello, I have been using Datatables+Angular for a while now, but never I had issues like this one before. The thing is that, I'm using a theme. The theme updated so I updated my project. Everything works fine except for DataTables, the first time that I render it throws the following error: TypeError: Cannot read property 'nodeName' of null I have downloaded and run the updated theme App and works well, it's DataTables in my project that is not working as intended. By the way, only when I use DataTable().ajax.reload() works well. For more details check this out please: https://stackoverflow.com/questions/44586587/angular-datatables-typeerror-cannot-read-property-nodename-of-null Thank you in advance!

Hi, if someone has some advancement, we can pair program to make a table module ^_^. Cheers!

This is my dependency file <script src="assets/js/jquery.min.js"></script> <link rel="stylesheet" href="assets/bootstrap.min.css"> <script src="scripts/bootstrap.min.js"></script> <link rel='stylesheet' href='assets/plugins/datatables/datatables.bootstrap.css'> <link rel='stylesheet prefetch' href='assets/plugins/datatables/dataTables.responsive.css'> <link rel="stylesheet" href="assets/plugins/datatables/datatables.bootstrap.min.css"> <link rel="stylesheet" href="assets/plugins/datatables/responsive.dataTables.min.css"> <script src="assets/plugins/datatables/jquery.dataTables.min.js"></script> <script src='assets/plugins/datatables/dataTables.bootstrap.js'></script> <script src='assets/plugins/datatables/dataTables.responsive.js'></script> <script src="assets/plugins/datatables/angular-datatables.js"></script> <script src="assets/plugins/datatables/angular-datatables.min.js"></script> <script src="assets/plugins/datatables/angular-datatables.buttons.min.js"></script> <script src="assets/plugins/datatables/dataTables.buttons.min.js"></script> <script src="assets/plugins/datatables/buttons.colVis.min.js"></script> <script src="assets/plugins/datatables/buttons.flash.min.js"></script> <script src="assets/plugins/datatables/buttons.html5.min.js"></script> <script src="assets/plugins/datatables/buttons.print.min.js"></script> <script src="assets/plugins/datatables/angular-datatables.bootstrap.min.js"></script> <link rel="stylesheet" href="assets/plugins/datatables/buttons.dataTables.min.css"> Thanks for advance

when i click Some link in left hand side menu,I have an Static table like this shown Below to add datatable features: Source Reference Report Search Search Search Search Search Search Search Object Type 1 Object Name 1 Relationship Object Type 2 Object Name 2 SourcePath Source 2 ASM I53551.ASM Includes ASMCOPY PEMSGLB.acpy MACRO SOURCES\MACRO\PEMSGLB.ACPY ASM U48000.ASM Includes ASMCOPY PEMSGLB.acpy MACRO SOURCES\MACRO\PEMSGLB.ACPY ASM F38051.ASM UsesMacro MACRO F38051E.mac MACRO SOURCES\MACRO\F38051E.MAC ASM I54200.ASM UsesMacro MACRO H50001E.mac MACRO SOURCES\MACRO\H50001E.MAC And in controller when i clicked the link,am using following code as blow to include the page in ng-include main page if(htmlFile == 'ddalocaccountfunding-sourcereferencereport.html'){ $scope.columnFilter = []; //$scope.dtColumnDefs = []; $scope.columnFilterObj = {}; $scope.colDetSFHtml = ['Object Type 1','Object Name 1','Relationship','Object Type 2','Object Name 2','SourcePath','Source 2']; for(var i=0;i<$scope.colDetSFHtml.length;i++){ $scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i)); $scope.columnFilterObj["type"]='text'; $scope.columnFilterObj["bRegex"]=false; $scope.columnFilterObj["bSmart"]=true; $scope.columnFilter.push($scope.columnFilterObj); } $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('order', []).withOption('bDestroy',true).withOption('deferRender',true) .withPaginationType('full_numbers') .withDisplayLength(10) .withColumnFilter({ sPlaceHolder: "head:before", aoColumns:$scope.columnFilter }).withDOM('<lf<t>ip>'); } $scope.cont_html = htmlFile; And in Main Page(index.html),am including this file in ng-include Now the real problem is when i cliked the link first time,every thing is displaying perfectly with search filters,ShowEntres menu and pagination. But when i clicked Second time the link,Search filter and show Entries is hidden. Am really struck on this and done lot of research but nothing useful. Any hep on this would be really appreciated

<table id="customInbox" datatable="" dt-options="custominboxdetails.dtOptions" dt-columns="custominboxdetails.dtColumns" dt-column-defs="custominboxdetails.dtColumnDefs" class="angtable"> My Js Code is $scope.custominboxdetails.dtOptions = DTOptionsBuilder.fromFnPromise($scope.custominboxdetails.getTableData(workflowname)) .withDOM('Bfrtip') .withOption('scrollX', '100%') .withOption('rowCallback', rowCallback) .withButtons( ['excel', 'pdf']) .withPaginationType('full_numbers') How to get excel icon in place of excel button in datatable.. My reference files are ``` <script src="Scripts/Angular/angular.min.js" type="text/javascript"></script> <script src="Scripts/Angular/angular-route.min.js" type="text/javascript"></script> <link href="Styles/premiere_blue/style.css" rel="stylesheet" type="text/css" /> <script src="Scripts/Angular/angular-datatables.js" type="text/javascript"></script> <script src="Scripts/Angular/angular-datatables.columnfilter.js" type="text/javascript"></script> <script src="Scripts/Angular/angular-datatables.buttons.min.js" type="text/javascript"></script>```

until 12 months after Angular CLI's Web Test Runner

to npm) in my Angular project, which requires me

anyone used DataTables.net on Angular latest without angular-datatables? If so, do you