How to save changes of a table with pagination?

Question

I have a modal that contains a data table.This table has pagination.I want to be able to modify rows from different pages and at the end press a "Save" button that would send the modified rows to the api and update the DB.

So if my table looks like this:

  Page 0      Page 1  ...... Page n
  row0        row0
  row1      **row1**
**row2**      row2

If i have edited the row2 from Page0 and row1 from Page1 ...and etc ...what would be a good option to save the progress?Should i traverse at the end all rows and check if they are modified or add the rows in a list the moment they are changed and send them when pressing Save?

This is my html so far:

<div class="container">
    <div class="row">
        <div class="col-sm-auto">
            <ng2-smart-table class="activitiesTable" [settings]="settings" [source]="data" #activitiesTable></ng2-smart-table>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm" style="float:right">
            <button type="button" class="btn btn-default" (click)="Save($event)">Save</button>
        </div>
    </div>
</div>

The source is the data of the table.

Answer 1

According to my experience, I would suggest to let the users change whatever he wants, then at the end take all rows as json, angular will allow you to do so, then in your api convert it to your model and bulk import results in the database, then re bind the grid.