Insert an empty line tr at each size range of an html table (with Javascript)

Navigation
3

I have an HTML page that works as a report page.

It has a table that is fed by the database, however when there are many rows in the query then the HTML table gets too large. It turns out that because of this, if I try to print the page, the last line of the table at the bottom of the page will be "food" by dividing the paper.

I would like to allow javascript to create empty rows at each height interval of the table.

For example, I could specify that every 500 pixels in height in the table, javascript should insert an empty line.

However, I do not know how to deploy this.

Any suggestions?

Attempts ... 

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $(this).style.pageBreakBefore="always";
                        altura = 0;
                    }
                });
            });
        </script>

        <style>
            @media print {
                tr.page-break  { 
                    display: block;
                    page-break-before: always; 
                }
            }   
        </style>
    </head>

    <body>

        <table id='tabela' border=1px;>
            <tr><td>Linha1</td></tr>
            <tr><td>Linha2</td></tr>
            <tr class='page-break'><td>Linha3</td></tr>
            <tr><td>Linha4</td></tr>
            <tr><td>Linha5</td></tr>
            <tr><td>Linha6</td></tr>
            <tr><td>Linha7</td></tr>
            <tr><td>Linha8</td></tr>
            <tr><td>Linha9</td></tr>
            <tr><td>Linha10</td></tr>
            <tr><td>Linha11</td></tr>
            <tr><td>Linha12</td></tr>
            <tr><td>Linha13</td></tr>
            <tr><td>Linha14</td></tr>
            <tr><td>Linha15</td></tr>
            <tr><td>Linha16</td></tr>
            <tr><td>Linha17</td></tr>
            <tr><td>Linha18</td></tr>
            <tr><td>Linha19</td></tr>
            <tr><td>Linha20</td></tr>
            <tr><td>Linha21</td></tr>
            <tr><td>Linha22</td></tr>
            <tr><td>Linha23</td></tr>
            <tr><td>Linha24</td></tr>
            <tr><td>Linha25</td></tr>
            <tr><td>Linha26</td></tr>
            <tr><td>Linha27</td></tr>
            <tr><td>Linha28</td></tr>
            <tr><td>Linha29</td></tr>
            <tr><td>Linha30</td></tr>
            <tr><td>Linha31</td></tr>
            <tr><td>Linha32</td></tr>
            <tr><td>Linha33</td></tr>
            <tr><td>Linha34</td></tr>
            <tr><td>Linha35</td></tr>
            <tr><td>Linha36</td></tr>
            <tr><td>Linha37</td></tr>
        </table>

    </body>
</html>

E ... 

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('td').click(function () {
                    var indice = $(this).index() + 1;
                    $('tr').each(function (index, element) {
                        $(this).children('td:nth-child(' + indice + ')').toggleClass('no-print');
                    });
                });

                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
                        altura = 0;
                    }
                });

            });
        </script>

        <style>
            .no-print {
                opacity:.5;
            }
            @media print {
                .no-print {
                    display:none;
                }
            }
        </style>

    </head>

    <body>
        <table id="tabela">
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
        </table>
    </body>
</html>
    
asked by anonymous 14.08.2014 / 18:04

3 answers

6

You can do with jquery, as in the example below:

jsfiddle: link 

var altura = 0;
$('#tabela tr').each(function(index, element){
    altura += $(this).height();
    if (altura > 100) {
        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
        altura = 0;
    }
});

Also check for a solution with the CSS properties page-break-inside , page-break-after and page-break-before , I think they are more appropriate:

Ex: 

  table { page-break-inside:auto }
   tr   { page-break-inside:avoid; page-break-after:auto }
    
14.08.2014 / 20:08
1

um, and if so on js (jquery use) you take the test 

LOOP PRINCIPAL {
    while( $('table').height() < 500 ) {
        executa o codigo VB que deve conter um loop imprimindo cada linha da tabela
    }
    imprime a linha vazia

}END LOOP PRINCIPAL
    
14.08.2014 / 18:10
1

In HTML code creation you do not have control at first the size of the rows in your table. What you need to do is for each line (individually or using a global CSS style) to set its height: 

<table class='relatorio'>
    <tr>...</tr>
    <tr>...</tr>
</table>

And in CSS: 

.relatorio tr { height: 20px; }

With this you now know, at the time the table is being generated, what the size of each row is. With this you can keep a counter that stores the total size of the table, and when the size reaches a certain threshold, you can insert the page break.

A detail that you have to pay attention to: CSS can define exactly the size of the lines on the screen, but different browsers can change the measurement a bit, so adding a blank line may not be the best solution. / second page may even be fine, but small errors can accumulate and cause problems on subsequent pages). A better solution would be to close the table and start a new table on the next page. Or use a reporting tool of your own.

    
14.08.2014 / 20:08
Doubt as to the structure of a use case Generate CSV with side-by-side results in PHP