On my website I created a "dynamic" table. I want to include a pagination, to only show 10 rows at a time. The table head shall be displayed above the rows on every page.
But with my pagination function, all the content within is put under "Ref.". If I uncomment the commented part, the pagination does not work at all.
What needs to changed in my code to display the table correct on each page? (all ref{{i}} under "Ref." / "score{{i}} under "Score" /...)
Table:
{% if empty == False %}
<table style="float: left; width: 100%" class="table table-hover">
<thead id="header">
<tr >
<th>Ref.</th>
<th>Score</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{% for i in range (0,numofresults) %}
<tr id="cardmb3n{{i}}">
<td id="ref{{i}}"> </td>
<td id="score{{i}}" "> </td>
<td>
<div>
<a id="header{{i}}" href=""></a><br>
<a id="hyperlink{{i}}" href="" ></a>
</div>
</td>
</tr>
</tbody>
{% endfor %}
</table>
Pagination:
{% if empty == False %}
function paginate(page){
var val = parseInt(document.getElementById("currentpage").innerHTML);
if(page=='Next'){
page = val + 1;
} else if(page=='Previous'){
page = val - 1;
} else{
page = parseInt(page);
}
if(val!=page){
for(var j = 0; j<ergebnisliste.length; j++){
if(j>=(page-1)*10 && j<10*page){
// document.geElementById("header").style = "display:table";
document.getElementById("cardmb3n" + j).style = "display:block";
}else{
// document.geElementById("header").style = "display:none";
document.getElementById("cardmb3n" + j).style = "display:none";
}
}
........some code.........
}
}
{% endif %}
found a solution: document.getElementById("cardmb3n" + j).style = "display:table-row";
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);
}
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 I have a problem where my script for a filter/search list used to work, added a few lines of code to open a modal when a certain event occurs and now strangely when I go on my page, I can't use the search/filter list, but when I open the modal and close it, then I can use it..? It looks like it has to process the modal script first to be able to use the search/filter script.
I am working with Django and MySQL, here are the relevant lines of code:
.html ( first lines are about the search function, the second part is the modal and third block is the table used in the search/filter function and the conditions for opening the modal )
<div class="search-right">
<input type="text" id="mySearchInput" placeholder= " Search a stock.." title="Stock Search" style="float:left">
</div>
{% if warning %}
<div id="myModalAddaStock" class="modalAddaStock">
<div class="modal-content">
<span class="closeAddaStock">×</span>
<p>{{warning}} {% if stock_to_add %}{{stock_to_add}} {% endif %}{% if stock_to_replace %}{{stock_to_replace}} or {{flex}}{% endif %}</p>
</div>
</div>{% endif %}
<div class="grid-itam-2bottom">
<table id="myTable1" class="myTable"cellspacing="0" cellpadding="1" border="1" width="100%">
<tr class="stockheader">
<th width="8%" style="text-align:center;">Symbol</th>
<th width="35%"style="text-align:center">Company Name</th>
<th width="8%" style="text-align:center">Sector</th>
<th width="7%" style="text-align:center">Streak</th>
<th width="12%"style="text-align:center">Market Cap</th>
<th width="8%" style="text-align:center">Return</th>
<th width="6%" style="text-align:center">WL</th>
<th width="6%" style="text-align:center">Add</th>
</tr>
{% for stock in stock_list %}
<tbody id="searchAstock">
<tr>
<td id="searchsymmol" style="border-bottom:1px;padding-left: 5px;">{{stock.symbol}}</td>
<td style="border:0px;"class="Ellipsis Company">{{stock.company_name}}</td>
<td data-type="{{stock.sector}}">{{stock.sector}}</td>
<td>{{stock.streak}}</td>
<td>{{stock.market_cap_rounded}}</td>
<td>{% if 1w %}{{stock.five_day_avg}}{% elif 2w %}{{stock.ten_day_avg}}{% elif 3w %}{{stock.fifteen_day_avg}}{% else %}{{stock.change_percent}}{% endif %}</td>
<td style="text-align:center"><img onclick="myFunctionWL" id="WLtest"src="{% static "Myimages/images/flag.png" %}" alt="" title="Add to Watchlist" height=20 width=20 style="border-radius:50%;"></img></td>
<td style="text-align:center"><img src="{% static "Myimages/images/icon.png" %}" title="Add to my Team" height=20 width=20 style="border-radius:50%;"></img></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
And here are the scripts:
function myFunctionsearchbar() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("mySearchInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myTable1");
li = ul.getElementsByTagName("tr");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var modal = document.getElementById("myModalAddaStock");
var span = document.getElementsByClassName("closeAddaStock")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I feel like there is a core concept I have missed about Javascript? My script was working just fine before I implement the modal ( those loops at the beginning of the HTML files ) and now it only works AFTER those loops are done...
I am working on a website withDjango, and I would like to make a page where:
There is a table listing all the images of a model
There are two available space two show the images selected by the user
Example:
image grid display
Currently, in my template I produce the table like that:
<table class="table table-striped table-advance table-hover">
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
{% for imagemodel in imagemodel %}
<tr>
<td>{{ imagemodel.image }}</td>
<td>{{ imagemodel.date_taken }}</td>
<td>{{ imagemodel.image.url }}</td>
</tr>
{% endfor %}
</table>
I don't know what would be the best way to make my wish feasable:
Is it possible to do that only with javascript ? or only html ?
Should I work through my django view ?
Many thanks for your help, I am lost :/
Cheers.
I found my solution pure javascript:
var image1 ='';
var tbl = document.getElementById("galleryTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 2; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
image1 = tbl.rows[cel.parentNode.rowIndex].cells[2].innerHTML;
document.getElementById("2x2_topleft_image_tag").src=image1;
}
I have a table of All Sales, with the Client's Name, the date and the Sale Price.
I have a script for allowing a User to search through the table, but I would also like a script that returns a total for all the Sale Prices visible in the table.
e.g. If a User searches for T.Toe, then the script returns the sum of all Sale Prices for T.Toe.
code:
<table class="well table table-condensed small" id="academy">
<tr>
<td colspan="3">
<input type="text" id="search_academy" placeholder=" quick search" autocomplete="off">
</td>
<td><input type='text' style="width: 30px;" id='sum'></td>
</tr>
{% for sale in academy|sort(attribute="sale_date", reverse=True) %}
{% if sale.price > 0 %}
<tr class="success">
{% else %}
<tr class="danger">
{% endif %}
<th>{{ sale.sale_date.strftime('%d-%m-%Y') }}</th>
{% if sale.client %}
<th>{{ sale.client }}</th>
{% else %}
<th>{{ sale.concept }}</th>
{% endif %}
<th>{{ sale.club }}</th>
<th class="prices">{{ sale.price }}</th>
</tr>
{% endfor %}
</table>
JQuery for live search over the table and returning a sum of the searched cells:
EDIT:
Thanks to #pointy and #user4621032 the script currently is:
<script>$("#search_academy").keyup(function () {
var value = this.value.toLowerCase().trim();
$("#academy").find("tr").each(function (index) {
if (!index) return;
var id = $(this).find("th").text().toLowerCase().trim();
$(this).toggle(id.indexOf(value) !== -1);
});
var sum = 0;
$('.prices').each(function () {
sum += parseFloat($(this).text());
});
$('#sum').val(sum);
});
</script>
I changed the parseInt to parseFloat to keep 1 decimal place.
This does return a sum of the all cells in the column with the .prices class. However I am looking for the script to return the sum of only the .prices cells returned via the User search in #search_academy.
Thanks!
replace
sum += parseInt(this.innerHTML);
ro
sum += parseInt($(this).text());