jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Question

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window.

One of the columns is labeled as Actions, which permits users to edit a record by clicking the pencil icon within that column. When the pencil icon is clicked, the script searches for the id associated with the element that was clicked.

This functionality only works when the table is not in responsive mode. When the table goes into responsive mode and additional columns are expanded:

https://i.stack.imgur.com/C3ayU.jpg

If the pencil icon is clicked in this scenario, the following error occurs:

Cannot read property 'id' of undefined

This issue arises because the plugin fails to locate the row belonging to the clicked element.

To demonstrate this problem, I have included a code snippet and a JSFIDDLE link.

Code snippet goes here

Additional scripts and links go here

Could someone point out any mistakes in my approach? Or is this a known bug?

Your suggestions for resolving this issue would be greatly appreciated.

Thank you for your help.

javascript jquery html datatables

Answer 1

Answer №1

After discussing the comments, I have decided to post it here.

$(document).ready(function() {
  var table = $('#example').DataTable({
  "columns": [{
    data: 'name'
  },
  {
    data: 'position'
  },
  {
    data: 'office'
  },
  {
    data: 'age'
  },
  {
    data: 'salary'
  },
  {
    data: null,
    render: function(data, type, row) {
      return '<a href="javascript:void(0)" class="btn btn-link btn-warning btn-icon btn-sm "><i class="fas fa-pencil-alt edit" data-id="' + data.id + '" ></i></a>'; // Removed same class in i element from a element
    }
  }
],
responsive: true
});

var users = [{
  id: 1,
  name: "Penny",
  position: "waitress",
  office: "none",
  age: "25",
  salary: "1550$"
},
{
  id: 2,
  name: "Sheldon",
  position: "physical",
  office: "university",
  age: "39",
  salary: "8435$"
},
{
  id: 3,
  name: "Leonard",
  position: "physical",
  office: "university",
  age: "35",
  salary: "7842$"
},
];

$('#example').DataTable().clear().draw();
$('#example').DataTable().rows.add(users);
$('#example').DataTable().draw();

$(document).on('click', '.edit', function(element) {

console.log($(this).data('id')); // Directly retrieves the value on click
});
 });

Answer 2

After discussing the comments, I have decided to post it here.

$(document).ready(function() {
  var table = $('#example').DataTable({
  "columns": [{
    data: 'name'
  },
  {
    data: 'position'
  },
  {
    data: 'office'
  },
  {
    data: 'age'
  },
  {
    data: 'salary'
  },
  {
    data: null,
    render: function(data, type, row) {
      return '<a href="javascript:void(0)" class="btn btn-link btn-warning btn-icon btn-sm "><i class="fas fa-pencil-alt edit" data-id="' + data.id + '" ></i></a>'; // Removed same class in i element from a element
    }
  }
],
responsive: true
});

var users = [{
  id: 1,
  name: "Penny",
  position: "waitress",
  office: "none",
  age: "25",
  salary: "1550$"
},
{
  id: 2,
  name: "Sheldon",
  position: "physical",
  office: "university",
  age: "39",
  salary: "8435$"
},
{
  id: 3,
  name: "Leonard",
  position: "physical",
  office: "university",
  age: "35",
  salary: "7842$"
},
];

$('#example').DataTable().clear().draw();
$('#example').DataTable().rows.add(users);
$('#example').DataTable().draw();

$(document).on('click', '.edit', function(element) {

console.log($(this).data('id')); // Directly retrieves the value on click
});
 });

Answer 3

Answer №2

Here is an alternative approach you can consider:

  $(document).ready(function() {
      var table = $('#example').DataTable({
        "columns": [{
            data: 'name'
          },
          {
            data: 'position'
          },
          {
            data: 'office'
          },
          {
            data: 'age'
          },
          {
            data: 'salary'
          },
          {
            data: null,
            render: function(data, type, row) {
              return '<a href="javascript:void(0)" data="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
            }
          }
        ],
        responsive: true
      });

      var users = [{
          id: 1,
          name: "Penny",
          position: "waitress",
          office: "none",
          age: "25",
          salary: "1550$"
        },
        {
          id: 2,
          name: "Sheldon",
          position: "physical",
          office: "university",
          age: "39",
          salary: "8435$"
        },
        {
          id: 3,
          name: "Leonard",
          position: "physical",
          office: "university",
          age: "35",
          salary: "7842$"
        },
      ];

      $('#example').DataTable().clear().draw();
      $('#example').DataTable().rows.add(users);
      $('#example').DataTable().draw();

      $('#example').on('click', '.edit', function(element) {
    debugger
        var tr = $(element.target).closest('tr');
        **if(tr.hasClass('child'))
        {
            tr=$(tr).prev();
        }**
        var data = table.row(tr).data();
        console.log(data.id);
      });
    });

Answer 4

