Table displaying count of data with conditions AngluarJS - html

I am trying to create a table like below:
Number of days Count
Over 3 days 3
Over 20 days 4
Over 30 days 5
So I get back a total count of things open over 3 days etc.
Problem 1: If i use Ng-repeat i cannot specify my row titles (i.e column 1)
Problem 2: My data is not pulling through
Please find a snippet of my code below:
My Controller :
$scope.requests = requests;
function daysBetween(modifiedDate) {
var currentDate = new Date();
modifiedDate = new Date(modifiedDate);
return UtilityFactory.getNumberOfDaysBetween(currentDate, modifiedDate);
}
$scope.numberOfDaysSince = function(modifiedDate) {
var days = daysBetween(modifiedDate);
if(days === 1) {
return '(1 day)';
} else {
return '(' + days + ' days)';
}
};
My index.html
<table class="table table-condensed" st-safe-src="requests" st-table="requestsCollection">
<thead>
<tr>
<th>Number Of days</th>
<th>Total Count</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="request in requestsCollection ">
<td>Over 3 days</td>
<td>column 2
<span ng-repeat="requestCollection in requestsColl| filter: numberOfDaysSince(ticket.Modified) > 3">
{{requestsColl.length}}
</span>
{{requestsColl.length}}
</span>
</td>
<td>Over 20 days</td>
<td>
<span ng-repeat="requestCollection in requestsColl| filter: numberOfDaysSince(ticket.Modified) > 20">
{{requestsColl.length}}
</span>
</td>
<td>Over 30 days</td>
<td>
<span ng-repeat="requestCollection in requestsColl| filter: numberOfDaysSince(ticket.Modified) > 30">
{{requestsColl.length}}
</span>
</td>
<td>Total</td>
<td>
{{requestsCollection.length}}
</td>
<td></td>
</tr>
</tbody>
</table>

Related

ng class is not applied in this condition

I have 3 loops
1-getting the name of the week day
2-getting the number of the day
1 and 2 came from js function.
JavaScript
var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
$scope.rangetxt = [];
var d1 = new Date(fromdate);
while (d1 <= new Date(todate)) {
//alert(DAYS[d.getDay()]);
$scope.rangetxt.push({ Day: DAYS[d1.getDay()] });
//console.log($scope.rangetxt);
d1 = new Date(d1.getTime() + (24 * 60 * 60 * 1000));
}
$scope.dateArray = [];
var currentDate = moment(fromdate);
var stopDate = moment(todate);
while (currentDate <= stopDate) {
$scope.dateArray.push({ Day: moment(currentDate).format('DD') })
currentDate = moment(currentDate).add(1, 'days');
}
HTML
<td class="employeedata">
<table class="table table-bordered table-hover myTable" style="font-size: 10px;" id="table2">
<thead>
<tr>
<th rowspan="3">Type</th>
</tr>
<tr>
<!--<th rowspan="2">Type</th>-->
<th ng-repeat="r in rangetxt">{{r.Day}}</th>
<!--<th rowspan="3"></th>-->
</tr>
<tr>
<th ng-repeat="dt in dateArray">{{dt.Day}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="df in duration | filter : du.StaffKey | limitTo:3 ">
<td>{{df.TypeTransDesc}}</td>
<td ng-repeat="x in dateArray " >
<span ng-repeat="(key,value) in df" ng-if="key=='D'+x.Day" **ng-class="{{df.['C'+x.Day]}}">**
{{value}}
</span>
</td>
</tr>
</tbody>
</table>
</td>
I am successfully show the data inside its cell but i cant apply the class,
i have 6 classes , i want to apply them based on a condition
don't know why and how
any idea, Thanks in advance
You can get the class name from the controller, create a function on the controller and call it from the html:
html:
ng-class="getDfClass(df, x.day)"
and in the controller:
getDfClass(df, day) {
return df['C'+day];
}
this assumes that the result of df['C'+x.Day] is a string with the name of the class you want to apply to the span

Print Headers on each page Print.CSS

I have a view that takes a List of objects.
So for example, if I had a List of people.. put in order by where they were located and the division they were in like so:
| ID | Name | Location | Division | Age |
--------------------------------------------------------------
1 John Building1 Finance 25
2 Alex Building1 Finance 30
3 Chris Building2 ISS 22
4 Justin Building1 Human Resources 41
5 Mary Building2 Accounting 43
6 Ian Building1 Human Resources 27
7 John Building1 Finance 35
So my action return statement looks like this:
lstOfPersonnel = lstOfPersonnel.OrderBy(x => x.Location).ThenBy(x => x.Division).ThenBy(x => x.Name).ToList();
return View(lstOfPersonnel);
In my View I have this:
<table class="table table-bordered no-border">
#foreach (var item in Model)
{
if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division))))
{
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
</tbody>
}
else
{
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
</tbody>
}
}
</table>
Now, when I print preview this, it puts everybody that is in the same building and division under their respective header. However, the very first <thead> element.. lets say for this example would be Building1 and Finance due to the .OrderBy.... is shown on every page over top of the next Building.
So for a visual this is what it looks like when I print preview:
Page 1:
// Perfect Render
Building1 | Finance
Name | Age
Alex 30
John 35
John 25
Page 2:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building1 | Human Resources
Name | Age
Ian 27
Justin 41
Page 3:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building2 | Accounting
Name | Age
Mary 43
Page 4:
// Repeat of Page 1's headers
Building1 | Finance
Name | Age
Building2 | ISS
Name | Age
Chris 43
Try creating the table inside the for-loop, so that the loop creates a new table on every loop, instead of just the head and body. So I think this is happening:
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
<thead>
...
</thead>
<tbody>
...
</tbody>
instead of this
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
So what is happening is that you only have 1 table, and it is printing each head inside of that table at the top of each page, because the table is going over to the next page. With multiple tables, it only contains on head, so that head will print on top of a new page every time that table floats over to the next page.
You can then just do your if before every tbody because it looks like the head stays the same in every table.
Maybe try this:
#foreach (var item in Model){
<table class="table table-bordered no-border">
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division)))){
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
}
else{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
}
</tbody>
</table>
}
Multiple thead in a single table is probably not viable. That said you will have to create a new table per thead that you wish to create.
To accomplish this in one loop would look something like this:
var lastBuilding = null, lastDivision = null;
foreach(var item in Model) {
if(!item.Building.Equals(lastBuilding) || !item.Division.Equals(lastDivision)) {
if(lastBuilding != null && lastDivision != null) {
</tbody></table>
}
<table>
<thead>
<tr>
<th><b>#item.Building</b></th>
<th><b>#item.Division</b></th>
</tr>
<tr class="no-display"></tr>
<tr>
<th>Name</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody>
}
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
lastBuilding = item.Building;
lastDivision = item.Division;
}
The key to the logic here is:
1. Each item ultimately equates to a row in a table so the item outputs each iteration. The rest is just checking for whether or not a new table should be started (and the last one ended).
2. Setting lastBuilding and lastDivision to null for the first iteration avoids the first table being ended immediately.

