Using jquery to implement simple table paging-the table header does not change

Click on page 1, page 2 effect

Implement step 1, first add the JS link of jquery

<script type= "Text/javascript" src= "Jquery-3.2.1.min.js" ></script>

2. HTML code

1 <TableBorder= "1">2             <thead> <!--Add a thead for easy filtering of the header, do not hide it-3                <TR>4                    <th>Table Header 1</th>5                    <th>Table Header 2</th>6                </TR>                7             </thead>8             <tbodyID= "Data"> <!--add an ID to make it easy to get a table body row to display and hide-9                <TR>Ten                    <TD>1</TD> One                    <TD>1</TD> A                </TR> -                <TR> -                    <TD>2</TD> the                    <TD>2</TD> -                </TR> -                <TR> -                    <TD>3</TD> +                    <TD>3</TD> -                </TR> +                <TR> A                    <TD>4</TD> at                    <TD>4</TD> -                </TR> -                <TR> -                    <TD>5</TD> -                    <TD>5</TD> -                </TR> in                <TR> -                    <TD>6</TD> to                    <TD>6</TD> +                </TR> -                <TR> the                    <TD>7</TD> *                    <TD>7</TD> $                </TR>Panax Notoginseng                <TR> -                    <TD>8</TD> the                    <TD>8</TD> +                </TR> A                </tbody> the         </Table> +         <DivID= "NAV"></Div> <!--here to show page numbers--

3. JS Code

1 //paging is performed when page loading is complete2$ (document). Ready (function() {3     varrowsshown=3;//rows displayed per page4     varrowstotal=$ (' #data tr '). Length;//get a total of rows5     varNumpages=math.ceil (Rowstotal/rowsshown);//Calculate how many pages there are6     7     //Show page numbers, add pages to #nav8      for(vari=0;i<numpages;i++){9         varPagenum=i+1;Ten$ (' #nav '). Append (' <a href= "#" rel= "' +i+ '" > ' +pagenum+ ' </a>&nbsp; '); One     } A      -     /*first page paging operation - * Hide All rows First the * Show the number of rows that should be displayed on the first page (this example is 3) - * Add a value to the active class attribute for the first page number to add style -      * */ -$ (' #data tr '). Hide (); +$ (' #data tr '). Slice (0, Rowsshown). Show (); -$ (' #nav a:first '). addclass (' active '); +      A     //Page Click event at$ (' #nav a '). bind (' click '),function(){ -$ (' #nav a '). Removeclass (' active ');//Remove all page numbers from the active class -$( This). addclass (' active ');//add an active class to the current page number -         varcurrpage=$ ( This). attr (' rel ');//Remove the value on the page number -         varStartitem=currpage*rowsshown;//the start of the number of lines = page number * lines displayed per page -         varEnditem=startitem+rowsshown;//end of line number = start + line displayed per page in$ (' #data tr '). Hide ();//all rows are hidden -          to         //show lines from start to finish +$ (' #data tr '). Slice (Startitem,enditem). CSS (' Display ', ' Table-row '); -     }); the});

4. CSS Code

Add a style to a selected page number

1 . Active {2    padding: 0px;  3    border: 1px solid black;  4    background-color: Gray;  5     }

Using jquery to implement simple table paging-the table header does not change