Angular Datatable export via ajax

Question

how can i populate the Datatable with the json data i got from backend? in console.log data appears correctly

i got the data but i cant send them in datatable i used many ways but all failed i instructions from http://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way were not very helpful

----------in html file-------

 <table datatable [dtOptions]="dtOptions" class="row-border hover"><!--id="userTable"-->
 <thead>
    <tr>
        <th>ID</th>
        <th>User Name</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Enabled</th>
        <th>isDoctor</th>
        <th>Account</th>
        <th>DeleteAcc</th>
    </tr>
</thead>
<tbody *ngIf="patientUser?.length != 0">
    <tr *ngFor="let patient of patientUser">
        <td>{{patient.patientID}}</td>
        <td>{{patient.username}}</td>
        <td>{{patient.firstName}}</td>
        <td>{{patient.lastName}}</td>
        <td>{{patient.email}}</td>
        <td>{{patient.phone}}</td>
        <td>{{patient.enabled}}</td>
        <td [hidden]="patient.doctorIs"><a (click)="enableDoctor(patient.username)" style="cursor: pointer;">Enable</a></td>
        <td [hidden]="!patient.doctorIs"><a (click)="disableDoctor(patient.username)" style="cursor: pointer;">Disable</a></td>
        <td [hidden]="patient.enabled"><a (click)="enableUser(patient.username)" style="cursor: pointer;">Enable</a></td>
        <td [hidden]="!patient.enabled"><a (click)="disableUser(patient.username)" style="cursor: pointer;">Disable</a></td>
        <td ><a (click)="deleteUser(patient.patientID)" style="cursor: pointer;">Delete</a></td>
    </tr>
    <tbody *ngIf="patientUser?.length == 0">
        <tr>
          <td colspan="3" class="no-data-available">No data!</td>
        </tr>
</tbody>

-----in component file below------

    dtOptions: any = {};


    const that = this;
    let url = "http://localhost:8015/api/patient/all";
    this.dtOptions = {
        ajax: () => {
          that.http
            .get<UserAccountComponent>(
                url,
               {withCredentials: true}
            ).subscribe(resp => {
                this.test=JSON.stringify(resp);
              that.patientUser = JSON.parse(JSON.stringify(resp));
            });
        },
        // Declare the use of the extension in the dom parameter
        columns: [{
            title: 'ID',
            data: 'patientID'
          }, {
            title: 'First name',
            data: 'firstName'
          }, {
            title: 'Last name',
            data: 'lastName'
          }],
        dom: 'Bfrtip',
        // Configure the buttons
        buttons: [
          'columnsToggle',
          'colvis',
          'copy',
          'print',
          'excel'
        ]
      };

@Manit i actually do not get any errors the datatable is empty with the json sitting somewhere. It says ..loading... but the console debug nothins show for errors — Michail Markou
– Michail Markou, Commented Jun 9, 2021 at 16:48
Can you just keep the three properties i.e. ID, first name and last name in your template and then give this a try? — Manit
– Manit, Commented Jun 9, 2021 at 16:51
@Manit They do appear now you are correct! with this 3 properties its still says loading thought.... but when i press copy/csv/excel export nothing appears. — Michail Markou
– Michail Markou, Commented Jun 9, 2021 at 16:55
i think ajax call with data columns do not connect in someway, i think there is an error there — Michail Markou
– Michail Markou, Commented Jun 9, 2021 at 16:58

Manit · Accepted Answer · 2021-06-09 17:38:56Z

Assuming that we tried all the things which are mentioned above in the comments (which was more like the way to debug). The final code in the component should be somewhat close to below one. Additionally someone can just make an ajax call and put it in a variable.

export class TestComponent implements OnInit {

    dtOptions: DataTables.Settings = {};
    patientUser: UserAccount[];

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        const that = this;

        this.dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 2,
            serverSide: true,
            processing: true,
            ajax: (dataTablesParameters: any, callback) => {
                that.http
                    .get<UserAccount>(
                        'http://localhost:8015/api/patient/all',
                        dataTablesParameters, {}
                    ).subscribe(resp => {
                        that.patientUser = resp.data; //would depend on resp object
                    });
            },
            columns: [{
                title: 'ID',
                data: 'patientID'
            }, {
                title: 'First name',
                data: 'firstName'
            }, {
                title: 'Last name',
                data: 'lastName'
            }],
            dom: 'Bfrtip',
            // Configure the buttons
            buttons: [
                'copy', 'csv', 'excel', 'print'
            ]
        };
    }
}

Collectives™ on Stack Overflow

Angular Datatable export via ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related