how to programmatically update table without a server refresh

reidevelopment

I have a table with over 18K rows. I have a custom edit form that allows the user to edit multiple rows where the part number matches. Once the users presses the save button, I write the changes to the server using ajax. At the moment, I refresh the table from the server after the update, but this is inefficient. I would like to update the table programmatically to reflect the changes and send the changes to the server in the background. When a user clicks the edit button, I save the current row Data and when they press save, I would like to use this value to determine which row to update. I can't seem to figure out how to update the rows.

What I am currently doing is:

On edit, I save the current row like this:

const tr = $(this).closest('tr');
currentRow = DATATABLE.row(tr).data();

This gives me a row of data that reflects the properties of a part. each part can have multiple revisions but the data could be the same so I do a query to find all related revs and populate the form.

Then after the edit, the user would press Save and then I would want to update the DATATABLE object for that row, and any other revs that the user selected. I have the original row saved do I have the data such as part number and rev. How do I query the DATATABLE to find all of the rows that match what the user selected and then once found, how to I edit those rows.

I'm not sure what other code you would need.

kthorngren

The first question is are you using the Editor for this or your own code for editing the table? My answers assume you are using your own code based on the above code snippet.

The row().data() API is both a getter and setter. Here is a simplistic example:

const tr = $(this).closest('tr');
currentRow = DATATABLE.row(tr).data();

// code to allow editing of the row data - updates saved in `updatedRow` variable

DATATABLE.row(tr).data( updatedRow ).draw();

Here is a simple example:
https://live.datatables.net/hehehecu/1/edit

Type some text into the New Position input then click a row. You will see the position attribute for the row is updated.

Instead of updating the row immediately I would look at having the server perform the DB update, query the DB for the updated record then return that as a JSON response. In the jQuery ajax() success function use the returned data to update the row. This way the user sees the same data as the DB.

each part can have multiple revisions but the data could be the same so I do a query to find all related revs and populate the form.

Is this data also displayed in the Datatable?

How do I query the DATATABLE to find all of the rows that match what the user selected and then once found, how to I edit those rows.

Use the row-selector as a function to fetch all the rows matching a condition. See the function example in the docs.

I have a table with over 18K rows.

All the above assumes you are using client side processing not server side processing. Server side processing doesn't support client side updates using row().data() so you will need to use draw() or ajax.reload() to fetch the updated data.

Kevin

reidevelopment

This answered most of my questions. Because of your answer, I am able to update one row. When I try to update multiple rows, I run into a problem.

I did figure out the row selection based on your prompt:

const rows = DATATABLE.rows((idx,data,node) => {
    return data.PartNumber === partNumber && revs.include(data.Rev)
}

This returns the correct rows. My problem when I attempt to update each row I can't figure out how to iterate through the array because it doesn't look like it is an array.

What I have is:

rows.forEach(row => {
   const data = row.data();
   keys.forEach(k => data[k] = payload[k];
   // update the DATATABLE
   rows(row).data(data).draw();
}

I thought that would work but I keep getting errors on the forEach.

I'm sure I am doing something wrong with what is returned from the rows selection.

kthorngren

Try using rows().every() instead of forEach.

Kevin