I'm using django to list the number of cars sold in a particular dealership. (assuming there are only red and blue cars)
I have designed the query in such a way that we could visualise cars at a monthly or weekly or yearly level. so the data in the table in going to be changing , so I have written the following javascript code to read the table that will be generated everytime . I have also used pagination to include only 10 in a page.
The code just reads what is available on the first page and returns 10 every single time whereas I need it to consider all the pages . Can someone help
<script>
function counter(){
var j = 6; //j=6 is the column id for colour in my table , so I'm, directly using it
var total = 0;
var red= 0;
var blue= 0;
var table = document.getElementById("datatable");
for (var i = 1, row; row = table.rows[i]; i++)
{
var Row = document.getElementById("datatable").rows[i].cells[j].innerHTML;
var colour = document.getElementById("datatable").rows[i].cells[j].innerHTML;
//alert(document.getElementById("datatable").rows[i].cells[j].innerHTML);
if (colour == "red")
{
red= red+ 1;
}
else if (colour== "blue")
{
blue= blue+ 1;
}
total = red+ blue;
}
document.getElementById("total_count").innerText = total;
document.getElementById("red_count").innerText = red;
document.getElementById("blue_count").innerText = blue;
}
</script>
HTML to the table
<div class="menu">
<table cellpadding="0" id="datatable" style="margin-top: 20px" style="margin-bottom:20px" class="table" >
<thead>
<tr class="text-light bg-dark">
<th class="text-center" >Date</th>
<th class="text-center" >Model</th>
<th class="text-center" >CustomerName</th>
<th class="text-center" >Mobile</th>
<th class="text-center" >Adress</th>
<th class="text-center" >Delivery</th>
<th class="text-center" >Colour</th>
</tr>
</thead>
<tbody>
{% for obj in filter.qs %}
<tr>
<td class="text-center" >{{ obj.Date}}</td>
<td class="text-center" >{{ obj.Model}}</td>
<td class="text-center" >{{ obj.CustomerName}}</td>
<td class="text-center" >{{ obj.Mobile}}</td>
<td class="text-center" >{{ obj.Address}}</td>
<td class="text-center" >{{ obj.Delivery }}</td>
<td class="text-center" >{{ obj.Qa_Decision }}</td>
since there table with id 'datatable' exist, im assuming you using DataTables library
if you not using server side datatables pagination, you can access all data with rows().data() refrence https://datatables.net/reference/api/rows().data()
if your using server side datatables or even not using datatables
you only can count that data in backend(django), since js cant access all that data
Related
I'm trying to have an html table where the first column is sticky. I followed other advice on using position: sticky. I'm also using some javascript because I'm building the table dynamically depending on the data passed to the DOM. The following code works as expected:
html
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="filled">Person</th>
<th scope="col"># Items 1</th>
<th scope="col"># Items 2</th>
<th scope="col"># Items 3</th>
<th scope="col"># Items 4</th>
<th scope="col"># Items 5</th>
<th scope="col"># Items 6</th>
<th scope="col"># Items 7</th>
<th scope="col"># Items 8</th>
<th scope="col"># Items 9</th>
<th scope="col"># Items 10</th>
<th scope="col"># Items 11</th>
<th scope="col"># Items 12</th>
<th scope="col"># Items 13</th>
<th scope="col"># Items 14</th>
<th scope="col"># Items 15</th>
<th scope="col"># Items 16</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row_1" class="filled">Jim</td>
<td id="row_1_col_1">64</td>
<td id="row_1_col_2">12</td>
<td id="row_1_col_3">33</td>
<td id="row_1_col_4">32</td>
<td id="row_1_col_5">59</td>
<td id="row_1_col_6">64</td>
<td id="row_1_col_7">12</td>
<td id="row_1_col_8">33</td>
<td id="row_1_col_9">32</td>
<td id="row_1_col_10">59</td>
</tr>
<tr>
<td id="row_2" class="filled">Sam</td>
<td id="row_2_col_1">83</td>
<td id="row_2_col_2">12</td>
<td id="row_2_col_3">32</td>
<td id="row_2_col_4">27</td>
<td id="row_2_col_5">9</td>
<td id="row_2_col_6">83</td>
<td id="row_2_col_7">12</td>
<td id="row_2_col_8">32</td>
<td id="row_2_col_9">27</td>
<td id="row_2_col_10">9</td>
</tr>
<tr>
<td id="row_3" class="filled">Ted</td>
<td id="row_3_col_1">11</td>
<td id="row_3_col_2">39</td>
<td id="row_3_col_3">77</td>
<td id="row_3_col_4">68</td>
<td id="row_3_col_5">93</td>
<td id="row_3_col_6">11</td>
<td id="row_3_col_7">39</td>
<td id="row_3_col_8">77</td>
<td id="row_3_col_9">68</td>
<td id="row_3_col_10">93</td>
</tr>
</tbody>
</table>
javascript
var rowName = [];
var cellName = [];
var numberPeople = 3;
var numberItems = 10;
var score = 5
for(var n=0; n < (numberPeople); n++) {
for(var i = 0; i < numberItems; i++) {
// +1 b/c starts at 0
rowName[n] = "row_" + (n + 1) + "_col_" + (i+1);
cellName[n] = document.createElement('td');
document.getElementById(rowName[n]).appendChild(cellName[n]);
switch (score) {
case 5:
document.getElementById(rowName[n]).style.backgroundColor = "#fff";
document.getElementById(rowName[n]).style.opacity += "0.5";
break;
}
}
}
css
.table th:first-child,
.table td:first-child {
position: sticky;
left: 0;
z-index: 6;
}
.table .filled {
background-color: #fff;
}
Here is the jsfiddle link.
However, when I try to use this code in my actual webpage, it does not work as expected. In my actual webpage, the text in the table cells that scrolls will sit over top of the sticky column (whereas in the jsfiddle, the cell text will go behind the sticky column - hidden by the background-color: #fff).
The webpage code and js is almost the same as the jsfiddle, the css is the same for both.
html
<div class="container ps-4">
<div class="row">
<div class = "table-responsive">
<table id="grade-table" class="table table-bordered table-sm ">
<thead>
<tr>
<th scope="col" class="filled">Students</th>
{% for obj in objective_list %}
<th scope="col">{{ obj.objective_name }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for student in student_list %}
<tr>
<td id="row_{{ forloop.counter }}" class="filled">{{ student }}</td>
{% for obj in objective_list %}
<td id="row_{{ forloop.parentloop.counter }}_col_{{ forloop.counter }}"></td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div>
javascript
<script>
// gradeArray contains number of students & objectives, objective name and score for each objective
var gradeArray = {{ grade_report|safe }};
var numberStudent = gradeArray.shift();
var numberObj = gradeArray.shift();
if (numberObj > 0) {
var obj = []
for (var g = 0; g < numberObj; g++) {
obj[g] = gradeArray.shift();
}
}
var rowName = [];
var studentname = [];
var objective = [];
var cellName = [];
if (numberObj > 0) {
for(var n=0; n < (numberStudent); n++) {
for(var i = 0; i < numberObj; i++) {
// +1 b/c starts at 0
rowName[n] = "row_" + (n + 1) + "_col_" + (i + 1);
cellName[n] = document.createElement('td');
// numberObj + 2 b/c in the array one index is the name and the other is the grade
let score = gradeArray[(n)*(numberObj+2)+i+1];
cellName[n].innerHTML = score
document.getElementById(rowName[n]).appendChild(cellName[n]);
//document.getElementById(rowName[n]).style.color = "grey";
switch (score) {
case 'BEG':
case 'EMG':
document.getElementById(rowName[n]).className += "table-danger";
break;
case 'DEV':
document.getElementById(rowName[n]).className += "table-warning";
break;
case 'APP':
case 'PRF':
document.getElementById(rowName[n]).className += "table-success";
break;
case 'APP+':
case 'PRF+':
document.getElementById(rowName[n]).className += "table-info";
break;
case 'EXT':
document.getElementById(rowName[n]).className += "table-primary";
break;
case '---':
case 'I':
document.getElementById(rowName[n]).className += "table-secondary";
document.getElementById(rowName[n]).style.opacity += "0.5";
break;
}
}
}
}
</script>
There are a couple of tags in here from the django framework such as {{ student }} but I don't think they are problem - they're just how I'm passing data to the DOM. It's also how I iterate through the data. All of the text, colors, data, displays as expected except for the cell data/text not scrolling behind the sticky column.
My webpage is using boostrap 4, I don't know if that is causing the issue.
Edit
I have set up a demo account to see this issue live. Here is the direct link to a page that will show issue, you may need to make your browser window a bit more narrow to bring up the table scrolling.
username: Demo
password: demodemo
I just checked out your website and the following CSS changes fix the issue:
First, remove the z-index from this CSS selector (style.css):
.table th:first-child, .table td:first-child {
position: sticky;
left: 0;
/* z-index: 6; */
Instead, add a z-index to your .filled elements:
.table .filled {
background-color: #fff;
z-index: 1;
}
Also, in order to get rid of the rows being shown left to the row header (when scrolling), remove (or overwrite) the padding on this element (bootstrap's _grid.scss):
.row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
/* padding-left: calc(var(--bs-gutter-x) * .5); */
margin-top: var(--bs-gutter-y);
}
oi
<table class="table table-striped table-sm small" >
<thead class="bg-dark text-light">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Nationality</th>
<th scope="col" class="text-right"></th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td class="align-middle" data-bind="text:DriverId"></td>
<td class="align-middle" data-bind="text:Name"></td>
<td class="align-middle">
<span id = "nation" data-bind="text:Nationality" class="float-left"> </span>
<img id="flagicon" src="" alt="" class="flag float-right float-center" />
<script>
var alpha_2_code = "pt";
/* for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality === (data-bind = "text:Nationality"))
alpha_2_code = countrycodes[i].alpha_2_code;
}*/
var myPath = "https://countryflagsapi.com/png/" + alpha_2_code;
document.getElementById("flagicon").src= myPath;
</script>
</td>
</tr>
</tbody>
I want the information > data-bind="text:Nationality" < stored in a variable in script tag.
Im getting the information from an api and its being handled by knockoutjs. My knockoutjs knowledge is scarce and i dont know if i can access the information data-bind="text:Nationality" in the script tags. Any solution whether in jquery , knockouts or javascript would be perfect.
Thanks in advance.
you could make use of a simple function that you define before you applyBindings with knockout and after your countrycodesobj is defined, sth like:
function getFlagByNationality(n) {
var alpha_2_code = "pt";
for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality == n ){
alpha_2_code = countrycodes[i].alpha_2_code;
}
}
return "https://countryflagsapi.com/png/"+alpha_2_code;
}
you can then use this in data-bind attribute:
<img src="" data-bind="attr:{src: getFlagByNationality(Nationality)}" />
I want to sum up total income and total indirect income. This total values in html table comes using jQuery by providing a class. But now I want to sum up two table total values in a single variable and put in a new html table.
The new html table looks like we have a column total (income+indirect income) = variable. Click to see the HTML table
How can I do that using jQuery. Click this link and see that the values of total amount column are sum up and lies in the footer on every table. But now I want to sum up two table values in a single variable and that new variable I want to put in a new html table on a same page.
$(document).ready(function() {
var total_1 = 0;
$('.income-amount').each(function(i, obj) {
total_1 += parseInt($(obj).text());
});
$('#income-total').text(total_1.toFixed(1));
});
I use this jQuery in the Html table for total amount column sum up.
Below is the html table.
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;"><h3>Income</h3></caption>
<thead class="thead-dark">
<tr>
{# <th>S No.</th>#}
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{% for item in all_profit %}
{% if item.category.under == "Income" %}
<tr>
{# <td>{{ }} </td>#}
<td>{{item.category}}</td>
<td>{{item.category.desc}}</td>
<td class='income-amount'>{{ item.balance }} </td>
</tr>
{% endif %}
{% endfor %}
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td style="visibility:hidden;"></td>
<td id='income-total'>Total:</td>
</tr>
</tfoot>
</table>
So my HTML table looks like this:
<table class="mon_list" id="mon_list">
<tr class='list'>
<th class="list" align="center"><b>Klasse(n)</b></th>
<th class="list" align="center">Stunde</th>
<th class="list" align="center">Fach</th>
<th class="list" align="center">Raum</th>
<th class="list" align="center">Vertretungs-Text</th>
<th class="list" align="center">Vertr-Text-2</th>
</tr>
<tr class='list odd'>
<td class="list" align="center" style="background-color: #FFFFFF"><b>6.1</b></td>
<td class="list" align="center" style="background-color: #FFFFFF">1 - 2</td>
<td class="list" align="center" style="background-color: #FFFFFF">Ku</td>
<td class="list" align="center" style="background-color: #FFFFFF">
<s>312</s>006</td>
<td class="list" align="center"> </td>
<td class="list" align="center"> </td>
</tr>
...
</table>
and I need to delete the last column. I cannot find a regular expression for that. I need to delete the 6th element in each row.
If you want to remove a column, you could loop through each row and remove the cell at the specific position (in this case the last one)
var table = document.getElementById("myTable");
for (var i = 0, row; row = table.rows[i]; i++) {
row.removeChild(row.cells[row.cells.length - 1]);
}
Let me know if that works
This can be read as an XY problem, that is "how do I do X using Y",
perhaps the question could be rephrased as, "how do I do X",
I think in this case Y is the "regular expression".
I also think your code could use better formatting, would you mind editing the question?
in JavaScript you can remove rows by using the DOM removeChild() API passing the ID of the column row like so:
var rows = document.getElementById("tableObj").querySelector("tr");
for(var i=0;i<rows.length;i++){
var cols = rows[i].querySelector("td");
for(var r=0;r<cols.length;r++){
if(r == 3){ //i.e. delete fourth column
rows[i].removeChild(cols[r]);
}
}
}
I am trying to pull the header field on a table so that I can manually adjust the size of the field. The header that I am trying to get to has the data-dynatable-column of "paymentStatus". Here is the function that checks for each tied to a particular table:
$("#DetCheckResults td").each(function () {
var xyzh = $(this).html();
var tdId = $(this).closest('th').find(".dynatable-head").text();
alert("Value of tdId field is " + tdId) ;
xyzh = xyzh.replace(/,/g, "");
if ($.isNumeric(xyzh))
{
$(this).css("text-align", "right");
}
if (tdId === "paymentStatus")
{
$(this).css("width", "10%");
}
});
Here is a description of the table:
<table class="tablesaw tablesaw-stack table-responsive" id="detailCheck_search_results" data-tablesaw-mode="stack">
<thead>
<tr>
<th class="dynatable-head" data-dynatable-column="transmittal"><a class="dynatable-sort-header" href="#">Transmittal</a></th>
<th class="dynatable-head" data-dynatable-column="naid"><a class="dynatable-sort-header" href="#">NAID</a></th>
<th class="dynatable-head" data-dynatable-column="transmittalTotal"><a class="dynatable-sort-header" href="#">Transmittal Total</a></th>
<th class="dynatable-head" data-dynatable-column="checkNumber"><a class="dynatable-sort-header" href="#">Check Number</a></th>
<th class="dynatable-head" data-dynatable-column="payeeId"><a class="dynatable-sort-header" href="#">Payee ID</a></th>
<th class="dynatable-head" data-dynatable-column="paymentStatus"><a class="dynatable-sort-header" href="#">Payment Status</a></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">SFF CB 16 00005</td>
<td style="text-align: left;">CASANDI500</td>
<td style="text-align: right;">7,181.42</td>
<td style="text-align: right;">403053601263</td>
<td style="text-align: left;">XXXXX0934</td>
<td style="text-align: left;">A</td>
/tr>
/table>
Can you look at the definition of the 'tdId' field to see how I can pull the header correctly. Thanks
You are traversing the table dom incorrectly. The th element you are looking for is not a direct ancestor of the td you are operating on.
You need to do:
$(this).closest("table").find("th").eq($(this).index());
and to reference the data-id you need to do:
tdId.data("dynatable-column") === "paymentStatus"
See this jsfiddle (I change the style change to a color to easily see the change)
https://jsfiddle.net/algorithmicMoose/p3L3bov2/