CODEWITHSUNDEEP
javascriptjquerycsshtml-table
Yellow Flash
Yellow Flash

Reputation: 872

Table row count in html page

In my page, for first time I will show only 10 records out of 36, if viewer click next button it shows next 10 records out of 36.

My problem is table row count on table footer

I don't know how to count table row on changing (meaning when we click next button it should say "showing 10 to 20 of 36 records".

My output:

enter image description here

Expected outputs:

enter image description here

after clicking next button: enter image description here

Sample code: 

<tfoot>
    <c:choose>
        <c:when test="${empty model}">
            <tr>
                <td align="left" colspan="11" style="color: orange; font-size: 12pt;">No records
                    found!</td>
            </tr>
        </c:when>
        <c:otherwise>
            <tr>
                <td align="left" colspan="11" style="color: orange; font-size: 10pt;">Showing 1 to
                    ${stlRec} of ${ttlRec} entries
            </tr>
        </c:otherwise>
    </c:choose>
</tfoot>

Upvotes: 1

Views: 729

Answers (2)

Rahul
Rahul

Reputation: 710

The solution is very simple but you have to do some work.

  1. fix the height equal to your 10 records height.
  2. Now append your all 36 records in that and make "overflow:hidden" this will lock your from showing more than 10 records.
  3. now provide one button to see the more records, when user clicks on it make that scrollTop(100) , this will move 100 px down and if you want to move up just give -100 but in place of 100 provide height of

i am 100% sure that this trick will solve your problem, because 3 days earlier i had done the same thing ha ha ....so enjoy, thanks. :)

Upvotes: 2

Alex.Zhe.Han
Alex.Zhe.Han

Reputation: 76

You can use datatables, It will satisfy all your queries and has much more extras.

Or using jquery,

var row = $('#myTable tr').length;

Upvotes: 3

Related Questions