Here is an alternative approach you can consider:

  $(document).ready(function() {
      var table = $('#example').DataTable({
        "columns": [{
            data: 'name'
          },
          {
            data: 'position'
          },
          {
            data: 'office'
          },
          {
            data: 'age'
          },
          {
            data: 'salary'
          },
          {
            data: null,
            render: function(data, type, row) {
              return '<a href="javascript:void(0)" data="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
            }
          }
        ],
        responsive: true
      });

      var users = [{
          id: 1,
          name: "Penny",
          position: "waitress",
          office: "none",
          age: "25",
          salary: "1550$"
        },
        {
          id: 2,
          name: "Sheldon",
          position: "physical",
          office: "university",
          age: "39",
          salary: "8435$"
        },
        {
          id: 3,
          name: "Leonard",
          position: "physical",
          office: "university",
          age: "35",
          salary: "7842$"
        },
      ];

      $('#example').DataTable().clear().draw();
      $('#example').DataTable().rows.add(users);
      $('#example').DataTable().draw();

      $('#example').on('click', '.edit', function(element) {
    debugger
        var tr = $(element.target).closest('tr');
        **if(tr.hasClass('child'))
        {
            tr=$(tr).prev();
        }**
        var data = table.row(tr).data();
        console.log(data.id);
      });
    });

Answer 5

Answer №3

When using this code snippet, remember to utilize the attribute data-id

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columns": [{
        data: 'name'
      },
      {
        data: 'position'
      },
      {
        data: 'office'
      },
      {
        data: 'age'
      },
      {
        data: 'salary'
      },
      {
        data: null,
        render: function(data, type, row) {
          return '<a href="javascript:void(0)" data-id="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
        }
      }
    ],
    responsive: true
  });

  var users = [{
      id: 1,
      name: "Penny",
      position: "waitress",
      office: "none",
      age: "25",
      salary: "1550$"
    },
    {
      id: 2,
      name: "Sheldon",
      position: "physical",
      office: "university",
      age: "39",
      salary: "8435$"
    },
    {
      id: 3,
      name: "Leonard",
      position: "physical",
      office: "university",
      age: "35",
      salary: "7842$"
    },
  ];

  $('#example').DataTable().clear().draw();
  $('#example').DataTable().rows.add(users);
  $('#example').DataTable().draw();

  $('#example').on('click', '.edit', function(element) {

    /*var tr = $(element.target).closest('tr');
    var data = table.row(tr).data();
    console.log(data.id);*/
    var id = $(this).data('id')
    console.log(id);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
    </tr>
  </tfoot>

  <tbody>
  </tbody>
</table>

Answer 6

When using this code snippet, remember to utilize the attribute data-id

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columns": [{
        data: 'name'
      },
      {
        data: 'position'
      },
      {
        data: 'office'
      },
      {
        data: 'age'
      },
      {
        data: 'salary'
      },
      {
        data: null,
        render: function(data, type, row) {
          return '<a href="javascript:void(0)" data-id="' + data.id + '" class="btn btn-link btn-warning btn-icon btn-sm edit"><i class="fas fa-pencil-alt"></i></a>';
        }
      }
    ],
    responsive: true
  });

  var users = [{
      id: 1,
      name: "Penny",
      position: "waitress",
      office: "none",
      age: "25",
      salary: "1550$"
    },
    {
      id: 2,
      name: "Sheldon",
      position: "physical",
      office: "university",
      age: "39",
      salary: "8435$"
    },
    {
      id: 3,
      name: "Leonard",
      position: "physical",
      office: "university",
      age: "35",
      salary: "7842$"
    },
  ];

  $('#example').DataTable().clear().draw();
  $('#example').DataTable().rows.add(users);
  $('#example').DataTable().draw();

  $('#example').on('click', '.edit', function(element) {

    /*var tr = $(element.target).closest('tr');
    var data = table.row(tr).data();
    console.log(data.id);*/
    var id = $(this).data('id')
    console.log(id);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th class="sorting_desc_disabled sorting_asc_disabled">Action</th>
    </tr>
  </tfoot>

  <tbody>
  </tbody>
</table>

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Answer №1

Answer №2

Answer №3

Similar questions

Emphasize certain VueJS elements for focus

"ModuleNotFound" error occurred when attempting to utilize Netlify lambda functions with external dependencies

What is the best way to set up a React handler that can handle multiple values effectively?

What is the process for removing the body of a table?

When using JavaScript to redirect with window.location, the referrer header is not properly set

What steps can be taken to ensure that all object properties become reactive?

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

How can we trigger a function once an ajax request has finished, without directly interacting with the ajax

Stop users from saving the page in Next.js

The error message "Cannot construct apickli.Apickli" is indicating a Type Error

During the present module, retrieve the runtime list of all modules that are directly imported (Javascript/Typescript)

What is the best way to anticipate a return phone call?

Encountering a React clash while integrating Material UI

The functionality of the submit form is encountering issues upon integration of Ajax requests

Unable to allocate a second item to an existing one

Can PHP send back data to AJAX using variables, possibly in an array format?

Are desktop values taking precedence over the mobile media query?

Increase the totalAmount by adding the product each time

Javascript - Conceal a Dynamic Div Depending on its Text

I'm unable to select a checkbox using Python Selenium