How can i add pagination on table using jquery?

Question

I have a table having data in JSON form fetch from local-disk, i read all the data using getJSON method and put into table on the other hand i store the json data into local-storage for edit and delete operations , i just want to add pagination so that i see limited records on my page. I have no idea how to make a pagination on table How can i do this through jquery?

Javascript

$.getJSON("2-fedtest.json", function(data) {
                    if (localStorage.getItem("2_fedtest_json_file") == undefined) {
                        trans = data.listing_data;
                        localStorage.setItem('2_fedtest_json_file', JSON.stringify(trans));
                    } else {
                        trans = JSON.parse(localStorage.getItem("2_fedtest_json_file"));
                    }
                    response(trans);
                });


                function response(e) {
                    let table = document.getElementById("transaction_table");
                    let row, cell, button;
                    for (let i = 0; i < e.length; i++) {
                        row = table.insertRow();
                        cell = row.insertCell();
                        cell.textContent = e[i].document_first_name;
                        cell = row.insertCell();
                        cell.textContent = e[i].email;
                        cell = row.insertCell();
                        cell.textContent = e[i].document_dob;
                        cell = row.insertCell();
                        cell.textContent = e[i].used_services_in_request;
                        cell = row.insertCell();
                        const detailbutton = document.createElement("button");
                        ////////////// Detail Button///////////
                        detailbutton.id = i;
                        detailbutton.innerHTML = 'Detail';
                        $(detailbutton).click(function(e) {
                            var button_click_id = detailbutton.id;
                        });
                        cell.appendChild(detailbutton);

                        ////////// Edit Button///////////////
                        cell = row.insertCell();
                        const editebutton = document.createElement("button");
                        editebutton.id = i;
                        editebutton.innerHTML = 'Edit'; 
                        $(editebutton).click(function(e) { 
                            var button_click_id = detailbutton.id;
                        });
                        cell.appendChild(editebutton);
                        ////////End Edit Button//////////////
                        // 
                        ///////Delete Button////////
                        cell = row.insertCell();
                        const deletebutton = document.createElement("button");
                        deletebutton.style.color = "#fff";
                        deletebutton.id = i;
                        deletebutton.style.background = "red";
                        deletebutton.innerHTML = 'Delete';
                        $(deletebutton).click(function(e) {

                        });
                        cell.appendChild(deletebutton);

                    }
                });

Html

<table id="transaction_table" class="pagination">
       <tr> 
         <th id="detail">Detail</th>
         <th id="detail">Edit</th>
         <th id="detail">Delete</th>
       <tr>
</table>

Answer 1

If you have all the data already available to your program, then I’d imagine all you really need to do is hide all the elements except the first n, where n is the page size. Then add in a “next” button with an event listener that will hide the current n items while displaying the next n whenever clicked. A simple variable as a page number counter that increments when next is pressed and is used to index the relevant rows to show would work fine there. You can also add a “previous” button to do the opposite of the above.