Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Pagination re-direction issue


regarding pagination in tables , when i am on the page 6 in table and delete any item in that case the page is redirected to first page after deleting the item

i am using this url: https://preview.keenthemes.com/metronic8/angular/demo1/crafted/pages/wizards/vertical


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi

Glad to hear the solution is working well for you.



Hi

the pagination reset issue is related to how DataTables handles reloading after deletion. The problem is in how the table is refreshed after a delete operation.

The fix needs to be implemented in the component that handles the delete operation and table reload.

The reload handler calls dtInstance.ajax.reload() without parameters.


// CURRENT CODE (resets pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload());

// CHANGE TO (preserves pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));


In file crud.component.ts where the reload event is being handled, around line 70-73. Could you please try these changes?

/angular/demo6/src/app/modules/crud/crud.component.ts


if (this.reload) {
this.reload.subscribe(data => {
this.modalService.dismissAll();
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));
});
}


Let us know if it is not working.

Thanks



Thanks It's working well



Hi Ravi Kakadiya

The link you provided is the demo page for wizard form component. Are you working on datatable?

Thanks



Yes, I am working on datatables.

as of now, i have completed 3 projects using Metronic, and this issue is arising in all the projects


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(