I am working on pagination using NgbdPaginationBasic
app.module.ts
import { NgbdPaginationBasic } from './pagination-basic';
I need to create a set of pages in A4 size with Header and Footer visible only in the first two pages. I have applied pagination on the body only
app.html
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
Here is a StackBlitz I created for demonstration. The pagination is working fine on the body but the Header and Footer I want them to be hidden after the 2nd page.
Is there a way to do it or any other tool or thing I can use? All three parts of the page(header,body,footer) should have the same pagination tag.
Just use *ngIf, for ex.:
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2"> <---
<hr/><span> HEADER </span><hr/>...
Your code:
<div>
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2">
<hr/><span> HEADER </span><hr/>
<div class="intro mt-3 ml-3">
<span>John Doe</span>
<br/>
<span>99/123.342 LAT Street</span>
<br/>
<span>Mars Community</span>
<br/>
<span>XYZ Country</span>
<br/>
<span>Ph. 123243423423</span>
<br/>
<br/>
<span class="mt-2">Dear John</span>
<br/>
</div>
</div>
<div style="border: 1px solid red">
<hr/><span style="color : navy">MAIN BODY</span><hr/>
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
</div>
<div style="border :1px solid black;margin-top:3px" *ngIf="page <= 2">
<hr/><span> Footer </span><hr/>
<p><strong>PLEASE READ THIS</strong><p>
<span>THIS IS THE FOOTER. HEADER AND FOOTER TO BE DISPLAYED FOR PAGES 1 and 2 ONLY </span>
</div>
<div>
<ngb-pagination [pageSize]="25" [collectionSize]="100" [(page)]="page" aria-label="Default pagination"></ngb-pagination>
<hr>
Hope it helps!
Related
I have installed a DataTable in my application and it returns back an error saying "DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2".
Now I understand that DataTables structure is meant to be working with < tr >< td >, but I would like to use spans and divs inside as shown in the preview below.
Is there any way how data tables can work on this structure? Or if there's any good alternative which can do the same job?
Thanks.
$('#dt').DataTable();
// COLLAPSE TABLE
$('tr[data-toggle="collapse"]').click(function(){
$('.insert-here').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<div class="table-responsive">
<!-- Table -->
<table class="table" id="dt">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
<td><i class="fas fa-angle-right"></i></td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<tr>
<td class="insert-here coll-bg" colspan="8">
<!-- START OF COMPLETE ACCOUNT SETTINGS -->
<div class="collapse" id="AccountDetails">
<div class="col-12 pl-0 mt-3">
<!-- START OF ACCOUNT SETTINGS -->
<div class="col-4 pl-0 account-details-box float-left">
<h2 class="accounts-heading">Account Settings</h2>
<!-- Account Status -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Status</p>
</div>
<div class="col-md-6 mb-3 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option>Active</option>
<option>Disabled</option>
<option>Deleted</option>
<option>Pending</option>
</select>
</div>
</div>
<!-- Account Manager -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Manager</p>
</div>
<div class="col-md-6 mb-5 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option selected="selected">--</option>
<option>Bilal Khan</option>
<option>Rishabh Saxena</option>
<option>Abhishekh Joshi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Search in your code maybe you have initialized dataTable twice in your code.
You shold have like this code:
$('#example').dataTable( {paging: false} );
Only one Time.
I am dragging and dropping 3 div's(div tag). one div tag contain object tag in side div tag, in that object tag i'm displaying PDF file. when page loads object tag display's PDF file, after drag and drop object tag will not show pdf file, object tag is blank.
HTML CODE
/* Display Box1*/
<div class="parent">
<div class="box child" id="child3">
<div class="box-header">
<h3 class="box-title">Information From Document Archive</h3>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; padding-left: 5px; max-height: 250px;">
<div style="z-index: -999;">
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
</div>
</div>
</div>
</div>
/* Display Box2 */
<div class="row">
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child1">
<div class="box-header">
<h3 class="box-title">Information From AI Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; max-height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 200px;">Field</th>
<th>Value</th>
</tr>
<tr>
<td>Permission Note</td>
<td><span class="text-red">
<asp:Label ID="lblPermissionNote" runat="server" Text="abcd"></asp:Label>
</span></td>
</tr>
<tr>
<td>Customer Comments</td>
<td><span class="text-red">
<asp:Label ID="lblCustomerComments" runat="server" Text="Test comments"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child2">
<div class="box-header">
<h3 class="box-title">Information From Mainframe Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
<tr>
<td>Consignment Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameConsigmentNumber" runat="server" Text="1234556789"></asp:Label>
</span></td>
</tr>
<tr>
<td>Account Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameTntAccountNumber" runat="server" Text="123456"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
JQuery Code
$("document").ready(function () {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function (event, ui) {
if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}
$(this).append($(ui.draggable));
}
});
});
CSS
.parent {
/*float: left;*/
cursor: move;
border: 2px dotted silver;
}
Web Page Before Dragging
Web Page after dragging
Please suggest any solution.
Found solution. Instead of using <object> tag i used <iframe> tag. it worked for me.
Before:
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
Changed To:
<iframe src="file/DRAG.pdf" class="col-sm-12" style="height:300px;" frameborder="0"></iframe>
I have been looking on many different examples how to iterate a table.
If I am using code below for selenium I get exactly what I want.
driver.findElement(By.xpath("//td[contains(.,'Apple Pomace')]"));
though I would like to instead to iterate the code and find the value below:
<td class="ng-binding">Apple Pomace</td>
Notice there are Apple Pomace in two places
See image
there is my table:
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<h3 ng-show="searchQuery" class="page-header page-header-sm"><span translate="TITLE_SEARCH_RESULTS" class="ng-scope">Search Results</span> <span class="label label-default ng-binding" ng-bind-html="searchQuery">Apple Pomace</span></h3>
<h3 ng-show="!searchQuery" class="page-header page-header-sm ng-scope ng-hide" translate="TITLE_ALL_PRODUCTS">All Products</h3>
<div class="alert-info ng-hide" ng-show="confirmation">
<p class="ng-binding"></p>
</div>
<table class="table table-striped table-bordered table-condensed">
<tbody><tr>
<th translate="LABEL_IMAGE" class="ng-scope">Image</th>
<th translate="LABEL_PRODUCT" class="ng-scope">Product</th>
<th translate="LABEL_DESCRIPTION" class="ng-scope">Description</th>
<th translate="LABEL_PRICE" class="ng-scope">Price</th>
<th></th>
</tr>
<!-- ngRepeat: product in products --><tr data-ng-repeat="product in products" class="ng-scope" style="">
<td><img src="/public/images/products/apple_pressings.jpg" class="img-responsive img-thumbnail" style="width: 200px" ng-click="showDetail(product.id)"></td>
<td class="ng-binding">Apple Pomace</td> //here is the item I want to fetch 'Apple Pomace'
<td><div ng-bind-html="product.description" class="ng-binding">Finest pressings of apples. Allergy disclaimer: Might contain traces of worms. Can be sent back to us for recycling.</div></td>
<td class="ng-binding">0.89</td>
<td>
<div class="btn-group">
<a class="btn btn-default btn-xs" ng-click="showDetail(product.id)"><i class="fa fa-eye"></i></a>
<a class="btn btn-default btn-xs ng-hide" ng-click="addToBasket(product.id)" ng-show="isLoggedIn()"><i class="fa fa-cart-plus"></i></a>
</div>
</td>
</tr><!-- end ngRepeat: product in products -->
</tbody></table>
</div>
I hade made following code but it's not correct in my opinion.
element.all(by.css('.ng-binding')).each(function(element, index)
{
element.getText().then(function (text)
{
});
})
notice I got 'Apple Pomace' in two places that's why its important to iterate through the td-class 'ng-binding'.
Could someone help me
Thank you in advance
In case if you want to just access the td you can use this:
element(by.cssContainingText('.table td', 'Apple Pomace'))
In case if you would like to filter the rows in the table by the product and get the element you can use below code snippet:
element.all(by.repeater('product in products')).filter(function(elem, index) {
return elem.element(by.cssContainingText('td', 'Apple Pomace')).isPresent();
}).first();
I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:
https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0
When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
VISUALIZZAZIONE OFFERTE ABITATIVE
<small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
</h2>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
{$sizeOffers = count($offers)}
{if $sizeOffers gt 0}
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
{else}
<div class="alert alert-warning">
Non c'รจ nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
</div>
{/if}
<hr>
<div class="text-center">
Aggiugi un'offerta
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
</div>
</div>
</div>
</div>
</div>
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>
As you can see, offers.tpl is an included file and contains:
<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>
Can you help me?
Create responsive tables by wrapping any .table in .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
I am facing a kind of problem that maybe I can't properly tell you guys about. I am working with a management system where my menu bar is fixed to display the whole page. meaning the menu bar is always showed. But the problem is-->my other page content displayed upon my menu bar,that is occurred.please show this pic below->
look my search box is displaying upon my menu bar. That is happening when I scroll my page.
First my menu bar is inside my body tag. the for selving this problem is took it to the head tag->but still problem is occurring.
code->
<!-- top navigation bar -->
<div style="position: fixed; width: 100%" class="w3-container w3-teal">
<ul class="w3-navbar w3-container">
<li class="w3-right" >Log Out</li>
<li class="w3-right w3-dropdown-hover w3-hover-orange">
<a class="w3-hover-orange" >Options<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
change password
</div>
</li>
<li class="w3-right" >User Profile</li>
<li class="w3-right" >Home</li>
<li class="w3-right" ><button class="w3-btn w3-black" id="sgo">Go</button></li>
<li class="w3-right" ><input type="text" class="w3-input" id="text-search" placeholder="Search.."></li>
</ul>
</div>
<!-- end of top navigation bar -->
and body->
<body class="w3-theme">
<?php include 'pageSideNavigationBar.php'; ?>
<section class="w3-row-padding w3-theme" style="margin-left:165px;" id="main-content">
<div id="guts">
<a style=" margin-left: 88%;width: 11%;border-radius: 2px;" class="w3-btn-block w3-green w3-section w3-padding" onclick="$('#addABatch').show()">Add A Batch</a><br>
<!-- TABLE TO SHOW THE DATA -->
<div class="w3-container">
<p>Available Batch details....</p>
<table id="myTable" class="display" data-page-length="25" data-order="[[ 1, "asc" ]]" width="100%">
<thead>
<tr>
<th>Batch Code</th>
<th>Course Name</th>
<th data-orderable="false">Batch Starting Date</th>
<th>Faculty Name</th>
<th>Room Number</th>
<th>Amount</th>
<th>Routine</th>
<th>Delete Batch</th>
</tr>
</thead>
<tbody>
and closing tags. sorry can't give full code->>>>
what is the problem. why this is happening.....
add this to your navbar style
z-index: 99999;
it should work