SoFunction
Updated on 2025-02-28

Using js to create html table paging example (js implement paging)


<script type="text/javascript">
var pageSize = 15;    //The number of records displayed per page
var curPage=0;             //Current page
var lastPage;           //Last Page
var direct=0;                                                                                                                            �
var len;
var page;                                                                                                                                                                                                                                                             �
            var begin;
            var end;

               
            $(document).ready(function display(){  
len =$("#mytable tr").length - 1;    // Find the total number of rows of this table and remove the first row introduction
page=len % pageSize==0 ? len/pageSize : (len/pageSize)+1;// Calculate the number of pages based on the number of records
                // alert("page==="+page);
curPage=1;    // Set the current to the first page
displayPage(1);//Show the first page

("btn0").innerHTML="Current " + curPage + "/" + page + " pages per page ";    // Show how many pages are currently available
("sjzl").innerHTML="Total Data" + len + "";            // Display Data
                ("pageSize").value = pageSize;

               

$("#btn1").click(function firstPage(){    // Home Page
                    curPage=1;
                    direct = 0;
                    displayPage();
                });
$("#btn2").click(function frontPage(){    // Previous page
                    direct=-1;
                    displayPage();
                });
$("#btn3").click(function nextPage(){    // Next page
                    direct=1;
                    displayPage();
                });
$("#btn4").click(function lastPage(){    // Last page
                    curPage=page;
                    direct = 0;
                    displayPage();
                });
$("#btn5").click(function changePage(){    // Change page
                    curPage=("changePage").value * 1;
                    if (!/^[1-9]\d*$/.test(curPage)) {
alert("Please enter a positive integer");
                        return ;
                    }
                    if (curPage > page) {
alert("Exceeded data page");
                        return ;
                    }
                    direct = 0;
                    displayPage();
                });

               
$("#pageSizeSet").click(function setPageSize(){    // Set how many records are displayed per page
pageSize = ("pageSize").value;     //The number of records displayed per page
                    if (!/^[1-9]\d*$/.test(pageSize)) {
alert("Please enter a positive integer");
                        return ;
                    }
                    len =$("#mytable tr").length - 1;
page=len % pageSize==0 ? len/pageSize : (len/pageSize)+1;// Calculate the number of pages based on the number of records
curPage=1;                                                                                                                            �
direct=0;                                                                                                                             �
                     firstPage();
                });
            });

            function displayPage(){
                if(curPage <=1 && direct==-1){
                    direct=0;
alert("It's already the first page");
                    return;
                } else if (curPage >= page && direct==1) {
                    direct=0;
alert("It's already the last page");
                    return ;
                }

                lastPage = curPage;

// Fixed the bug where curPage calculated 0 when len=1
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }

               
("btn0").innerHTML="Current " + curPage + "/" + page + " pages per page ";             // Show how many pages are currently

begin=(curPage-1)*pageSize + 1;// Start record number
end = begin + 1*pageSize - 1;    // End record number

               
                if(end > len ) end=len;
$("#mytable tr").hide();    // First, set this behavior to hide
$("#mytable tr").each(function(i){    // Then, determine whether the bank will resume display through the conditions
if((i>=begin && i<=end) || i==0 )//Show the record of begin<=x<=end
                        $(this).show();
                });

             }
    </script>