Using ECMAscript class as a source for datatable

Evgeniy Vasyliev

Hi all!

I have a problem with filling my datatable with data.

Here is HTML markup:

<table id="employees" class="display w-100">
    <thead>
        <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Position</th>
            <th class="text-center">Salary</th>
            <th class="text-center">Office </th>
            <th class="text-center">Amount</th>
            <th class="text-center">Price</th>
        </tr>
    </thead>
</table>

I tested 2 variants:

Variant 1 with standard javascript function (working fine):

function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this.office = office;
};

table = $('#employees').DataTable({    
    dom: 't',
    "ordering": false,
    responsive: true,
    select: true,
    data: [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
});

Here everything is working fine.

Variant 2 with ECMAscript classes sugar:

class Employee {
    constructor(name, position, salary, office) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this.office = office;
    }

    get name() {
        return this.name;
    }
    set name(name) {
        this.name = name;
    }

    get position() {
        return this.position;
    }
    set position(position) {
        this.position = position;
    }

    get salary() {
        return this.salary;
    }
    set salary(salary) {
        this.salary = salary;
    }

    get office() {
        return this.office;
    }
    set office(office) {
        this.office = office;
    }
};

table = $('#employees').DataTable({    
    dom: 't',
    "ordering": false,
    responsive: true,
    select: true,
    data: [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
});

And it does not work! In console it gives an error "SyntaxError: redeclaration of let Employee"
Can you help if it can be solved and how?

Thanks!

kthorngren

Interesting, I never tried using ECMAscript classes. Looks like like this.name and name are the same.

class Employee {
    constructor(name, position, salary, office) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this.office = office;
    }
 
    get name() {
        return this.name;
    }
    set name(name) {
        this.name = name;
    }

The above results in this:

VM161:10 Uncaught RangeError: Maximum call stack size exceeded
    at Employee.get name [as name] (<anonymous>:10:13)
    at Employee.get name [as name] (<anonymous>:11:21)
    at Employee.get name [as name] (<anonymous>:11:21)
    at Employee.get name [as name] (<anonymous>:11:21)
    at Employee.get name [as name] (<anonymous>:11:21)
    at Employee.get name [as name] (<anonymous>:11:21)
......

Changing all the this.xxx to this._xxx works. See this example:
http://live.datatables.net/dutayuza/1/edit

Kevin

Evgeniy Vasyliev

Thank you, Kevin! It helped a lot!

allan

Nice one Kevin. It is worth noting as well that DataTables can also use methods as data points through the parenthesis syntax. E.g. data: 'name() (will see the () and execute the name method). The only thing it can't do is pass parameters.

That said - I like using getters and setters better myself.

Allan