Error while export row in columns defaultContent render

Pedro datatables

Error messages shown:
Uncaught SyntaxError: missing ] after element list:1:24

Description of problem:
For reasons you can guess, when I edit a record in the table I need all the information, but it fails when I try to pass as a parameter to the editUser function. deleteUser () works fine.

window.editUser = User => {
  console.log( User )
  
  return false
}

window.deleteUser = (user) => {
  console.log(user)

  return false
}



$('#userTable').DataTable({
  serverSide: false,
  ajax: {    
    async: true,
    url: 'ajaxGetAll.php',
    type: 'POST',
  },
  columns: [
    {data: "userId", title: lang().users.thId},
    {data: "firstName", title: lang().users.thFirstName},
    {data: "lastName", title: lang().users.thlastName},
    {data: "userName", title: lang().users.thUserName},
    {data: "rollName", title: lang().users.thRoll},
    {data: "status", title: lang().users.thStatus},
    {data: "position", title: lang().users.thPosition, defaultContent: lang().users.notAvailable},
    {data: "employeesEmail", title: lang().users.thEmployeesEmail},
    {data: "userCreatedAt", title: lang().users.thCreatedAt},
    {data: "userUpdatedAt", title: lang().users.thUpdatedAt},
    {defaultContent: '', title:lang().users.thActions, render: (data, type, row, meta) =>     
      { 
        console.log(row) // this produces an Object       
        let editButton    = `<button onclick="return editUser(${row})" class="btn btn-outline-primary" title="${lang().users.edit} ${row.firstName} ${row.lastName}"><i class="fa fa-edit"></i></button> `
        let deleteButton  = `<button onclick="return deleteUser(${row.userId})" class="btn btn-outline-danger" title="${lang().users.delete} ${row.firstName} ${row.lastName}"><i class="fa fa-trash"></i></button>`
        
        return `${editButton} ${deleteButton}` 
      }   
    } 
  ],
  columnDefs: [     
    { targets: 5,
      data: null,
      defaultContent: '',
      orderable: true,
      className: 'select-checkbox'
    }
  ],
  order: [[ 0, 'asc' ]],
  language: {
    url: base_url('common/inc/dataTables_es_es.json'),
  }  
});

kthorngren

Uncaught SyntaxError: missing ] after element listusers:

What is listusers?

We will need more than just the code snippet. We will need to see the running code to help understand where the Uncaught SyntaxError: missing ] after element listusers is coming from. Can you post a link to your page or a test case showing the issue so we can help debug?

Kevin

Pedro datatables

I have not Idea what is listusers...

Pedro datatables

Here's the whole code

"use strict";

import {pageTitle, base_url, toastSwal} from '../common/config'
import {lang, defaultLang} from '../common/language'
import {sidebar} from '../index/sidebar'

$(document).ready( _ => {
  pageTitle(lang().welcome.welcome)
  
  $('#navbarLogout').text( lang().navbar.logout )
  $('#navbarContact').text( lang().navbar.contact )

  $('#usersPageTitle').text( lang().users.users )
  $('#usersBreadCrumb').text( lang().users.users )
  $('#usersNewUser').text( lang().users.newUser )

  $('#userTable').append(
    `<thead>
      <tr>
        <th>${lang().users.thId}</th>
        <th>${lang().users.thFirstName}</th>
        <th>${lang().users.thlastName}</th>
        <th>${lang().users.thUserName}</th>
        <th>${lang().users.thRoll}</th>               
        <th>${lang().users.thStatus}</th>
        <th>${lang().users.thPosition}</th>
        <th>${lang().users.thEmployeesEmail}</th>
        <th>${lang().users.thCreatedAt}</th>
        <th>${lang().users.thUpdatedAt}</th>
        <th>${lang().users.thActions}</th> 
      </tr>
    </thead>`
  );

  sidebar()
});


window.editUser = User => {
  console.log( User )
  
  return false
}

window.deleteUser = (user) => {
  console.log(user)

  return false
}



$('#userTable').DataTable({
  serverSide: false,
  ajax: {    
    async: true,
    url: 'ajaxGetAll.php',
    type: 'POST',
  },
  columns: [
    {data: "userId", title: lang().users.thId},
    {data: "firstName", title: lang().users.thFirstName},
    {data: "lastName", title: lang().users.thlastName},
    {data: "userName", title: lang().users.thUserName},
    {data: "rollName", title: lang().users.thRoll},
    {data: "status", title: lang().users.thStatus},
    {data: "position", title: lang().users.thPosition, defaultContent: lang().users.notAvailable},
    {data: "employeesEmail", title: lang().users.thEmployeesEmail},
    {data: "userCreatedAt", title: lang().users.thCreatedAt},
    {data: "userUpdatedAt", title: lang().users.thUpdatedAt},
    {defaultContent: '', title:lang().users.thActions, render: (data, type, row, meta) =>     
      { 
        console.log(row) // this produces an Object       
        let editButton    = `<button onclick="return editUser(${row})" class="btn btn-outline-primary" title="${lang().users.edit} ${row.firstName} ${row.lastName}"><i class="fa fa-edit"></i></button> `
        let deleteButton  = `<button onclick="return deleteUser(${row.userId})" class="btn btn-outline-danger" title="${lang().users.delete} ${row.firstName} ${row.lastName}"><i class="fa fa-trash"></i></button>`
        
        return `${editButton} ${deleteButton}` 
      }   
    } 
  ],
  columnDefs: [     
    { targets: 5,
      data: null,
      defaultContent: '',
      orderable: true,
      className: 'select-checkbox'
    }
  ],
  order: [[ 0, 'asc' ]],
  language: {
    url: base_url('common/inc/dataTables_es_es.json'),
  }  
});

kthorngren

I put together a simple test case for you:
http://live.datatables.net/wijiwudi/1/edit

Right click on one of the edit buttons then select inspect. You will see this for the button:

<button onclick="return editUser(Ashton Cox,Technical Author,San Francisco,66,2009/01/12,$4,800)" class="btn btn-outline-primary" title="undefined undefined"><i class="fa fa-edit"></i></button>

The row data is being passed as multiple parameters, not an array. One option might be to use JSON.stringify( row ) to send the data to the edit function. Here is an updated example:
http://live.datatables.net/jewirese/2/edit

Note that all the double quotes in the <button onclick="return editUser(${row})".... statement will need to be converted to single quotes for the JSON string to work.

Kevin

Pedro datatables

Thanks kthorngren!