Error while export row in columns defaultContent render

Error while export row in columns defaultContent render

Pedro datatablesPedro datatables Posts: 6Questions: 2Answers: 0
edited September 2021 in General

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'),
  }  
});

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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 datatablesPedro datatables Posts: 6Questions: 2Answers: 0

    I have not Idea what is listusers...

  • Pedro datatablesPedro datatables Posts: 6Questions: 2Answers: 0

    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'),
      }  
    });
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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 datatablesPedro datatables Posts: 6Questions: 2Answers: 0

    Thanks kthorngren!

Sign In or Register to comment.