data[0] (hidden column) returns expected data[1] value

WernerCloete

Good morning

I build a table dynamically, as with my example at https://jsfiddle.net/WernerCloete/m23akdjb/103/.

When I remove the row, after updating the database with the new data, data[0] returns the data[1] value, not the expected ID value (the example does not have this problem).

I have no idea why this would happen. If I don't convert the table, using

    $("table#test").DataTable(
    {
      "bAutoWidth": false,
      "columnDefs":
      [
        {
          "targets": [ 0 ],
          "visible": false,
          "searchable": false
        }
      ],
      "lengthMenu": [ 5, 10, 25, 50, 75, 100 ],
      "order": [[ 1, "asc" ]],
      "select":
      {
        "style": "single"
      }
    });

the table shows that the ID column and row values are present.

WernerCloete

In my project code, when I do a

console.log(JSON.stringify($("table#" + table_id)));

I get

{"0":{"jQuery331078684780388381942":{},"jQuery331078684780388381941":{"hasDataAttrs":true,"events":{"length":[{"type":"length","origType":"length","guid":206,"namespace":"DT.dt"}],"search":[{"type":"search","origType":"search","guid":209,"namespace":"DT.dt"}],"order":[{"type":"order","origType":"order","guid":213,"namespace":"DT.dt"},{"type":"order","origType":"order","guid":217,"namespace":"DT.dt"},{"type":"order","origType":"order","guid":221,"namespace":"DT.dt"},{"type":"order","origType":"order","guid":225,"namespace":"DT.dt"},{"type":"order","origType":"order","guid":229,"namespace":"DT.dt"},{"type":"order","origType":"order","guid":233,"namespace":"DT.dt"}]}},"sizzle1518765286812":{"undefined":{"parentNode":[453,55,true]}}},"length":1,"prevObject":{"0":{"location":{"href":"http://localhost:8080/inventory/items","origin":"http://localhost:8080","protocol":"http:","host":"localhost:8080","hostname":"localhost","port":"8080","pathname":"/inventory/items","search":"","hash":""},"jQuery331078684780388381941":{"events":{"mouseup":[{"type":"mouseup","origType":"mouseup","guid":15,"namespace":""}],"click":[{"type":"click","origType":"click","guid":18,"selector":"[data-dismiss=\"alert\"]","needsContext":false,"namespace":"alert.bs.data-api"},{"type":"click","origType":"click","guid":19,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"},{"type":"click","origType":"click","guid":21,"selector":"[data-slide]","needsContext":false,"namespace":"bs.carousel.data-api"},{"type":"click","origType":"click","guid":21,"selector":"[data-slide-to]","needsContext":false,"namespace":"bs.carousel.data-api"},{"type":"click","origType":"click","guid":23,"selector":"[data-toggle=\"collapse\"]","needsContext":false,"namespace":"bs.collapse.data-api"},{"type":"click","origType":"click","guid":25,"selector":".dropdown form","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"click","origType":"click","guid":26,"selector":"[data-toggle=\"dropdown\"]","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"click","origType":"click","guid":28,"selector":"[data-toggle=\"modal\"]","needsContext":false,"namespace":"bs.data-api.modal"},{"type":"click","origType":"click","guid":30,"selector":"[data-toggle=\"tab\"]","needsContext":false,"namespace":"bs.data-api.tab"},{"type":"click","origType":"click","guid":30,"selector":"[data-toggle=\"pill\"]","needsContext":false,"namespace":"bs.data-api.tab"},{"type":"click","origType":"click","guid":24,"namespace":"bs.data-api.dropdown"}],"focusout":[{"type":"focusout","origType":"blur","guid":20,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"}],"focusin":[{"type":"focusin","origType":"focus","guid":20,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"},{"type":"focusin","origType":"focusin","guid":320,"namespace":"bs.modal"}],"keydown":[{"type":"keydown","origType":"keydown","guid":27,"selector":"[data-toggle=\"dropdown\"]","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"keydown","origType":"keydown","guid":27,"selector":".dropdown-menu","needsContext":false,"namespace":"bs.data-api.dropdown"}]},"focusout":1,"focusin":1}},"length":1}}

and then, when I do a

var table = $("table#" + table_id).DataTable();

console.log(JSON.stringify(table));

I get

{"context":[{"oFeatures":{"bAutoWidth":true,"bDeferRender":false,"bFilter":true,"bInfo":true,"bLengthChange":true,"bPaginate":true,"bProcessing":false,"bServerSide":false,"bSort":true,"bSortMulti":true,"bSortClasses":true,"bStateSave":null},"oScroll":{"bCollapse":false,"iBarWidth":10,"sX":"","sXInner":"","sY":""},"oLanguage":{"fnInfoCallback":null,"oAria":{"sSortAscending":": activate to sort column ascending","sSortDescending":": activate to sort column descending","_hungarianMap":{"sortAscending":"sSortAscending","sortDescending":"sSortDescending"}},"oPaginate":{"sFirst":"First","sLast":"Last","sNext":"Next","sPrevious":"Previous","_hungarianMap":{"first":"sFirst","last":"sLast","next":"sNext","previous":"sPrevious"}},"sEmptyTable":"No data available in table","sInfo":"Showing _START_ to _END_ of _TOTAL_ entries","sInfoEmpty":"Showing 0 to 0 of 0 entries","sInfoFiltered":"(filtered from _MAX_ total entries)","sInfoPostFix":"","sDecimal":"","sThousands":",","sLengthMenu":"Show _MENU_ …

so it appears that the table is located, but when I try to remove the current row, data[0] returns an incorrect (data[1]) value...and, when I try to add the new row, the new row is not added.

Row removal code:

               if (_item["_id"] != undefined)
               {
                 table.rows(function(idx, data, node) { console.log("found " + data[0] + ", looking for " + _item["_id"]);  return (data[0] == _item["_id"]); }).remove().draw();
               }

Row addition code:

               var values = [ saved_item["_id"] ];

               for (var i = 0; i < saved_item["fields"].length; i++)
               {
                 values.push(saved_item["fields"][i]["value"]);
               }

               table.row.add(values).draw(false);

WernerCloete

I added some code, to my project, in order to view the table values.

    $("form#item-editor table.subitem-table").each(function()
    {
      if (!$.fn.DataTable.isDataTable(this))
      {
        var _id_ = $(this).attr("id");
        console.log(_id_);

        $(this).find("tbody tr").each(function()
        {
          var values = [];
          
          $(this).find("td").each(function()
          {
            values.push($(this).html());
          });
          
          console.log(values);
        });
        
        $(this).DataTable(
        {
          "bAutoWidth": false,
          "columnDefs":
          [
            {
              "targets": [ 0 ],
              "visible": false,
              "searchable": false
            }
          ],
          "lengthMenu": [ 5, 10, 25, 50, 75, 100 ],
          "order": [[ 1, "asc" ]],
          "select":
          {
            "style": "single"
          }
        });

        $(this).find("tbody tr").each(function()
        {
          var data = $("table#" + _id_).DataTable().row(this).data();
          
          console.log(data);
        });
      }
    });

The logging, from line 17:

Array [ "5a85bd070e93a5125c76ee10", "Ford", "Fiesta", "2017", "", "" ]

The logging, from line 43:

Array [ "Ford", "Fiesta", "2017", "", "" ]

Why would column 0 disappear?

WernerCloete

I've updated my JsFiddle, at https://jsfiddle.net/WernerCloete/m23akdjb/204/, placed the table in a tab, as it is in my project code, added additional table manipulation code, as in my project, but the JsFiddle code works and my project code does not.

This is quite frustrating...

Tester2017

To be honest, I did not analyze all your code, but your last comment that it is working in jsFiddle and not in your project might be a problem of your cache (I had a lot of problems with related to the cache). Maybe your project is still working on an older version of your JavaScript. So give it a try to clean your cache and then reload your project.

WernerCloete

Good day

I've already done that, quite a few times (I had a similar thought), but it did not work.

WernerCloete

jQuery:

/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */

DataTables:

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs/dt-1.10.16
 *
 * Included libraries:
 *   DataTables 1.10.16
 */

/*!
 DataTables 1.10.16
 ©2008-2017 SpryMedia Ltd - datatables.net/license
*/

WernerCloete

I just noticed something else:

        $("div#test-modal table").each(function()
        {
          if (!$.fn.DataTable.isDataTable(this))
          {
            console.log("converting table " + $(this).attr("id"));
            
            console.log($(this));
            
            $(this).DataTable(
            {
              "bAutoWidth": false,
              "columnDefs":
              [
                {
                  "targets": [ 0 ],
                  "visible": false,
                  "searchable": false
                }
              ],
              "order": [[ 1, "asc" ]]
            });
            
            console.log($(this).DataTable());
          }
        });

Even though I'm using

if (!$.fn.DataTable.isDataTable(this))

my table is converted over and over again (every time I to update the row - also happening in my JsFiddle example). I don't understand why this is happening.

I updated my JsFiddle to https://jsfiddle.net/WernerCloete/m23akdjb/206/, added

      $("div#test-modal").on("hidden.bs.modal", function ()
      {
        $("div#test-modal").remove();
      });

and now that does not appear any more. It still does not explain why

if (!$.fn.DataTable.isDataTable(this))

did not work...

WernerCloete

I created a work-around, "jumping down" the hierarchy:

var base = ((!modal_shown) ? $("body") : $("div#modal_id"));
var table = base.find("table#table_id");

I have to use "body", if no modal is shown, as I have tables on the page that users can click on to open the modals.

From there I can now use

table.DataTable(...)