How To Add Pagination To Html Table

How to brand table searchable and sortable with pagination using jQuery?

The jQuery fancyTable plugin helps the developers to blueprint HTML tables that are searchable and sortable with pagination feature. This plugin is totally based on JavaScript and HTML.

Official website for plugin: Please take intendance of file paths while implementing the codes.

https://github.com/myspace-nu/jquery.fancyTable

Case 1: The post-obit code demonstrates the simple search and sort with pagination using the jQuery fancyTable plugin.

HTML

                <!DOCTYPE html>              
                <                html                lang                =                "en"                >              
                                <                caput                >              
                                <                meta                charset                =                "utf-viii"                >              
                                <                meta                name                =                "viewport"              
                                content="                width                =                device                -width,              
                                initial-scale                =                i                ,                                shrink-to-fit                =                no                ">              
                                <                link                href                =              
                                rel                =                "stylesheet"                >              
                                </                caput                >              
                                <                body                ><                br                />              
                                <                div                class                =                "container"                >              
                                <                h3                style                =                ""                >              
                                Table with search and sortable headings              
                                </                h3                >              
                                <                table                id                =                "mytableID"                way                =                "width:100%"              
                                class                =                "table table-striped sampleTable"                >              
                                <                tr                >              
                                <                th                >Firstname</                thursday                >              
                                <                th                >Lastname</                thursday                >              
                                <                th                >Historic period</                th                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Priya</                td                >              
                                <                td                >Sharma</                td                >              
                                <                td                >24</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Arun</                td                >              
                                <                td                >Singh</                td                >              
                                <                td                >32</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Samy</                td                >              
                                <                td                >Watson</                td                >              
                                <                td                >41</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Samsamder</                td                >              
                                <                td                >Watra</                td                >              
                                <                td                >42</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Samantha</                td                >              
                                <                td                >Challa</                td                >              
                                <                td                >31</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Samuel</                td                >              
                                <                td                >Miranda</                td                >              
                                <                td                >45</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Samy</                td                >              
                                <                td                >Joseph</                td                >              
                                <                td                >37</                td                >              
                                </                tr                >              
                                </                table                >              
                                </                div                >              
                                <                script                src                =              
                                </                script                >              
                                <                script                src                =              
                                </                script                >              
                                <                script                src                =                "fancyTable.js"                >              
                                </                script                >              
                                <                script                type                =                "text/javascript"                >              
                                $(document).set up(function() {              
                                $(".sampleTable").fancyTable({              
                                /* Cavalcade number for initial sorting*/              
                                sortColumn:0,              
                                /* Setting pagination or enabling */              
                                pagination: true,              
                                /* Rows per folio kept for display */              
                                perPage:3,              
                                globalSearch:true              
                                });              
                                });              
                                </                script                >              
                                </                torso                >              
                </                html                >              

Output:

Before Execute:

Search execution:

Pagination output:

Example 2: The following example demonstrates other options similar globalSearchExcludeColumns and apply of data-attributes similar data-sortas="case-insensitive". It as well handles callback functions like onInit() and onUpdate(). The developer tin can brand utilize of other option settings as per the demand.

html

                <!DOCTYPE html>              
                <                html                lang                =                "en"                >              
                                <                head                >              
                                <                meta                charset                =                "utf-8"                >              
                                <                meta                name                =                "viewport"                content="                width                =                device                -width,              
                                initial-scale                =                1                ,                                shrink-to-fit                =                no                ">              
                                <                link                href                =              
                                rel                =                "stylesheet"                >              
                                </                head                >              
                                <                trunk                >              
                                <                div                class                =                "container"                >              
                                <                h3                >Table with sortable headings and global search</                h3                >              
                                <                table                id                =                "tableID"                course                =                "table table-striped"                >              
                                <                thead                >              
                                <                tr                >              
                                <                th                data-sortas                =                "case-insensitive"                >Firstname</                thursday                >              
                                <                th                >Lastname</                th                >              
                                <                th                >Profession</                th                >              
                                <                th                data-sortas                =                "numeric"                >Age</                th                >              
                                <                th                >City</                th                >              
                                </                tr                >              
                                </                thead                >              
                                <                tbody                >              
                                <                tr                >              
                                <                td                >John</                td                >              
                                <                td                >Caprio</                td                >              
                                <                td                >Engineer</                td                >              
                                <                td                >37</                td                >              
                                <                td                >Hyderabad</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Bikram</                td                >              
                                <                td                >Sharma</                td                >              
                                <                td                >Businessman</                td                >              
                                <                td                >42</                td                >              
                                <                td                >Delhi</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Amit</                td                >              
                                <                td                >Chowdhary</                td                >              
                                <                td                >Engineer</                td                >              
                                <                td                >58</                td                >              
                                <                td                >Chennai</                td                >              
                                </                tr                >              
                                <                tr                >              
                                <                td                >Thomas</                td                >              
                                <                td                >Einstein</                td                >              
                                <                td                >Scientist</                td                >              
                                <                td                >35</                td                >              
                                <                td                >Mumbai</                td                >              
                                </                tr                >              
                                </                tbody                >              
                                </                table                >              
                                </                div                >              
                                <                script                src                =              
                                </                script                >              
                                <                script                src                =              
                                </                script                >              
                                <                script                src                =                "fancyTable.js"                ></                script                >              
                                <                script                type                =                "text/javascript"                >              
                                $(document).ready(function(){              
                                $("#tableID").fancyTable({              
                                sortColumn:0,              
                                /* Setting pagination or enabling */              
                                pagination: simulated,              
                                globalSearch:true,              
                                /* Exclude 2nd column from global search.*/              
                                globalSearchExcludeColumns: [2],              
                                onInit:role(){              
                                /* On initialization of table */              
                                console.log({ chemical element:this });              
                                },              
                                onUpdate:function(){              
                                /* On update similar search and sort of table */              
                                console.log({ element:this });              
                                }              
                                });              
                                });              
                                </                script                >              
                                </                trunk                >              
                </                html                >              

Output: