by DuttaluruVijayakumar Updated : Nov 28, 2019 in Articles

How to implement pagination sorting filter in jquery

the given below example we will learn how to implement pagination sorting filter in jquery in simple way step by step

Create an HTML page in your project name like “pagination.html” flow the given below HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>How to implement pagination sorting filter in jquery</title>
</head>
<body>
    <br /><br />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="pagenation.js"></script>
    <link rel="stylesheet" href="https://tutorialshelper.com/demo/Css/dynamictable.css">
    <div class="container"  style="margin:30px">
        <h1><a href="https://tutorialshelper.com/"> How to implement pagination sorting filter in jquery</a></h1>
       sorting: <select id="maxRowsfortable">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
        </select>
        <div class="clearfix"><br /></div> 
        <div class="tables" id="showData"></div>

    </div>
    
</body>
</html>

this example the HTML table will generate form API dynamically see the given below implemented jquery snippet code for dynamic HTML table

function dynamic_table(url) {
        $.ajax({
            url: url,
            data: {
                format: 'json'
            },
            error: function () {
                $('#info').html('<p>An error has occurred</p>');
            },
            dataType: 'json',
            success: function (data) {
                var col = [];
                window.cols = col;
                for (var i = 0; i < data.length; i++) {
                    for (var key in data[i]) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                }
                col.push("Actons");
                var table = document.createElement("table");
                table.setAttribute('class', 'table blueTable');
                table.setAttribute('id', 'mynewtable');
                var tr = table.insertRow(-1);
                for (var i = 0; i < col.length; i++) {
                    var th = document.createElement("th");
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }
                for (var i = 0; i < data.length; i++) {
                    tr = table.insertRow(-1);
                    for (var j = 0; j < col.length; j++) {
                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML = data[i][col[j]];
                    }
                    var d = data[i].id;
                    tabCell.innerHTML = '<a href="#" onclick="return EditTable(' + data[i].id + ' )">Edit</a> | <a href="#" onclick="DeleteTable(' + data[i].id + ')">Delete</a></td>'
                }
                var divContainer = document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);
            },
            type: 'GET'
        });
    };

the above dynamic_table() function you will call at a page level

$(document).ready(function () {
        dynamic_table("https://jsonplaceholder.typicode.com/posts");
        getPagination('#mynewtable');
    });

the dynamic_table() function can have one overload parameter will accept API

the above test API will return JSON formated data try to run the test API in your browser

try to run your HTML page you will get the dynamic HTML table, follow the below link for Dynamic table from JSON schema

table generation is done right now we will see the How to implement pagination sorting filter in jquery

given below code “maxRowsfortable” is select dropdown id. Add the given below jquery implemented functionality in your HTML page

  function getPagination(table) {
        var lastPage = 1;

        $('#maxRowsfortable').on('change', function (evt) {
            lastPage = 1;
            $('.pagination').find("li").slice(1, -1).remove();
            var trnum = 0;
            var maxRows = parseInt($(this).val());

            if (maxRows == 5000) {

                $('.pagination').hide();
            } else {

                $('.pagination').show();
            }
            var totalRows = $(table + ' tbody tr').length;
            $(table + ' tr:gt(0)').each(function () {
                trnum++;
                if (trnum > maxRows) {

                    $(this).hide();
                } if (trnum <= maxRows) { $(this).show(); }
            });
            if (totalRows > maxRows) {
                var pagenum = Math.ceil(totalRows / maxRows);
                for (var i = 1; i <= pagenum;) {
                    $('.pagination #prev').before('<li data-page="' + i + '">\
                                                  <span>'+ i++ + '<span class="sr-only">(current)</span></span>\
                                                </li>').show();
                }
            }
            $('.pagination [data-page="1"]').addClass('active');
            $('.pagination li').on('click', function (evt) {
                evt.stopImmediatePropagation();
                evt.preventDefault();
                var pageNum = $(this).attr('data-page');
                // get Max Rows from select option dropdowan #maxRowsfortable id is select option dropdowan
                var maxRows = parseInt($('#maxRowsfortable').val());

                if (pageNum == "prev") {
                    if (lastPage == 1) { return; }
                    pageNum = --lastPage;
                }
                if (pageNum == "next") {
                    if (lastPage == ($('.pagination li').length - 2)) { return; }
                    pageNum = ++lastPage;
                }
                lastPage = pageNum;
                var trIndex = 0;
                $('.pagination li').removeClass('active');
                $('.pagination [data-page="' + lastPage + '"]').addClass('active');
                $(table + ' tr:gt(0)').each(function () {
                    trIndex++;
                    if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
                        $(this).hide();
                    } else { $(this).show(); }
                });
            });
        }).val(10).change();
    }

run you HTML page

the final output is:

thanks

Recommend articles:

View Demo

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Nov 28, 2019 in Articles

How to implement pagination sorting filter in jquery

Related Posts: