Thiết kế website giá rẻ

Question

I have implemented a table with pagination and a filter function using jQuery. The pagination works fine, and the filter function successfully filters the table rows based on the input value. However, when I apply the filter, the pagination is not updated accordingly. I want the pagination to adjust based on the filtered results, so that only the relevant page numbers are displayed.

//full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- تضمين مكتبة jQuery -->
    <title>Pagination Example</title>

    <style>
        .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;
        }
    </style>
</head>
<body>
    <input type="text" id="filter-input">
    <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">
              <td class="ALARM_DESC">oneee</td>
              <td class="ALARM_NAME">- /quickAccess/enrichDial.GET</td>
              <td class="APPLICAITON">AppDynamics</td>
              <td class="ALARM_PATH">my_et</td>
          
           </tr>
           <tr class="high-priority">
              <td class="ALARM_DESC">oneee</td>
              <td class="ALARM_NAME">twoo</td>
              <td class="APPLICAITON">AppDynamics</td>
              <td class="ALARM_PATH">my_et</td>
      
           </tr>
           <tr class="high-priority">
              <td class="ALARM_DESC">MyEtisala</td>
              <td class="ALARM_NAME">lure Rate - /quickAccess/enrichDial.GET</td>
              <td class="APPLICAITON">AppDynamics</td>
              <td class="ALARM_PATH">my_et</td>
     
           </tr>
           <tr class="high-priority">
              <td class="ALARM_DESC">Mr haron</td>
              <td class="ALARM_NAME">Mr haron</td>
              <td class="APPLICAITON">haron</td>
              <td class="ALARM_PATH">Mr haron</td>
           </tr>
        </tbody>
     </table>
     
     
     


     <script>
         $(document).ready(function() {
            add_pagination();
         })
        function add_pagination() {
            var rowsPerPage = 2; // عدد الصفوف في كل صفحة
            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 = $('<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');
            });
        }

        
// تحديث الترقيم بعد عملية الفلترة
// تحديث الترقيم بعد عملية الفلترة
function updatePagination() {
    var $filteredRows = $tbody.find('tr:visible');
    var totalFilteredRows = $filteredRows.length;
    var totalPages = Math.ceil(totalFilteredRows / rowsPerPage);

    $pagination.empty(); // إزالة روابط الترقيم الحالية

    // إنشاء روابط الترقيم مرة أخرى
    for (var i = 1; i <= totalPages; i++) {
        var $link = $('<a href="#"></a>').text(i);
        $link.attr('data-page', i);
        $pagination.append($link);
    }

    // إظهار الصفوف المناسبة في الصفحة الأولى بعد التحديث
    $filteredRows.hide();
    $filteredRows.slice(0, rowsPerPage).show();
    $pagination.find('a:first').addClass('active');
}
// تنفيذ عملية الفلترة
function filterTable() {
    var input, filter, table, tr, td, i, j;
    input = document.getElementById("filter-input");
    filter = input.value.toUpperCase();
    table = document.getElementById("data-table");
    tr = table.getElementsByTagName("tr");

    for (i = 1; i < tr.length; i++) { // تجاهل الصف الأول (العناوين)
        var display = false;
        td = tr[i].getElementsByTagName("td");

        for (j = 0; j < td.length; j++) {
            var cell = td[j];
            if (cell) {
                var txtValue = cell.textContent || cell.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    display = true;
                    break;
                }
            }
        }

        if (display) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }

    updatePagination(); // تحديث الترقيم بعد عملية الفلترة
}
var inputElement = document.getElementById("filter-input");
inputElement.addEventListener("keyup", filterTable);
inputElement.addEventListener("keyup", removeClassFromTd);

    </script>
</body>
</html>

I have tried adding the updatePagination() function to the filterTable() function, hoping that it would update the pagination after filtering the table. I expected the pagination to adjust based on the filtered results, showing only the relevant page numbers. However, the pagination remains unchanged, displaying all the page numbers even if some of the rows are filtered out.

I would appreciate any guidance on how to integrate the pagination with the filter function so that the pagination reflects the filtered results accurately. Thank you!

Thiết kế website giá rẻ

Danh mục

How can I integrate pagination with the filter table function?