HTML Table with 5 rows and 5 columns [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
How do I create an HTML table with 5 rows and 5 columns?
I tried the following arrangement
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
But I only get 5 columns and 3 rows. Please help
Thanks, is there an easier way than just writing 5 lines each?
TL;DR: You only provided 3 <tr> markups, so you only got 3 rows.
In HTML, tables have the following basic structure1:
table
|- row_1
| |- data_1
| `- data_2
|- row_2
| |- ...
...
1 - Other markups exist such as th, thead, etc. but for clarity's sake I'm ignoring them. More info here. (MDN Table element)
You first declare the table with the <table> markup, and then the rows with the <tr> markup. (table row.)
Inside each row, you can declare the data containers <td>. (table data).
Here's a snippet of HTML code to create a table with 5 columns and 5 rows:
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>row_1/col_1</td>
<td>col_2</td>
<td>col_3</td>
<td>col_4</td>
<td>col_5</td>
</tr>
<tr>
<td>row_2</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>row_3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>row_4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>row_5</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<tr> is short for table row. You only have 3, so you'll only get 3 rows and not 5. Add 2 more rows.
Edit: Added some javascript.
let table = document.getElementById("table");
//fake data
const contentList = [
//row1
[{title: "title"},{title: "title"},{title: "title"}],
//row2
[{title: "title"},{title: "title"},{title: "title"}],
//row3
[{title: "title"},{title: "title"},{title: "title"}]
];
//function to generate a row.
const rowTemplate = (data, rowNumber) =>{
let rowString = "<tr>";
data.forEach((td, index)=>{
rowString += `<td>${td.title}, row: ${rowNumber}, column: ${index}</td>`;
});
rowString += "</tr>"
return rowString;
};
//function to generate all the rows
const generateRows = (data, elementToPopulate) => {
let htmlString = "";
data.forEach((row,index)=>{
htmlString += rowTemplate(row, index);
});
elementToPopulate.innerHTML = htmlString;
}
//call method
generateRows(contentList, table);
<table width="100%" border="1" id="table">
</table>

Max Count Query

This is my table and the table name is "ad_publisher_details". I want to find the maximum publisher company name means the company name who has most number of rows. Can anyone help?
Table:-
<table>
<thead>
<th>
ad_id
</th>
<th>
publisher_name
</th>
<th>
publisher_company
</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
bikroy manager
</td>
<td>
bikroy.com
</td>
</tr>
<tr>
<td>
2
</td>
<td>
olx manager
</td>
<td>
olx.com
</td>
</tr>
<tr>
<td>
3
</td>
<td>
microsoft manager
</td>
<td>
microsoft bangladesh
</td>
</tr>
<tr>
<td>
4
</td>
<td>
microsoft manager
</td>
<td>
microsoft bangladesh
</td>
</tr>
<tr>
<td>
5
</td>
<td>
marketing manager
</td>
<td>
land rover
</td>
</tr>
</tbody>
</table>
After SQL query it will return only the publisher_company value "Microsoft Bangladesh". As it has the most row.
You should:
GROUP BY publisher
ORDER BY number of rows, in descending order.
LIMIT the results to single row.
In other words you can do:
SELECT publisher_company
FROM ad_publisher_details
GROUP BY publisher_company
ORDER BY COUNT(*) DESC
LIMIT 1;
And at last i found the solution. I have to do a lot more php code to do so. Here is my solution.
<?php
$i=0;
$j=0;
$br_temp=0;
$query1="SELECT publisher_company FROM ad_publisher_details WHERE 1";
$result1=mysql_query($query1,$dbs);
while($row1=mysql_fetch_array($result1))
{
$publisher_company[$i]=$row1['publisher_company'];
$i++;
}
for($i=0;$i<count($publisher_company);$i++)
{
$temp2= $publisher_company[$i];
$query2="SELECT COUNT(ad_id) AS count_ad FROM ad_publisher_details WHERE publisher_company='$temp2'";
$result2=mysql_query($query2,$dbs);
while($row2=mysql_fetch_array($result2))
{
$most_ad[$j]=$row2['count_ad'];
$j++;
}
}
$highest_ad = max($most_ad);
for($i=0;$i<count($publisher_company);$i++)
{
$i_temp = $publisher_company[$i];
$query3="SELECT COUNT(ad_id) AS match_ad FROM ad_publisher_details WHERE publisher_company='$i_temp'";
$result3=mysql_query($query3,$dbs);
while($row3=mysql_fetch_array($result3))
{
if($highest_ad==$row3['match_ad'])
{
echo $i_temp;
$br_temp=1;
break;
}
if($br_temp==1)
{
break;
}
}
if($br_temp==1)
{
break;
}
}
?>

Parse html table using Nokogiri and Mechanize

Using the following code I am trying to scrape a call log from our phone provider's web application to enter the info into my Ruby on Rails application.
desc "Import incoming calls"
task :fetch_incomingcalls => :environment do
# Logs into manage.phoneprovider.co.uk and retrieved list of incoming calls.
require 'rubygems'
require 'mechanize'
require 'logger'
# Create a new mechanize object
agent = Mechanize.new { |a| a.log = Logger.new(STDERR) }
# Load the Phone Provider website
page = agent.get("https://manage.phoneprovider.co.uk/login")
# Select the first form
form = agent.page.forms.first
form.username = 'username
form.password = 'password
# Submit the form
page = form.submit form.buttons.first
# Click on link called Call Logs
page = agent.page.link_with(:text => "Call Logs").click
# Click on link called Incoming Calls
page = agent.page.link_with(:text => "Incoming Calls").click
# Prints out table rows
# puts doc.css('table > tr')
# Print out the body as a test
# puts page.body
end
As you can see from the last five lines, I have tested that the 'puts page.body' works successfully and the above code works. It successfully logs in and then navigates to Call Logs followed by Incoming Calls.The incoming call table looks like this:
| Timestamp | Source | Destination | Duration |
| 03 Jan 13:40 | 12345678 | 12345679 | 00:01:01 |
| 03 Jan 13:40 | 12345678 | 12345679 | 00:01:01 |
| 03 Jan 13:40 | 12345678 | 12345679 | 00:01:01 |
| 03 Jan 13:40 | 12345678 | 12345679 | 00:01:01 |
Which is generated from the following code:
<thead>
<tr>
<td>Timestamp</td>
<td>Source</td>
<td>Destination</td>
<td>Duration</td>
<td>Cost</td>
<td class='centre'>Recording</td>
</tr>
</thead>
<tbody>
<tr class='o'>
<tr>
<td>03 Jan 13:40</td>
<td>12345678</td>
<td>12345679</td>
<td>00:01:14</td>
<td></td>
<td class='opt recording'>
</td>
</tr>
</tr>
<tr class='e'>
<tr>
<td>30 Dec 20:31</td>
<td>12345678</td>
<td>12345679</td>
<td>00:02:52</td>
<td></td>
<td class='opt recording'>
</td>
</tr>
</tr>
<tr class='o'>
<tr>
<td>24 Dec 00:03</td>
<td>12345678</td>
<td>12345679</td>
<td>00:00:09</td>
<td></td>
<td class='opt recording'>
</td>
</tr>
</tr>
<tr class='e'>
<tr>
<td>23 Dec 14:56</td>
<td>12345678</td>
<td>12345679</td>
<td>00:00:07</td>
<td></td>
<td class='opt recording'>
</td>
</tr>
</tr>
<tr class='o'>
<tr>
<td>21 Dec 13:26</td>
<td>07793770851</td>
<td>12345679</td>
<td>00:00:26</td>
<td></td>
<td class='opt recording'>
</td>
</tr>
</tr>
I'm trying to work out how to selects just the cells I want (Timestamp, Source, Destination and Duration) and output those. I can then worry about outputting them to the database rather than in Terminal.
I have tried using Selector Gadget but it just show either 'td' or 'tr:nth-child(6) td , tr:nth-child(2) td' if I select multiple.
Any help or pointers would be appreciated!
There is a pattern in the table that is easy to leverage using XPath. The <tr> tag of rows with the required information lack the class attribute. Fortunately, XPath provides some simple logical operations including not(). This provides just the functionality we need.
Once we've reduced the number of rows we're dealing with, we can iterate over the rows and extract the text of the necessary columns by using XPath's element[n] selector. One important note here is that XPath counts elements starting from 1, so the first column of a table row would be td[1].
Example code using Nokogiri (and specs):
require "rspec"
require "nokogiri"
HTML = <<HTML
<table>
<thead>
<tr>
<td>
Timestamp
</td>
<td>
Source
</td>
<td>
Destination
</td>
<td>
Duration
</td>
<td>
Cost
</td>
<td class='centre'>
Recording
</td>
</tr>
</thead>
<tbody>
<tr class='o'>
<td></td>
</tr>
<tr>
<td>
03 Jan 13:40
</td>
<td>
12345678
</td>
<td>
12345679
</td>
<td>
00:01:14
</td>
<td></td>
<td class='opt recording'></td>
</tr>
<tr class='e'>
<td></td>
</tr>
<tr>
<td>
30 Dec 20:31
</td>
<td>
12345678
</td>
<td>
12345679
</td>
<td>
00:02:52
</td>
<td></td>
<td class='opt recording'></td>
</tr>
<tr class='o'>
<td></td>
</tr>
<tr>
<td>
24 Dec 00:03
</td>
<td>
12345678
</td>
<td>
12345679
</td>
<td>
00:00:09
</td>
<td></td>
<td class='opt recording'></td>
</tr>
<tr class='e'>
<td></td>
</tr>
<tr>
<td>
23 Dec 14:56
</td>
<td>
12345678
</td>
<td>
12345679
</td>
<td>
00:00:07
</td>
<td></td>
<td class='opt recording'></td>
</tr>
<tr class='o'>
<td></td>
</tr>
<tr>
<td>
21 Dec 13:26
</td>
<td>
07793770851
</td>
<td>
12345679
</td>
<td>
00:00:26
</td>
<td></td>
<td class='opt recording'></td>
</tr>
</tbody>
</table>
HTML
class TableExtractor
def extract_data html
Nokogiri::HTML(html).xpath("//table/tbody/tr[not(#class)]").collect do |row|
timestamp = row.at("td[1]").text.strip
source = row.at("td[2]").text.strip
destination = row.at("td[3]").text.strip
duration = row.at("td[4]").text.strip
{:timestamp => timestamp, :source => source, :destination => destination, :duration => duration}
end
end
end
describe TableExtractor do
before(:all) do
#html = HTML
end
it "should extract the timestamp properly" do
subject.extract_data(#html)[0][:timestamp].should eq "03 Jan 13:40"
end
it "should extract the source properly" do
subject.extract_data(#html)[0][:source].should eq "12345678"
end
it "should extract the destination properly" do
subject.extract_data(#html)[0][:destination].should eq "12345679"
end
it "should extract the duration properly" do
subject.extract_data(#html)[0][:duration].should eq "00:01:14"
end
it "should extract all informational rows" do
subject.extract_data(#html).count.should eq 5
end
end
Your answer lies in this railscasts
http://railscasts.com/episodes/190-screen-scraping-with-nokogiri
This too can help
How do I parse an HTML table with Nokogiri?
You should be able to reach the exact node you required from the root (worst case) using XPath selectors. Using XPath with Nokogiri is listed here.
For detail on how reach all your elements using XPath, look here.