Table row count in html page

Question

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>

you are generating this html using javascript isnt it ??

ShujatAli
– ShujatAli

2013-10-09 08:13:03 +00:00
Commented Oct 9, 2013 at 8:13 — ShujatAli
– ShujatAli, Commented Oct 9, 2013 at 8:13
yes i m using javascript

Yellow Flash
– Yellow Flash

2013-10-09 08:24:29 +00:00
Commented Oct 9, 2013 at 8:24 — Yellow Flash
– Yellow Flash, Commented Oct 9, 2013 at 8:24
please show us what u had done yet ??

ShujatAli
– ShujatAli

2013-10-09 08:26:53 +00:00
Commented Oct 9, 2013 at 8:26 — ShujatAli
– ShujatAli, Commented Oct 9, 2013 at 8:26

Satpal · Accepted Answer · 2013-10-09 08:15:46Z

3

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

Or using jquery,

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

edited Oct 9, 2013 at 8:15

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Oct 9, 2013 at 8:13

Alex.Zhe.Han

763 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul · Accepted Answer · 2013-10-09 08:25:06Z

2

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

fix the height equal to your 10 records height.
Now append your all 36 records in that and make "overflow:hidden" this will lock your from showing more than 10 records.
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. :)

answered Oct 9, 2013 at 8:25

Rahul

7201 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

Table row count in html page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related