Prevent Jumping on Row Deletion

Lucid

I've poked around and tried some things, and just can't seem to figure something out. So I'm hoping someone can help me out.

I've got a responsive DataTable with a button on each row to allow a user to delete a particular entry. However, if the table is larger than their browser window, it "jumps" to the top after deletion - instead of simply deleting the row and remaining (visually) at the same spot.

You can check out this Fiddle to see what I mean.

If you shrink your web browser window vertically - so you have to scroll down to view the last row entry and the whole table isn't visible at once - if you click the last Delete button icon, after the row is deleted, the page "jumps" back to the top of the table.

Is there an easy way to prevent this?

Thanks!

gyrocode

This occurs because you're using href="#" in your links.

Possible solution is to use preventDefault(), for example:

$('#dataTable').on("click", ".btn-verify-delete-table-entry", function(e) {
  e.preventDefault();

  // ... your code here
});

Alternative solution is to use href="javascript:;" instead of href="#".

See updated example for code and demonstration.

---

See more articles about jQuery DataTables on gyrocode.com.