I have implemented a pagination feature on a table in my HTML page. Each page should display three rows, and I have a total of eight rows in my table. Additionally, I have a button that removes rows with the class “remove_tr”. When this button is clicked, I want the corresponding rows to be removed and the pagination to be updated accordingly.
The issue I’m facing is that when I remove the rows with the “remove_tr” class, only the rows on the first page are affected. The pagination links and displayed rows are not updated correctly, and I end up with two pages instead of three. I need assistance in modifying the existing code to ensure that the removal of rows updates the pagination correctly, so that each page consistently shows three rows.
//HTML Code
<button class="remove7">remove</button>
<table id="data-table">
<thead>
<tr id="table-header">
<th data-column="ALARM_DESC" data-order="asc">
ALARM_DESC
<div class="resize-handle"></div>
</th>
<th data-column="ALARM_NAME" data-order="asc">
ALARM_NAME
<div class="resize-handle"></div>
</th>
<th data-column="APPLICAITON" data-order="asc">
APPLICAITON
<div class="resize-handle"></div>
</th>
<th data-column="ALARM_PATH" data-order="asc">
ALARM_PATH
<div class="resize-handle"></div>
</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="high-priority remove_tr">
<td class="ALARM_DESC">first desc</td>
<td class="ALARM_NAME">first name</td>
<td class="APPLICAITON">first app</td>
<td class="ALARM_PATH">first path</td>
</tr>
<tr class="high-priority remove_tr">
<td class="ALARM_DESC">Second desc</td>
<td class="ALARM_NAME">Second name</td>
<td class="APPLICAITON">second app</td>
<td class="ALARM_PATH">second path</td>
</tr>
<tr class="high-priority ">
<td class="ALARM_DESC">third desc</td>
<td class="ALARM_NAME">third name</td>
<td class="APPLICAITON">third app</td>
<td class="ALARM_PATH">third path</td>
</tr>
<tr class="high-priority">
<td class="ALARM_DESC">four desc</td>
<td class="ALARM_NAME">four name</td>
<td class="APPLICAITON">four app</td>
<td class="ALARM_PATH">four path</td>
</tr>
<tr class="high-priority">
<td class="ALARM_DESC">fifth desc</td>
<td class="ALARM_NAME">fifth name</td>
<td class="APPLICAITON">fifth app</td>
<td class="ALARM_PATH">fifth path</td>
</tr>
<tr class="high-priority">
<td class="ALARM_DESC">six desc</td>
<td class="ALARM_NAME">six name</td>
<td class="APPLICAITON">six app</td>
<td class="ALARM_PATH">six path</td>
</tr>
</tbody>
</table>
//css code
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination a {
margin: 0 5px;
padding: 5px 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border-radius: 3px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
//jquery code
$(document).ready(function() {
add_pagination();
});
function add_pagination() {
var rowsPerPage = 3;
var $table = $('#data-table');
var $tbody = $table.find('tbody');
var $rows = $tbody.find('tr');
var totalRows = $rows.length;
var totalPages = Math.ceil(totalRows / rowsPerPage);
var $pagination = $('.pagination');
var $pagination = $('<div class="pagination"></div>'); // إنشاء عنصر الترقيم
$table.after($pagination);
for (var i = 1; i <= totalPages; i++) {
var $link = $('<a href="#"></a>').text(i);
$link.attr('data-page', i);
$pagination.append($link);
}
$rows.hide();
$rows.slice(0, rowsPerPage).show();
$pagination.find('a:first').addClass('active');
$pagination.on('click', 'a', function(e) {
e.preventDefault();
var page = $(this).attr('data-page');
var startIndex = (page - 1) * rowsPerPage;
var endIndex = startIndex + rowsPerPage;
$rows.hide();
$rows.slice(startIndex, endIndex).show();
$pagination.find('a').removeClass('active');
$(this).addClass('active');
});
}
$(".remove7").on("click",function(){
$(".remove_tr").remove();
})
I have already implemented basic pagination functionality using JavaScript/jQuery, but I’m struggling to integrate the dynamic row removal with the pagination logic. I’ve included the relevant HTML and JavaScript code in my initial question.
Any help or suggestions on how to address this issue would be greatly appreciated. Thank you!
What I Tried:
I attempted to modify the existing code by adding a click event handler to the “remove7” button. Within the event handler, I iterated through the visible rows and removed any rows that had the “remove_tr” class. I also calculated the number of rows removed on the first page.
What I Expected:
Upon clicking the “remove7” button, I expected the rows with the “remove_tr” class to be removed from the first page only. The pagination should then update accordingly, displaying three rows per page and adjusting the pagination links.
What Actually Resulted:
After executing the code, only the rows on the first page were correctly removed. However, the pagination links and displayed rows did not update as expected. The pagination still showed two pages instead of three, and the displayed rows were not consistent with the desired pagination logic.