I need to print a document that is generated dynamically, with a list of tables that contains some lists of elements. Some of these lists can have literally pages, other lists can have just one element.
I tried to use the CSS page counter, but this counter doesn't increment when the page breaks. I tried to count elements that repeat each page, even after the break, like H2, but it still doesn't work. I tried to identify some element inside my code and try to count this, but it still doesn't work for me.
<div class="page" style="page-break-after:always">
<div class="row" style="text-align:center">
<h2>Some title</h2>
<h4>Subtitle</h4>
</div>
<div class="row">
<p>
This book contains {{numberPages}} numbered pages.
</p>
</div>
<div class="row">
{{dataPrint.city}}, {{dataPrint.today}}
</div>
</div>
<div class="page">
<div class="row">
<table style="border:0!important;" ng-repeat="item in dataPrint.register">
<thead>
<tr>
<td colspan="8" style="border:0!important">
<h2 style="text-align:center">Title of document</h2>
<h3>{{ item.name }}</h3>
</td>
</tr>
<tr>
<th rowspan="2">Date</th>
<th rowspan="2">Log</th>
<th colspan="3">Move</th>
<th rowspan="2">Stock</th>
<th rowspan="2">Sign</th>
<th rowspan="2">Obs</th>
</tr>
<tr>
<th>Entry</th>
<th>Exit</th>
<th>Loss</th>
</tr>
</thead>
<tbody style="border:0!important">
<tr ng-repeat="register in item.move">
<td>{{ register.date_modify }}</td>
<td>{{ register.log}}</td>
<td>{{ register.entry }}</td>
<td>{{ register.exit}}</td>
<td>{{ register.loss}}</td>
<td>{{ register.stock}}</td>
<td></td>
<td>{{ register.Obs}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8" style="border:0!important">
<div class="footer-space" style="border:0!important" id="page-number">
</div>
</td>
</tr>
</tfoot>
</table>
<div class="footer" id="pageFooter" style="text-align:center;">
</div>
</div>
</div>
<div class="page" style="page-break-before:always">
<div class="row" style="text-align:center">
<h2>Some title</h2>
<h4>Subtitle</h4>
</div>
<div class="row">
<p>
This book contains {{numberPages}} numbered pages.
</p>
</div>
<div class="row">
{{dataPrint.city}}, {{dataPrint.today}}
</div>
</div>
I don't know if it is possible, but anybody have some tip for me?
I am using javascript and angularJS and I can't change the technology.
The page behaves like the list of elements were one page, even when it breaks to print. I tried to count this breaks but I don't know if it is possible.
Thanks a million!
Related
I have a table of rows listing information about classifiers for a policy. The ng-repeat directive displays the rows 2 at a time per classifier, where the second row contains a subtable that is hidden unless the fi-chevron arrow for that row gets clicked. The first row contains basic info about the classifier. The second row contains additional information that only displays if requested. This information is in the form of a subtable listing of rules for that classifier.
For some reason, only when clicking the arrow on the first classifier does the table expand ABOVE the classifier info and not below. All other rows, it expands below as it should. This makes no sense because the HTML below forces the order to be where the classifier info row always is on top of the rules table row.
I am using datatables to display the table.
<table id="classifier-association-table" class="row-border hover info dataTable no-footer"
style="border-top: 2px solid #CCC;">
<thead>
<tr>
<th></th>
<th ng-click="sortAttachedSG('name')">
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_NAME' | translate }}</div>
<div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortName"
class="sort-icon" style="display: block;" ng-show="sgAttachedNameSort">
<span class="fi-chevron"></span>
</div>
</th>
<th ng-click="sortAttachedSG('description')">
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_TYPE' | translate }}</div>
<div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortDesc"
class="sort-icon" style="display: block;" ng-show="sgAttachedDescSort">
<span class="fi-chevron"></span>
</div>
</th>
</tr>
</thead>
<tbody ng-repeat="item in classifierData" data-ng-switch on="attachedRulesCollapse[$index]">
<tr ng-class="getSelectedClass(group)">
<td>
<input type="checkbox" ng-checked="isSelected(item)"
ng-click="checkclick($event,item)" >
<div class="rules-accordion-arrow"
ng-class="attachedRulesCollapse[$index] ? 'sort-ascend' : ''"
ng-click="showRulesForClassifier($index, item, true)" id="showRulesId">
<span class="fi-chevron"></span>
</div>
</td>
<td>
<div class="name-overflow">{{item.name}}</div>
</td>
<td>
<div class="name-overflow">{{item.type}}</div>
</td>
</tr>
<tr data-ng-switch-when="true">
<td colspan="3">
<div class="la-ball-clip-rotate icon-button" ng-show='rulesLoadingFlag'
style="height: 20px;margin-top: -7px; padding-left: 30rem">
<div style="width : 25px;height: 25px;" ng-show="true"></div>
</div>
<div class="table-conainer" id="rulesTable" ng-show="!rulesLoadingFlag">
<table id='rules-table' class="row-border hover info dataTable no-footer">
<thead>
<tr>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL' | translate }}</div>
<div class="sort-icon"><span class="fi-chevron"></span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL_NUMBER' | translate }}
</div>
<div class="sort-icon"><span class="fi-chevron"></span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div class="ng-binding">
{{ 'CLASSIFIER_RULES_SOURCE_IP' | translate }}
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{'CLASSIFIER_RULES_SOURCE_PORT' | translate}}
<span id="portRangeToolTipId"
class="fi-help port-range-tooltip"
tabindex="0"
tooltip-class="vtsTooltip"
tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
translate}}"
tooltip-append-to-body="true"
tooltip-placement="top-right"
tooltip-trigger="mouseenter focus mouseleave blur">
</span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_DESTINATION_IP' | translate }}</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_DESTINATION_PORT' | translate }}
<span id="portRangeToolTipId"
class="fi-help port-range-tooltip"
tabindex="0"
tooltip-class="vtsTooltip"
tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
translate}}"
tooltip-append-to-body="true"
tooltip-placement="top-right"
tooltip-trigger="mouseenter focus mouseleave blur">
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in rules" ng-class="getSelectedClass(rule)">
<td>
<div class="name-overflow" data-x-rule-id={{item['rule-id']}}>
{{item.protocol}}
</div>
</td>
<td class="name-overflow">{{item.protcolnumber}}</td>
<td ng-bind="item['source-ip']" class="name-overflow"></td>
<td class="name-overflow">
<span>{{ item['source-port-range'] }}</span>
</td>
<td ng-bind="item['destination-ip']" class="name-overflow"></td>
<td class="name-overflow">
<span>{{ item['destination-port-range'] }}</span>
</td>
</tr>
<tr ng-show="!rules.length && isEditMode">
<td class="dataTables_empty" colspan="8">
{{'NO_DATA_AVAILABLE_IN_TABLE' | translate}}
</td>
</tr>
<tr ng-show="!isEditMode">
<td class="dataTables_empty" colspan="8">
{{'CLASSIFIER_CREATE_RULES_DISABLED' | translate}}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I suspect this may be an angular issue, but I'm not sure. If you would like more code let me know.
Anyone have any idea why this is happening?
I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->
It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.
I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s
Here's the code:
<tr ng-repeat="param in tags[$index].parameters">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth">List <span class="arrayParamArrow" ng-click="showArrayParams(param)" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span></div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-hide="!arrayCollapsed" ng-repeat="params in arrayParameter">
<td>{{params.name}}</td>
<td class="wordBreak">{{params.value}}</td>
</tr>
What i want is to be able to put second row ng-repeat below specific row in the first ng-repeat, specifically when ng-if=is_array(param) div is shown, because it indicates that there needs to be more sub rows for that one specific row. Thanks
I'm not sure what is the exact structure for your array and how you get params for rows on click. But to render it you should try to use ngRepeatStart and ngRepeatEnd directives.
Something like this (simplified a little for the demo):
<tr ng-repeat-start="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
<tr ng-repeat-end></tr>
From here you should be able to adjust it for your code.
Demo: http://plnkr.co/edit/tW3rUYXqoM9fTNHdOf9K?p=info
UPD: Better solution
Original code contains problem is that ngRepeatEnd tr is repeated for each iteration creating bunch of unnecessary empty tr. Not good.
Below is more more straightforward solution which uses two repeaters: one on tbody and the second on inner tr. Multiple tbodies is perfectly valid and it's even feels good that parameter rows are grouped together with their parent row into the same tbody.
<table class="table table-bordered table-condensed">
<tbody ng-repeat="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<tr>
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-if="is_array(param)" ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
</tbody>
</table>
Demo: http://plnkr.co/edit/0V1hDOpl2wukKFeIZC1O?p=info
I have a table like below. As you can see first <tr> element's class is "success" and second "active" and third is "success"...etc..
Now I want to do this dynamically. But I can't get last <tr> element's classname for add some condition.
How can I do this in JavaScript?
<div id="masterContainer" class="bs-example">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr class="success">
<td><b>First Name</b> <br> som</td>
</tr>
</thead>
<tbody>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="success">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
</tbody>
</table>
</div>
</div>
You can use :last selector:
$('.table tr:last').attr('class');
The querySelectorAll method lets you pass CSS selectors to find nodes you're interested in
var nodes = document.querySelectorAll('div tr'); // all <tr> descendants of <div>s
nodes[nodes.length - 1].className; // "active" // the last of these