Answers

• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  March 8

  how can i make te update instead of add, please guide

  Is there a unique piece of data for each row? If yes then you can use row() with the row-selector as a function to select the row that matches the unique data. Then use row().data() to update the row instead of row.add() to add the row.

  Cannot read properties of null (reading 'classList')

  That suggests var row = table.row('#' + rowID) is not finding the row meaning there isn't a row with the ID of "#" + rowID. It will take some debugging to investigate this further. Please post a link to your page or a test case replicating the issue so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• maniya Posts: 78Questions: 13Answers: 0

  March 8

  myy tr shows like this

  https://prnt.sc/xg8AWzaHDPzT

  so if i am updating the first row, the tr has the id as "_0"
• maniya Posts: 78Questions: 13Answers: 0

  March 8

  i have a unique selector, but also the tr is showing the uniqe index numbers which is either 0 to start
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  March 8

  I would start by debugging the value of rowID as its passed into the function reqUpdate(). Is it in the format _0?

  If you want help debugging please post a link to a test case replicating the issue so we can step through the code.

  Kevin
• maniya Posts: 78Questions: 13Answers: 0

  March 8

  its not passd as_0, the rowID i am passing is the unique identifier in each row, you mentioned above, but i can't figure out how to run the update in here
• maniya Posts: 78Questions: 13Answers: 0

  March 8

  i managed to fix it, with this:

      $.each(_response.data, function(index, item) {
              // Now you can access each property of the item object
              var row = table.row('#' + '_' + index); // Get the row
              if (row.length) { // If the row exists
                row.data({
                 "DT_RowId": "_" + index,
                "Icon": item.Icon,
                "Employee": item.Employee,
                "Type": item.Type,
                "viewIcon": item.viewIcon
                }).draw();
              } else { // If the row does not exist
                table.row.add({
                  "DT_RowId": "_" + index,
                "Icon": item.Icon,
                "Employee": item.Employee,
                "Type": item.Type,
                "viewIcon": item.viewIcon
                }).draw();
              }
            });
            var rowedited = rowID - 1;
            var row = table.row('#' + '_' +rowedited); // Get the row
            console.log(row);
            row.node().classList.add(type == 'reject' ? 'newTabClass' : 'newClass'); 
            setTimeout(function(){
              row.node().classList.remove(type == 'reject' ? 'newTabClass' : 'newClass'); 
            }, 15000);
  

  -error is on node() where the class is not activated, it does not throw an error in the console but does not highlight the class for 15 seconds

  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  March 8 edited March 8

  Is the classname added to the row? Which classname is applied? Maybe the CSS selector to highlight th e row is not correct. Again we will need to see the issue to help debug.

  Kevin
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  March 8

  Maybe this example will help:
  https://live.datatables.net/rizonume/1/edit

  Kevin
• maniya Posts: 78Questions: 13Answers: 0

  March 16

  i tried like this but it is still adding the extra row, you edit is not loading

  function reqUpdate(dataValues, type,rowID) {
    // It's an AJAX method using jQuery
    dataValues.dformat = $('.timesheet_application').attr('data-format').toUpperCase();
    $.ajax({
      url: 'z.cfm?section=rowUpdate',
      type: 'POST',
      data : dataValues,
      success: function(response) {
        var _response = JSON.parse(response);
        var table = $('#tblData').DataTable(); // Get the DataTable instance
        $.each(_response.data, function(index, item) {
          // Now you can access each property of the item object
          var row = table.row('#' + '_' + index); // Get the row
          if (row.length) { // If the row exists
            row.data({
              "DT_RowId": "_" + index,
              "Icon": item.CheckBoxIcon,
              "Employee": item.Employee,
              "Type": item.Type,
              "weekending": item.weekending,
              "Submission_Date": item.Submission_Date,
              "Approved": item["Approved"],
              "Date": item["Date"],
              "Totalhours": item.Totalhours,
              "viewIcon": item.viewIcon
            }).draw();
          }
        });
        var rowedited = rowID - 1;
        var row = table.row('#' + '_' +rowedited);
        var $tr = $(row.node());
        var $table = $tr.find('td table');
        var $td = $tr.find('td');
  
        $tr.addClass(type == 'reject' ? 'newTabClass' : 'newClass');
        $table.addClass(type == 'reject' ? 'newTabClass' : 'newClass');
        $td.addClass(type == 'reject' ? 'newTabClass' : 'newClass');
  
        setTimeout(function(){
            $tr.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
            $table.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
            $td.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
        }, 5000);  
      },
      error: function(err) {
        customSwal('Error',err);
      }
    });
  }
  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  March 16

  Sorry but just seeing the code snippet is not enough to help debug. You are passing in dataValues, type,rowID into the function. What values are these and how do they relate to the edited row?

  You are looping through the response data with $.each(_response.data, function(index, item) {. Is there more than one row in the response? Is the response expected to be the edited row?

  You are trying to get the row with this:

  var row = table.row('#' + '_' + index);
  

  Does the $.each() loop index match with the row or rows you want to update? I suspect not but without seeing a running test case its hard to say.

  My suggestion is to place a browser's breakpoint on line 9 and step through the code to see what values exist and if they are the expected values. Or post a link to your page or test case replicating the issues so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin