Question

I’m working on a webpage where it gets its data from a SQL database. And I want to break the records so that when it reaches the third row, it will break to another page.
I have a javacript in order for it to break page. However, this records are displayed in a table. And I don’t know how to place in the code. Any suggestion?
Thanks.

<style>div.break {page-break-before:always}</style>

Sub DisplayRecords()
    Do until registerRS.eof
        counter=counter+1
        if counter=41 then
            counter=0
            counter=counter+1
        end if
        r = r + 1
        If r = 1 then
            Response.write "<tr>"
        End if
        %>
    <td>
    <%=registerRS.Fields("SchoolId")%> <br />
    Class: <%=registerRS.Fields("class")%><br />
    </td>   
        <%
        If r = 2 then
            Response.write "</tr>"
        End if

        If r = 3 then r = 1
        registerRS.movenext
    loop
    registerRS.close
    set registerRS=nothing 
End sub

Answer 1

You should be able to apply that style to a table row. From looking at your code I’m assuming you want to display 3 records per row, with a page break every three rows. If so you can do the following:

CSS

tr.break {page-break-before:always;}

ASP

Sub DisplayRecords()
    rowCount = 0
    Do until registerRS.eof
    counter=counter+1
    if counter=41 then
    counter=0
    counter=counter+1
    end if
    r = r + 1
    If r = 1 then
       if rowCount < 3 then
          Response.write "<tr>"
          rowCount = rowCount + 1
       else
          Response.write "<tr class='break'>"
          rowCount = 0
    End if
    %>
<td>
<%=registerRS.Fields("SchoolId")%> <br />
Class: <%=registerRS.Fields("class")%><br />                    
</td>         


    <%
    If r = 2 then
            Response.write "</tr>"
        End if

        If r = 3 then r = 1
    registerRS.movenext
    loop
    registerRS.close
    set registerRS=nothing 
    End sub
    %>

This fiddle shows the code in action. Print this page to see the page break in action.

However

The most elegant way to do this is to use the CSS3 nth Child Selector. The downside is lack of browser support from older browsers and IE.

You would use something like:

tr:nth-child(3n +4) {page-break-before:always;}
/*3n says select every third row with + 4 being the row to start from*/

See this fiddle and print preview this one