Topic: If my Table has 5 pages, I always return to the first page after editing the second page. Is there a way to solve it?

namcosym priority asked 1 year ago


  1. How to get the field value being edited?
  2. When creating, updating, or deleting fails, how to avoid out-of-sync data?
  3. If my Table has 5 pages, I always return to the first page after editing the second page. Is there a way to solve it?
Search
        <button class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_modal">
            <i class="fa fa-plus"></i>
        </button>
    </div>
    <hr />
    <div id="table_modal"></div>



    let table = document.getElementById('table_modal');

    table.addEventListener('edit.mdb.tableEditor', (e) => {
        // "obj" is the currently edited row, how to get it
        $.post('/Menu/editMenus',obj, function (result) {
             if(result==false){....How to prevent data from getting out of sync}
        }
    });

    table.addEventListener('update.mdb.tableEditor', (e) => {
        showTable();
    });

$(function(){
        showTable();
    });

    function showTable(){
        $.get('/Menu/GetMenusToJson', { menuType: 1 }, function (result) {
            const advancedColumns = [
                {
                    width: 50,
                    label: 'Id',
                    field: 'id',
                    fixed: true
                },
                {
                    width: 250,
                    label: 'Name',
                    field: 'name',
                }
            ];
            const advancedRows = result;

            const tableEditor = TableEditor.getInstance(table); 
            if (tableEditor!=null) $('#table_modal').html('');

            new TableEditor(
                table,
                { columns: advancedColumns, rows: advancedRows },
                { mode: 'modal', entries: 5, entriesOptions: [5, 10, 15] }
            );
        });
    }

Mateusz Lazaru staff answered 1 year ago


1.

document.addEventListener('edit.mdb.tableEditor', (e) => {
  const editedObj = e.row
  console.log(editedObj)
})

2.Use e.preventDefault()

document.addEventListener('edit.mdb.tableEditor', (e) => {
  if(result === false) {
    e.preventDefault()
  }
})

3.It shouldn't change selected page and it doesn't in my snippet. Could you show me this issue using our playground tool?


namcosym priority commented 1 year ago

I used to not know the second method, so regardless of whether the addition was successful or not, I had to retrieve the data from the backend to confirm, which caused the page to refresh (the error in the third point). It has now been resolved.

table.addEventListener('update.mdb.tableEditor', (e) => {
    showTable();
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: Visual Studio 2022
  • Browser: Google Chrome
  • OS: Windows11
  • Provided sample code: No
  • Provided link: No