Test All Gadget

Test All Gadget, Z3X BOX Samsung, Miracle Box, Smart Phone Flash Tool, Stock ROMs, Android Tool, apps, Data Plans Internet

Home » HTML5 » javascript » jquery » programming » table » How to add jQuery pagination to any table in minute?
Jumat, 01 April 2016

How to add jQuery pagination to any table in minute?

By di
How to add jQuery pagination to any table in minute? - discussing about technology is my hobby, with media blogs Test All Gadget we can share the knowledge of technology that continues to grow with various ways of use that is intended to simplify your life, now we will discuss first about that in your search that is How to add jQuery pagination to any table in minute? please refer to our explanation because we will try to make a complete article for you.

Articles : How to add jQuery pagination to any table in minute?
full Link : How to add jQuery pagination to any table in minute?
Article HTML5, Article javascript, Article jquery, Article programming, Article table,

You can also see our article on:


How to add jQuery pagination to any table in minute?

Adding pagination to any table using jquery in minute : Intelligent computing

Pagination is one of most common things we face everywhere, wherever there is no infinite scrolling. Pagination can be achieved server side with php as well, but those is bit slower and require multiple request again and again to site or you need to precisely use ajax, but what if you want simpler solution, that’s going to be great for you and user as well.

What’s my idea?

Instead of downloading list of 10 row per request from server each time user navigate through pages, why not download 100 or even more list once, that will need just moment to download and no additional effort to server, and using pagination hide rest of 90 rows, using client side pagination of tables we can navigate to those 100 records without making much effort, and even if user want more, only in that case we can download further list.

Simple, users don’t have to wait again and again to refresh page, get 10 more data, again refresh, and so on. Instead user will be having lightning access to all 100 record or whatever number you have at once.
So lets get started
What you’ll need.
1.    You have to have jquery Google ajax api, that you can get from here.
2.    Any html/PHP page where you have table, you can deploy this code.

Initiating pagination in table


Proceed as follows to adding pagination in your table.

Adding Google ajax api in your html head section

First of all, you need to add, Google jquery library to initiate this JavaScript. Just navigate to <head> of your site and add

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

Just before closing of your head.

Adding pagination class to your table


First of all, you have to add class “paginated-table” in your table as follows

<table class=”paginated-table”>
.
.
.


Adding navigation below table

You can add following code after just ending or before table tag of same table in which you want pagination.
I am assuming you have bootstrapped and font awesome integrated, if not, no problem, you can leave these classes as it is.


<span class="prev btn btn-rounded btn-light"><i class="fa fa-angle-double-left"></i> Previous</span> <span class="next  btn btn-rounded btn-light"><i class="fa fa-angle-double-right"></i> Next</span>


Adding pagination script

Copy and paste following code and at the ending of your body tag, add this with script tag. You can see a variable to define max row that should display on each segment, you can change this to any number from 1 to less than table value count.


<script>
                                               
                               
                                var maxRows = 5;             // Define per page element count
                                               
 
               
$('.paginated-table').each(function() {
    var cTable = $(this);
    var cRows = cTable.find('tr:gt(0)');
    var cRowCount = cRows.size();
   
    if (cRowCount < maxRows) {
        return;
    }

    cRows.each(function(i) {
        $(this).find('td:first').text(function(j, val) {
           return (i + 1) + " - " + val;
        });
    });

    cRows.filter(':gt(' + (maxRows - 1) + ')').hide();


    var cPrev = cTable.siblings('.prev');
    var cNext = cTable.siblings('.next');

    cPrev.addClass('disabled');

    cPrev.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));
       
        if (cPrev.hasClass('disabled')) {
            return false;
        }
       
        cRows.hide();
        if (cFirstVisible - maxRows - 1 > 0) {
            cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
        } else {
            cRows.filter(':lt(' + cFirstVisible + ')').show();
        }

        if (cFirstVisible - maxRows <= 0) {
            cPrev.addClass('disabled');
        }
       
        cNext.removeClass('disabled');

        return false;
    });

    cNext.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));
       
        if (cNext.hasClass('disabled')) {
            return false;
        }
        
        cRows.hide();
        cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();

        if (cFirstVisible + 2 * maxRows >= cRows.size()) {
            cNext.addClass('disabled');
        }
       
        cPrev.removeClass('disabled');

        return false;
    });

});

                                </script>



jquery table pagination demo : Intelligent computing


You can now see clicking on next and previous navigation, jquery table pagination should navigate through paginated rows.

You can download sample html from
https://github.com/Thedijje/jquery-table-pagination
and see full code and deployment.

If you having any doubt, please leave comment below, or want to add something cool to this code, let us know, we’ll improve.

Please +1,Like, and share this article to anyone who might need this. Have great day



enough already articles How to add jQuery pagination to any table in minute?

hopefully the information How to add jQuery pagination to any table in minute? that we submit on this blog can be useful for your life and all the people who visit this blog.

you just finished reading the article with the title How to add jQuery pagination to any table in minute? if you intend to bookmark or shre please use the link https://testallforone.blogspot.com/2016/04/how-to-add-jquery-pagination-to-any.html and do not visit other pages on this blog because it still sangant a lot of information about gadgets from the old to the latest.

Tag : , , , , ,
Share on Facebook
Share on Twitter
Share on Google+

Related : How to add jQuery pagination to any table in minute?

  • Program To Print Ascii Table in Assembly Language Program To Print Ascii Table in Assembly Language  .MODEL SMALL.STACK 100H.DATAPROMPT DB "The 256 ASCII Characters are ",0AH,"$"nxtline DB 0AH,"$".CODEstart: ...
  • Download C# 2010 For Programmers Fourth Edition by DEITEL DEVELOPER SERIESDownload C# 2010 For Programmers Fourth Edition by DEITEL DEVELOPER SERIESWelcome to Visual C#® 2010, C# 4 and the world of Microsoft® Windows® and Internet and web prog ...
  • HOW TO SIMULATE A BOUNCING BALL USING C++HEllo!!Bouncing ball simulation is really interesting in C++. It uses the header file <graphics.h> for drawing the ball, and here we also use http://testallf ...
  • VS live brain dumpI had a pleasure attending VS live in Orlando between 5-11 December. I particularly enjoyed the small size of the conference in comparison to the bigger ones such as Bui ...
  • How do i begin learning code?Hello people! We Intelligent Computing are about to start a whole new section on Programming but before we start on that I would highly recommend you to read this articl ...

2 komentar:

Langganan: Posting Komentar (Atom)