Print every record of loop in a separate page in ajax success

Question

How to print every record of loop in a separate page, While getting data through ajax and PHP in array. i.e I want row1 data in every page, And row2 data every record in a separate page. Trying the following script, not giving the desired result.

var response = {
row1: [{group: 'Group A'}],
  row2: [
    {team: 'Team A', player: 'Jema', result: 43},
    {team: 'Team B', player: 'Deno', result: 34},
    {team: 'Team B', player: 'Niob', result: 56},
    {team: 'Team B', player: 'Skion', result: 49},
  ],
};

        $("#group").html(response.row1.group);

        var cats = {};
        response.row2.forEach(function(element) {
            cats[element.team] = cats[element.team] || [];
            cats[element.team].push(element);
        });

        Object.keys(cats).forEach(function(team) {
            let html = '';
            html = '<tr>';
            html += '<td>' + team + '</td>';
            html += '</tr>';
            $('table').append(html);

            // Loop through the results for this category
            cats[team].forEach(function(element) {
                var names = element.player;
                var result = element.result;

                html = '<tr>';
                html += '<td>' + names + '</td>';
                html += '<td><input type="text" value="' + result + '"></td>';
                html += '</tr>';
                $('table').append(html);
            });

            // Append the textarea at the end of the results
            html = '<tr>';
            html += '<td><textarea placeholder="textarea..."></textarea></td>';
            html += '</tr>';
            $('table').append(html);
        });
       var PrintThis = document.getElementById('print');
    var PrintStyle = '<style type="text/css">' + 
         '@media print{' +
         '.Break { page-break-after: always }' +
         '}' +
         '</style>';
    PrintStyle += PrintThis.innerHTML;
    myWin = window.open("");
    myWin.document.write(PrintStyle);
    myWin.print();
    myWin.close();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="print">
<h1 id="group">
</h1>
   <table class="table bordered">
   <thead>
     <th>Name</th>
     <th>Result</th>
   </thead>
   <tbody>
     
   </tbody>
   </table>
 </div>

JSFIDDLE of current output

Emeeus · Accepted Answer · 2018-09-05T13:35:37.270

3

See this example https://jsfiddle.net/qa9wcuft/ there is a break made in a div. It works at least in chrome Version 64.0.3282.167 and Firefox V 61.0.1. The problem is this: https://jsfiddle.net/rz3896se/ it works in firefox but not in chrome. It seems that chrome does not break tables. So my recommendation is to do different tables and put a div in the middle with a break, like this https://jsfiddle.net/8L201zvw/.

Also you are adding this: .Break { page-break-after: always } (.break is better) which is correct to separate pages, but you don't have any element with that class. My suggestion is that you should add class="break" (both in lowercase is better) in the last element you want in the page, in this case, I think is this:

 html = '<tr class="break">';
 html += '<td><textarea placeholder="textarea..."></textarea></td>';
 html += '</tr>';

This does not work in chrome. My suggestion:

edited Sep 05 '18 at 13:35

answered Sep 04 '18 at 19:00

Emeeus

5,072
2
25
37

tried this, not working, can you update it in jsfiddle? – SamDasti Sep 04 '18 at 19:12
this is the update with your suggestion https://jsfiddle.net/v5gbfmtc/31/ . – SamDasti Sep 04 '18 at 19:18
I have tried this, still problem. I am using Chrome, And its my default browser. My project is offline and its depended on chrome. – SamDasti Sep 05 '18 at 03:53
Actually I want every record of the loop ( Team ) to be printed in a separate page as I have mentioned in the question, i.e `Team A` on first page and `Team B` on second page. I have tried this `$("#print").append("
");` inside the loop but its printing second page empty. I want to separate teams (Team A, Team B) as mentioned before, thanks.https://jsfiddle.net/qa9wcuft/7/ – SamDasti Sep 05 '18 at 04:00
@SamDasti I've rewritten the whole code and works in both browsers see this https://jsfiddle.net/8L201zvw/ – Emeeus Sep 05 '18 at 13:36
hy @Emeeus Sorry for bother you again, I made some changes to your answered script according to my need https://jsfiddle.net/8L201zvw/15/, I want row1 data to be printed in every page in heading, but with this Its not printing Heading its only getting row2 data in the next page. I appreciate your extra time. thanks. – SamDasti Sep 06 '18 at 15:18
@SamDasti Hi, as I see you have one table in that example, so we can't break the table, but see this https://jsfiddle.net/3dcmr8uj/ and see this https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document the issue is that there is no html feature to make headers or footers using print media queries, so we have to make up one. If you want to do more complex things with printing you could try https://wkhtmltopdf.org/ – Emeeus Sep 06 '18 at 16:03
one more thing if you could help on it also, i want to fetch `note` to to the `textarea` at the end,1 `note` per team, I tried but not working.https://jsfiddle.net/3dcmr8uj/5/. – SamDasti Sep 07 '18 at 13:25
@SamDasti You should change a little the structure https://jsfiddle.net/Lbzrj0wg/ but you are showing one result of multiple. – Emeeus Sep 07 '18 at 13:40

Print every record of loop in a separate page in ajax success

1 Answers1