Client Side HTML Table Pagination

Try It Yourself

Column One Header Column Two Header Column Three Header
Row 1 declared rise
Row 2 far without
Row 3 either tide
Row 4 desert hay
Row 5 alike difficulty
Row 6 spin eye
Row 7 easy solve
Row 8 show perfect
Row 9 actual magnet
Row 10 symbol spoken
Row 11 combination tonight
Row 12 six palace
Row 13 opportunity hidden
Row 14 person exact
Row 15 nearly your
Row 16 species possibly
Row 17 bridge consonant
Row 18 train bar
Row 19 clothing settlers
Row 20 job excitement
Row 21 pour struggle
Row 22 sets citizen
Row 23 waste golden
Row 24 effort solution
Row 25 establish blind
Row 26 age feature
Row 27 clock industry
Row 28 dust none
Row 29 courage ear
Row 30 camp curve
Row 31 wrote everything
Row 32 period satellites
Row 33 whenever former
Row 34 caught saddle
Row 35 rock collect
Row 36 cave disease
Row 37 official orange
Row 38 beneath breathing
Row 39 easy clearly
Row 40 promised shelf
Row 41 further negative
Row 42 fed put
Row 43 wheel attached
Row 44 handle near
Row 45 said mysterious
Row 46 divide police
Row 47 bend pictured
Row 48 one please
Row 49 helpful public
Row 50 bottle bent
Row 51 correct deep
Row 52 declared rise
Row 53 far without
Row 54 either tide
Row 55 desert hay
Row 56 alike difficulty
Row 57 spin eye
Row 58 easy solve
Row 59 show perfect
Row 60 actual magnet
Row 61 symbol spoken
Row 62 combination tonight
Row 63 six palace
Row 64 opportunity hidden
Row 65 person exact
Row 66 nearly your
Row 67 species possibly
Row 68 bridge consonant
Row 69 train bar
Row 70 clothing settlers
Row 71 job excitement
Row 72 pour struggle
Row 73 sets citizen
Row 74 waste golden
Row 75 effort solution
Row 76 establish blind
Row 77 age feature
Row 78 clock industry
Row 79 dust none
Row 80 courage ear
Row 81 camp curve
Row 82 wrote everything
Row 83 period satellites
Row 84 whenever former
Row 85 caught saddle
Row 86 rock collect
Row 87 cave disease
Row 88 official orange
Row 89 beneath breathing
Row 90 easy clearly
Row 91 promised shelf
Row 92 further negative
Row 93 fed put
Row 94 wheel attached
Row 95 handle near
Row 96 said mysterious
Row 97 divide police
Row 98 bend pictured
Row 99 one please
Row 100 helpful public
Row 101 bottle bent
Row 102 correct deep
Row 103 declared rise
Row 104 far without
Row 105 either tide
Row 106 desert hay
Row 107 alike difficulty
Row 108 spin eye
Row 109 easy solve
Row 110 show perfect
Row 111 actual magnet
Row 112 symbol spoken
Row 113 combination tonight
Row 114 six palace
Row 115 opportunity hidden
Row 116 person exact
Row 117 nearly your
Row 118 species possibly
Row 119 bridge consonant
Row 120 train bar
Row 121 clothing settlers
Row 122 job excitement
Row 123 pour struggle
Row 124 sets citizen
Row 125 waste golden
Row 126 effort solution
Row 127 establish blind
Row 128 age feature
Row 129 clock industry
Row 130 dust none
Row 131 courage ear
Row 132 camp curve
Row 133 wrote everything
Row 134 period satellites
Row 135 whenever former
Row 136 caught saddle
Row 137 rock collect
Row 138 cave disease
Row 139 official orange
Row 140 beneath breathing
Row 141 easy clearly
Row 142 promised shelf
Row 143 further negative
Row 144 fed put
Row 145 wheel attached
Row 146 handle near
Row 147 said mysterious
Row 148 divide police
Row 149 bend pictured
Row 150 one please
Row 151 helpful public
Row 152 bottle bent
Row 153 correct deep

Tired of Scrolling?

Table Row Per Page





Pagination Color





Pagination Font Color





Pagination Style


Jump Page


How to Use It?

Add JQuery and table pagination into your project

You can download the JS file here 

<head>
    <script src="jquery.min.js"></script>
    <script src="table-pagination.js"></script>
</head>

or load the required scripts via CDN:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/wxtan2/Client-Side-Table-Pagination/table-pagination.js"></script>
</head>

Example Usage

Add an id to the table you wish to paginate: 
<table id="tableTest">
    <!-- Your Table Content Here -->
</table>

Plugin Initialization

Add the following to the page head or at the end of the body section of your page:

<script>
    $('#tableTest').createTablePagination();
</script>

You may also add optional parameters:

<script>
    $('#tableTest').createTablePagination({
        rowPerPage: 10,
        paginationColor: '#6f7ad7',
        fontColor:  '#555555',
        paginationStyle: 'borderless',
        jumpPage: false,
    });
</script>

Parameter

WebsiteGitHubCodePen