Clear Modified Data

KirenJames7

I have a problem that I need some help with.

The datatable has text input fields and the row select returns an array of the row data like so

(14) ["<input type="text" class="form-control " id="item-code1" name="item-code1" required="true"/>", "<input type="text" class="form-control " id="item-…e="item-attribute-description1" required="true"/>", "<input type="text" class="form-control " id="produ…n1" name="product-description1" required="true"/>", "<input type="text" class="form-control text-center…1" name="item-unit-of-measure1" required="true"/>", "<input type="text" class="form-control text-center…id="currency1" name="currency1" required="true"/>", "<input type="text" class="form-control text-right"…price1" name="item-unit-price1" required="true"/>", "<input type="text" class="form-control text-right"…uantity1" name="item-quantity1" required="true"/>", "<input type="text" class="form-control text-right"…line-discount1" required="true" readonly="true"/>", "<input type="text" class="form-control text-right"…item-line-nbt1" required="true" readonly="true"/>", "<input type="text" class="form-control text-right"…item-line-olt1" required="true" readonly="true"/>", "<input type="text" class="form-control text-right"…item-line-vat1" required="true" readonly="true"/>", "<input type="text" class="form-control text-right"…tem-line-svat1" required="true" readonly="true"/>", "<input type="text" class="form-control text-right"…e="line-total1" required="true" readonly="true"/>", "<input type="text" class="form-control " id="fa-attributes1" name="fa-attributes1" />"]

During a submission I am retrieving the data from the datatable using the table.data().toArray() and modifying the data into a certain data structure which is required for the application's purpose.

In the instance I select a row there after the row returns an array to that data structure instead of the above mentioned initial row data, which I require.

Is there a method to either clear the modified data or force the row to always return the row data to the initial format??

I tried the invalidate method.. but that just adds the data structure data to the table.. which i do not require..

Hoping for a quick response..

Regards,
Kiren

colin

Hi @KirenJames7 ,

Is this using Editor?

If not, as you invalidate() would be the way to go - not sure why the format would be different.

If no help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

KirenJames7

Hi @colin

Thank for your prompt reply.

No not using editor.

What happens with invalidate is, I am converting the table.data().toArray() into a data structure of objects. Hence why invalidate can't be used.

Is there any method to either clear the modified data.. or always force the row().data() to read the initial data array on the row selection..

I will try to add a test case ASAP

KirenJames7

Writing a test case is a bit difficult as i have to right from scratch a very complex use case function I will post the code instead:

let addcounter = 0;
let testines = $('#new-purchase-quote-lines').DataTable({
    paging: false,
    info: false,
    scrollY: 200,
    scrollCollapse:true,
    responsive: true,
    processing: true,
    columns: [
         { title: "Test Code", width: "15vh" },
         { title: "Test Description", width: "50vh" },
         { title: "Product Description", className: "product-description hidden-column" }
    ],
    dom: "Bfrtip",
    buttons: [
          {
                text: "Add",
                className: "btn btn-raised btn-primary waves-effect waves-light",
                action: function() {
                     let currenttable = this.table();
                     let lastrow = currenttable.row(':last', { order: 'applied' }).data();
                     if (lastrow !== undefined) {
                         if (!lastrow.every(element => $("#" + $(element).attr("id")).val() !== "")) {
                             return false;
                         }
                     }

                     addcounter += 1;
                     currenttable.row.add([ 
'<input type="text" class="form-control " id="test-code'+ addcounter +'" name="test-code'+ addcounter +'" required="true"/>',
'<input type="text" class="form-control " id="test-attribute-description'+ addcounter +'" name="test-attribute-description'+ addcounter +'" required="true"/>'
'<input type="text" class="form-control " id="test-pro'+ addcounter +'" name="test-pro'+ addcounter +'" required="true"/>'
                                        ]).draw(false).node();
               }
         }
     ]
});
 
testines.on("click", "tr", function() {
      if (!$(this).hasClass("selected")) {
              testines.$('tr.selected').removeClass("selected");
              $(this).addClass("selected");
              //before submission this returns row as normal after submission this returns the data structure
              selected_row.test_line = testines.row(this).data();
      }
});

//the submission where the object data structure is created
$(document).on('click', '#save', function() {
    let data = testines.data().toArray();
    data.each((row) => {
    let index = row.length;
    while ( index >= 0 ) {
         if ( $('#' + $(row[ index ]).attr("id")).val() !== undefined && $('#' + $(row[ index ]).attr("id")).val() !== "null" && $(row [ index ]).attr("name").replace(/[0-9]/g, '') !== "line-total" ) {
             row[ index ] = { name: $(row [ index ]).attr("name").replace(/[0-9]/g, ''), value: $('#' + $(row[ index ]).attr("id")).val() };
         } else {
             row.splice(index, 1);
         }
       index--;
     }
   });
});

Hope this is clear enough for you to understand the problem at hand
Hope for a quick reply..

PS: Please do excuse any misspells or missing syntax

Thanks
Kiren James

KirenJames7

Hi,

I managed to fix this by cloning the array. For some reason the ES6 or slice function did not work. But I managed to solve using the JSON.parse(JSON.stringify(originalArray)); method.

My submission code is now as follows:

$(document).on('click', '#save', function() {
    const data = testines.data().toArray();
    const clone = JSON.parse(JSON.stringify(data));
    clone.each((row) => {
    let index = row.length;
    while ( index >= 0 ) {
         if ( $('#' + $(row[ index ]).attr("id")).val() !== undefined && $('#' + $(row[ index ]).attr("id")).val() !== "null" && $(row [ index ]).attr("name").replace(/[0-9]/g, '') !== "line-total" ) {
             row[ index ] = { name: $(row [ index ]).attr("name").replace(/[0-9]/g, ''), value: $('#' + $(row[ index ]).attr("id")).val() };
         } else {
             row.splice(index, 1);
         }
       index--;
     }
   });
});

Please do let me know if any other solution

Thanks
Kiren

colin

Hi @KirenJames7 ,

What happens with invalidate is, I am converting the table.data().toArray() into a data structure of objects. Hence why invalidate can't be used.

I'm not clear here, if the data has changed, either change it in the DOM or the original source too, then the rows().invalidate() will pick up on it.

There's a lot of code to struggle through without seeing it running, a test case with steps to reproduce would help here.

Cheers,

Colin