How can I use the simplePagination.js jQuery plugin with server side? I have a lot of divs loading with my page (not a table) and I am paginating those 'divs'. But, there will be cases that I will get a lot of things to paginate (like 2500+) and my page gets slow. This is my code now:
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
And this is my page with all the divs loaded:
As you can see, I have a search option:
But everytime I search something, all the divs are reloaded, and the pagination is made again.
I want to know if its possible to change this code to not load all the content in client-side but something like if I select the content from server side. The divs are loaded by a SQL command, so, maybe I can use the functions of each page number to load each page correctly with only 20 itens and later I can do something about the search box.
EDIT
That is my html code (in php):
<html lang="pt-br">
<head>
<link rel="stylesheet" href="assets/css/simplePagination.css">
<script src="assets/js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(function(){
var keywordInput = document.querySelector("input[name='keyword']");
function performMark() {
$(".content.panel").show();
// Read the keyword
var keyword = keywordInput.value;
$('.content').removeClass('hidden');
$('.content:not(:contains(' + keyword + '))').addClass('hidden');
/* Tentar refazer paginação */
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.slice(perPage).hide();
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
};
// Listen to input and option changes
keywordInput.addEventListener("input", performMark);
});
</script>
<script type="text/javascript">
$(function() {
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.show();
items.slice(perPage).hide();
// Now setup the pagination using the `.pagination-page` div.
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
function checkFragment() {
// If there's no hash, treat it like page 1.
var hash = window.location.hash || "#page-1";
// We'll use a regular expression to check the hash string.
hash = hash.match(/^#page-(\d+)$/);
if(hash) {
// The `selectPage` function is described in the documentation.
// We've captured the page number in a regex group: `(\d+)`.
$("#pagination").pagination("selectPage", parseInt(hash[1]));
}
};
// We'll call this function whenever back/forward is pressed...
$(window).bind("popstate", checkFragment);
// ... and we'll also call it when the page has loaded
// (which is right now).
checkFragment();
});
</script>
<!--link href="assets/css/table.css" rel="stylesheet"-->
</head>
<body onload="myFunction()">
<div class="container">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div class="input-group input-group-lg" style="margin-bottom: 15px;">
<span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1" style="position: initial;"></span>
<input name="keyword" type="text" class="form-control" placeholder="Pesquisar" aria-describedby="sizing-addon1" onload="performMark()">
</div>
<div id="pagination" style="margin-bottom: 5px;"></div>
<div class='row centered'>
<?php
$sql = "SELECT * FROM USU_TDriCad";
$stid = oci_parse($conn, $sql);
oci_execute($stid);
while (($row = oci_fetch_array($stid, OCI_BOTH)) != false) {
$CodDri = 'test';
$CodDri = (isset($row['USU_CODDRI']) ? $row['USU_CODDRI'] : '');
echo '<div class="content warning">
<div class="content panel panel-warning">
<div class="panel-heading highlight">
<h3 class="panel-title">' . $StrLoc . '</h3>
</div>
<div class="panel-body warning highlight" style="padding: 2px">
' . $CodDri . '
</div>
<div class="panel-body warning highlight" style="padding: 2px; font-size: 16px">
<div class="col-xs-6">1000</div>
<div class="col-xs-6">#008</div>
</div>
</div>
</div>';
}
oci_free_statement($stid);
?>
</div>
</div>
</div>
</body>
</html>
Thanks
I will offer my solution.
var
search = $("#search"),
control = $("#pagination"),
table = $("#table tbody tr"),
pageParts = null,
perPage = 2;
search.on("keyup", function() {
var value = $(this).val().toLowerCase();
table.filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
updPagination();
});
control.pagination({
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNum) {
var start = perPage * (pageNum - 1);
var end = start + perPage;
if (pageParts) {
pageParts.hide()
.slice(start, end).show();
}
}
});
function updPagination() {
pageParts = table.filter(function() { return $(this).css("display") !== 'none' });
pageParts.slice(perPage).hide();
control.pagination('selectPage', 1);
control.pagination('updateItems', pageParts.length);
}
updPagination();
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
td,
th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em
}
td:first-child,
th:first-child {
border-left-width: 0;
}
thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/simplePagination.js/1.6/simplePagination.min.css">
<input id="search" type="text" placeholder="Search for..">
<table id="table">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tbody>
<tr>
<td>1</td>
<td>test 1</td>
</tr>
<tr>
<td>2</td>
<td>test 2</td>
</tr>
<tr>
<td>3</td>
<td>test 3</td>
</tr>
<tr>
<td>4</td>
<td>test 4</td>
</tr>
<tr>
<td>5</td>
<td>test 5</td>
</tr>
</tbody>
</table>
<div id="pagination"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/simplePagination.js/1.6/jquery.simplePagination.min.js"></script>
Related
I am working on a project where I have an HTML table and I need to offer users the option to swap two HTML table cells content.
Specifically, a user can click to select a row, then choose to move that row up or down. Really, they are only moving the content of column 2, which represents the information. Column 1 represents order, which will not change.
The table will be two total columns.
Column 1 will represent linear order (i.e. 1-10), it will not change.
Column 2 will be database-provided information (in the example code I provided last name).
I have built two buttons, up and down, and utilized two Javascript functions that allow a user to select a row and move it up or down.
The current code successfully moves a whole row to go up or down, but I only need the cell contents of column 2 to go up or down.
Please take a look at the provided code and JSFiddle and let me know how I can solve this? Thanks in advance!
var index; // variable to set the selected row index
function getSelectedRow() {
var table = document.getElementById("table");
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
// clear the selected from the previous selected row
// the first time index is undefined
if (typeof index !== "undefined") {
table.rows[index].classList.toggle("selected");
}
index = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction) {
var rows = document.getElementById("table").rows,
parent = rows[index].parentNode;
if (direction === "up") {
if (index > 1) {
parent.insertBefore(rows[index], rows[index - 1]);
// when the rowgo up the index will be equal to index - 1
index--;
}
}
if (direction === "down") {
if (index < rows.length - 1) {
parent.insertBefore(rows[index + 1], rows[index]);
// when the row go down the index will be equal to index + 1
index++;
}
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
button {
margin-top: 10px;
background-color: #eee;
border: 2px solid #00F;
color: #17bb1c;
font-weight: bold;
font-size: 25px;
cursor: pointer
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="30" http-equiv="refresh">
<title> {{.Title}} </title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<header>
</header>
<main>
<table id="table" border="1">
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
</main>
<!-- Bootstrap core JavaScript -->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/js/sidebar.js"></script>
</body>
</html>
Link to JSFiddle
This answer makes changes the posted code for simplicity (at least on the surface) and to prevent moving the header row down the table using the buttons:
A reference to the selected row is held rather than an index.
In HTML, the header row has been placed within a thead element, and the data rows within a tbody element (important in code).
When moving a row, the order of two rows is reversed, and then the textContent of their first cells swapped - without moving the "order" column cells to different rows. If this is too simple you could swap the innerHTML property of the cells instead.
Whilst making changes, clicking a row a second time was used to deselect it: clicking outside the table would be another thing you could monitor, as you wish.
"use strict";
const tbody = document.querySelector("#table tbody");
let selected = null;
tbody.addEventListener("click", function(e){
let row = e.target.closest("tr");
if( row === selected) {
row.classList.toggle("selected")
selected = null;
}
else {
if(selected) {
selected.classList.toggle("selected");
}
selected = row;
row.classList.toggle("selected");
}
});
function upNdown( direction) {
let up, down;
if( selected) {
up = direction == "up" ? selected : selected.nextElementSibling;
down = direction == "up" ? selected.previousElementSibling : selected;
if( up && down) {
tbody.insertBefore(up, down); // put up before down
var temp = up.firstElementChild.textContent; // swap first cells' text content
up.firstElementChild.textContent = down.firstElementChild.textContent;
down.firstElementChild.textContent = temp;
}
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
<table id="table" border="1">
<thead>
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
It depends on exactly what you want. You mention having tried moving innerHTML so this snippet does that - leaving any attributes on the two tds unmoved (see Note below):
var index; // variable to set the selected row index
function getSelectedRow() {
var table = document.getElementById("table");
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
// clear the selected from the previous selected row
// the first time index is undefined
if (typeof index !== "undefined") {
table.rows[index].classList.toggle("selected");
}
index = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction) {
var rows = document.getElementById("table").rows,
parent = rows[index].parentNode;
if (direction === "up") {
if (index > 1) {
// get the relevant cell which is the second one as we know only tds are the children
let td = rows[index].children[1];
let tdAbove = rows[index - 1].children[1];
let temp = td.innerHTML;
td.innerHTML = tdAbove.innerHTML;
tdAbove.innerHTML = temp;
// when the rowgo up the index will be equal to index - 1
index--;
}
}
if (direction === "down") {
if (index < rows.length - 1) {
let td = rows[index].children[1];
let tdBelow = rows[index + 1].children[1];
let temp = td.innerHTML;
td.innerHTML = tdBelow.innerHTML;
tdBelow.innerHTML = temp;
// when the row go down the index will be equal to index + 1
index++;
}
}
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}
button {
margin-top: 10px;
background-color: #eee;
border: 2px solid #00F;
color: #17bb1c;
font-weight: bold;
font-size: 25px;
cursor: pointer
}
<body>
<header>
</header>
<main>
<table id="table" border="1">
<tr>
<th>Order</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Smith</td>
</tr>
<tr>
<td>2</td>
<td>Johnson</td>
</tr>
<tr>
<td>3</td>
<td>Roberts</td>
</tr>
<tr>
<td>4</td>
<td>Davis</td>
</tr>
<tr>
<td>5</td>
<td>Doe</td>
</tr>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
</main>
Note: in the question the idea of moving a whole element, not just its contents, is introduced. You could do that instead of swapping the contents (i.e. all the attributes would also get moved) by using for example outerHTML. However, this may not be what you want because there may be for example an inline style on the top element which highlights it in gold if this is a leader board. It depends on exactly what your requirement is.
Note also that the snippet assumes the table is well-formed in the sense that there are no non-td elements as direct children within the selectable rows.
I would like to convert multiple tables on one page into UL lists.
For each table I have created a numbered class, so as not to find the contents of one table inside another.
This is because JS duplicates me the contents of the variables.
What I would like to achieve is to convert all the tables in UL list, referring to them with a common class, without having to create a numbering.
So I can create multiple tables, without having the counter limit to have to increment each time, if I want to use multiple tables on the same page.
Thanks in advance!
This is what I tried to do:
(function() {
/*Counter by class numbering so as not to have duplicate table content in others.
This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/
var tableInPage = 3;
for (let i = 0; i <= tableInPage; i++) {
var ul = $('<ul>');
$('.table-list-' + tableInPage[i] + ' ' + 'table tr').each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
i.append(span);
});
ul.append(li);
})
$('.table-list-' + tableInPage[i] + ' ' + 'table').replaceWith(ul);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
Here you go. JSFiddle Working Link
HTML
<!-- Table 1-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 3-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
and so on .....
JS/JQ
(function () {
/*you don't have to give numbering class to each table. Just give all of them same class and the code will do the rest*/
$(".table-list").each(function(){
var ul = $('<ul>');
$('table tr', this).each(function () {
$('th, td', this).each(function () {
var li = $('<li>')
var span = $('<span>').html(this.innerHTML);
li.append(span);
ul.append(li);
});
});
$('table', this).replaceWith(ul);
})
})();
I've rewritten your code a bit, so now you should not have to change any jQuery if you add another table.
(function() {
$('div[class^="table-list"]').each(function() {
var ul = $('<ul>');
$('table tr',this).each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('table tr',this).replaceWith(ul);
})
})();
Demo
(function() {
$('div[class^="table-list"]').each(function() {
var ul = $('<ul>');
$('table tr',this).each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('table tr',this).replaceWith(ul);
})
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
You can just walk this inside out for each element and replace simply with the contained HTML.
(function() {
$('div[class^=table-list-]').each(function() {
$(this).find('th, td').each(function() {
$(this).replaceWith($('<span>').html(this.innerHTML));
});
$(this).find('tr').each(function() {
$(this).replaceWith($('<li>').html(this.innerHTML))
});
$(this).find('tbody').each(function() {
$(this).replaceWith($('<ul>').html(this.innerHTML));
});
$(this).find('table').each(function() {
$(this).replaceWith(this.innerHTML);
});
// unclear the requirement to replace the div with the ul but this does that
$(this).replaceWith(this.innerHTML);
});
})();
ul {
border: solid red 1px;
}
li {
border: solid lime 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
You are almost there. Your code just needs a little touch up and it would work. Please change:
//i.append(span) to:
li.append(span)
//and tableInPage[i] to:
(i+1)
DEMO
(function() {
/*Counter by class numbering so as not to have duplicate table content in others.
This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/
var tableInPage = 3;
for (let i = 0; i <= tableInPage; i++) {
var ul = $('<ul>');
$('.table-list-' + (i+1) + ' ' + 'table tr').each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('.table-list-' + (i+1) + ' ' + 'table').replaceWith(ul);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
I having issue with modal in headers. When i click header "Safety", it open safety's modal and have manage to add item ONE ROW EVERY CLICK, which is great. When i duplicate my codes for second header, which is "Operate". The issue started.
After i open Safety's modal, added new item and close the modal, I open Operate's modal and add new item. The new item i added is not ONE ROW EVERY CLICK, it added TWO Row EVERY CLICK and sometimes THREE ROW EVERY CLICK.
Please help.
// Get the that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
s_news.style.display = "block";
$('.AddNew').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
if (s_newsevent.target == s_news) {
s_news.style.display = "none";
}
});
///
// Get the that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
qi_news.style.display = "block";
$('.AddNew').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
if (qi_newsevent.target == qi_news) {
qi_news.style.display = "none";
}
});
/* News Feed (background) */
.s_news,
.qi_news {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.headercolor {
background-color: rgba(255, 0, 0, 1);
}
/* The Newsfeed Close Button */
.s_newsclose,
.qi_newsclose {
color: #aaa;
float: left;
font-size: 28px;
font-weight: bold;
}
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2 style="font-size:1.5rem" id=Safety>Safety</h2>
<h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>
<div id="s_news" class="s_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="s_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New'></td>
<td><input type='button' class='AddNew' value='Add new item'></td>
</tr>
</table>
</div>
<div id="qi_news" class="qi_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="qi_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New -->'></td>
<td><input type='button' class='AddNew' value='Add new item'></td>
</tr>
</table>
</div>
</body>
</html>
Examine the code nested within the safety.onclick code block. Each time you click "Safety", you're binding a jQuery click() event handler to all elements that have a class attribute of AddNew. You can see this for yourself in the code snippet you provide. Click the header, and immediately close it. Repeat two more times. Now when you click the "Add Item" button you'll see that three new rows display.
Also, notice how the effect you want to achieve is the same for each of your divs. I would recommend a more DRY approach to your code here. Consider an alternative solution where your jQuery event bindings utilize the .on() method and are not nested within the vanilla onclick handler.
$('#s_news, #qi_news').on('click', '.AddNew', function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row)
.removeClass('AddNew')
.addClass('RemoveRow')
.val('Remove item');
});
$('#s_news, #qi_news').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
Here's an example of implementing the add/remove event handling code: https://jsfiddle.net/v5r2f913
One more bit of general commentary on the provided code sample: since you are using jQuery, you may consider just using that library's selectors and event model, rather than a mixture of jQuery and vanilla JavaScript.
The problem is that your .AddNew class is getting call more than once. Just change the name of the class that targets the click event on both (Safety and Operate). Example: change the first class to ".AddNew1" and the second one to ".AddNew2".
Here's a working solution. Hope it helps!
// Get the that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
s_news.style.display = "block";
$('.AddNew1').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
if (s_newsevent.target == s_news) {
s_news.style.display = "none";
}
});
///
// Get the that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
qi_news.style.display = "block";
$('.AddNew2').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
if (qi_newsevent.target == qi_news) {
qi_news.style.display = "none";
}
});
.s_news,
.qi_news {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.headercolor {
background-color: rgba(255, 0, 0, 1);
}
/* The Newsfeed Close Button */
.s_newsclose,
.qi_newsclose {
color: #aaa;
float: left;
font-size: 28px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="font-size:1.5rem" id=Safety>Safety</h2>
<h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>
<div id="s_news" class="s_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="s_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New'></td>
<td><input type='button' class='AddNew1' value='Add new item'></td>
</tr>
</table>
</div>
<div id="qi_news" class="qi_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="qi_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New -->'></td>
<td><input type='button' class='AddNew2' value='Add new item'></td>
</tr>
</table>
</div>
I am relatively new to AngularJs and I am having trouble implementing a Fixed Header on my table. I am using a modified version of a library I am utilizing on other parts of my application with no problem however on this specific table it is not working. I even tried having two separate tables one for the head and one for the body but since the can be dynamic with Angular and a Maximize, this does not work.
js code:
<div id="test"
class="panel-body" style="height: 222px; overflow-y: scroll;">
<table id="data-sources-table" class="table table-striped drag-drop" fixed-header-custom >
<thead>
<tr>
<th style="position: relative">TestProperty</th>
<th style="position: relative" ng-repeat="ds in model.dataSamples"
style="line-height: 16px; vertical-align: top;">
<span tooltip="{{ds.dsName}}"
tooltip-placement="top">
{{ds.dsName.slice(0, 20)}}
</span>
<button class="btn-graphic-only btn-remove" type="button"
ng-show="ds"
ng-model="singleModel"
tooltip="Test data sample"
tooltip-placement="left"
ng-click="removeDs($index)">
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(property, linkedDs) in model.properties">
<td ng-class="{'narrow-column': $first}"
ng-style="highlightIfInDetails(model.properties[property])">
<span>
<ul style="margin-bottom: 0px; list-style-type: none; padding: 0px;">
<li dnd-draggable="ds.dsProfile[property]"
dnd-effect-allowed="copy"
dnd-copied="dragEnd(property, ds.dsProfile[property])"
dnd-selected="dropzoneModels.selected = ds.dsProfile[property]">
<label class="btn-property" style="font-size: 100%;">
{{property}}
</label>
<button class="btn-graphic-only btn-remove" type="button"
ng-model="singleModel"
tooltip="Remove property from schema"
tooltip-placement="right"
ng-click="removeProperty(property)">
</button>
<div ng-show="modifySchemaMode === true">
<!--keep the following on the same line to prevent spaces between values-->
{{model.properties[property]["main-type"]}}<span
ng-show="model.properties[property]['main-type']">:{{model.properties[property]["detail"]["detail-type"]}}</span>
</div>
</li>
</ul>
</span>
</td>
<td ng-repeat="ds in model.dataSamples"
ng-style="highlightIfInDetails(ds.dsProfile[property])">
<span class="btn-property">
<label class="btn-property"
style="font-size: 100%; font-weight: normal;
-webkit-user-select: none; -moz-user-select: none;
-ms-user-select: none;"
unselectable="on"
single-click="showInDetails1(ds, property, false)"
ng-dblclick="showInDetails2(ds, property);">
<div ng-show="ds.dsProfile[property]['original-name']">
<label style="font-size: 100%;">{{ds.dsProfile[property]['original-name']}}</label>
</div>
<!--keep the following on the same line to prevent spaces between values-->
{{ds.dsProfile[property]["main-type"]}}<span
ng-show="ds.dsProfile[property]['main-type']">:{{ds.dsProfile[property]["detail"]["detail-type"]}}</span>
<span class="btn-merge-indicator"
ng-show="ds.dsProfile[property]['merged-into-schema']">
</span>
</label>
<span class="btn-use-check"
ng-show="ds.dsProfile[property]['used-in-schema']">
</span>
<br>
<select name="altNameSelected" id="altNameSelected"
ng-options="option.name for option in ds.dsProfile[property]['match-names'].availableOptions track by option.id"
ng-model="ds.dsProfile[property]['match-names'].selectedOption"
ng-show="ds.dsProfile[property]['match-names'].availableOptions.length > 0"
ng-change="changeMatchedProperty(ds, property)">
</select>
</span>
</td>
</tr>
</tbody>
</table>
</div>
library:
/**
* AngularJS fixed header scrollable table directive
* #author Jason Watmore <jason#pointblankdevelopment.com.au> (http://jasonwatmore.com)
* #version 1.2.0
*/
(function () {
angular
.module('anguFixedHeaderTableCustom', [])
.directive('fixedHeaderCustom', fixedHeaderCustom);
fixedHeaderCustom.$inject = ['$timeout'];
function fixedHeaderCustom($timeout) {
return {
restrict: 'A',
link: link
};
function link($scope, $elem, $attrs, $ctrl) {
var elem = $elem[0];
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
});
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;
}
function transformTable() {
// reset display styles so column widths are correct when measured below
angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', '');
// wrap in $timeout to give table a chance to finish rendering
$timeout(function () {
// set widths of columns
angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {
var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');
var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
if (tdElems) {
tdElems.style.width = columnWidth + 'px';
}
if (thElem) {
thElem.style.width = columnWidth + 'px';
}
if (tfElems) {
tfElems.style.width = columnWidth + 'px';
}
});
// set css styles on thead and tbody
angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');
angular.element(elem.querySelectorAll('tbody')).css({
'display': 'block',
'height': $attrs.tableHeight || 'inherit',
'overflow': 'auto'
});
// reduce width of last column by width of scrollbar
var tbody = elem.querySelector('tbody');
var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
if (scrollBarWidth > 0) {
// for some reason trimming the width by 2px lines everything up better
scrollBarWidth -= 2;
var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
}
});
}
}
}
})();
Scenario:
I have a results table with a checkbox, when the checkbox is checked, the content of the row(actually 2 columns concateneted only, are copied to a new div, with the job code and job name). This works pretty well, and I am avoiding duplicated already.
However, in the new results div, I am creating an anchor tag to remove the div itself.
After the div has been removed, I should be able to add the selected job again with the checkbox.
Please note that there are many jobs in the results table, so putting the flag to false again will not work.
Also if you find a better title for this question, please let me know
//On every checkbow that is clicked
var flag = false;
$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
if (this.checked && flag === false) {
flag = true;
var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text()
var jobName = $(this).parent().parent().parent().find("td:eq(1)").text()
var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase();
AddSelectedJob(jobCode, displayvalue);
//$(this).unbind('change'); //Unbind the change event so that it doesnt fire again
FillSelectedJobs();
}
});
//Add selected job in the results div
function AddSelectedJob(id, display) {
//create a div for every selected job
$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + 'Remove selected job</div>');
}
//Removes the selected job from the resutls div
function removeSelectedJob(el) {
$(el).parent().remove();
}
The generated html is like this:
<div>
<div style="height: 300px; overflow: auto; float: left">
<div>
<table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;">
<tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
<th scope="col"> </th><th scope="col">JobCode</th><th scope="col">JobName</th><th scope="col">JobPartner</th><th scope="col">JobManager</th><th scope="col">ClientName</th>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td>
<input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" />
</td><td>jobcode01</td><td>jobname</td><td>xx</td><td>xx</td><td>xx</td>
</tr>
</table>
</div>
</div>
<div style="margin-top: 0px; margin-left: 10px; float: left">
<span>Selected :</span>
<div id="ResultsDiv" style="margin-top: 0px">
</div>
</div>
Firstly I suggest some changes to your HTML. Separate out the styles from your DOM and place them in classes.
This makes sure there is separation of concerns
HTML
<div>
<div class="divMain">
<div>
<table cellspacing="0" cellpadding="4"
id="ctl00_PlaceHolderMain_myGrid" class="table">
<tr class="rowHead">
<th scope="col"> </th>
<th scope="col">JobCode</th>
<th scope="col">JobName</th>
<th scope="col">JobPartner</th>
<th scope="col">JobManager</th>
<th scope="col">ClientName</th>
</tr>
<tr class="row">
<td>
<input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1"
type="checkbox"
name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1"
data-flag="false" />
</td>
<td>column1</td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
<td>column5</td>
</tr>
</table>
</div>
</div>
<div class="m0 selected">
<span>Selected :</span>
<div id="ResultsDiv" class="m0"></div>
</div>
CSS
.divMain{
height: 300px;
overflow: auto;
float: left
}
.table{
color:#333333;
width:100%;
border-collapse:collapse;
}
.rowHead{
color:White;
background-color:#5D7B9D;
font-weight:bold;
}
.row{
color:#333333;
background-color:#F7F6F3;
}
.m0{
margin-top: 0px;
}
.selected{
margin-left: 10px;
float: left
}
Javascript
$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
// Next cache your selector
// so that you need not crawl the DOM multiple times
var $this = $(this),
$row = $this.closest('.row'),
currFlag = Boolean($this.data('flag'));
// As there might be multiple jobs , a single flag variable
// will not work. So you can set a data-flag attribute on the
// input that stores the current value
if (currFlag === false && this.checked) {
// Set the corresponding flag to true
$this.data('flag', true);
var jobCode = $row.find("td:eq(2)").text(),
jobName = $row.find("td:eq(1)").text(),
displayvalue = jobCode.toUpperCase() + " - "
+ jobName.toUpperCase(),
inputId = $this.attr('id')
// Pass the input name too as you need to set the value of
// the corresponding flag value again as you can add it multiple times
AddSelectedJob(jobCode, displayvalue, inputId);
FillSelectedJobs();
}
});
//Add selected job in the results div
function AddSelectedJob(id, display, inputId) {
//create a div for every selected job
// Use the inputId to save it as a data-id attribute
// on anchor so that you can set the value of the flag after
// removing it
var html = '<div class="selectedjobs" id=' + id + '>' + display ;
html += '<a href="javascript" data-id="'+ inputId
+'">Remove selected job</a></div>';
$('[id$=ResultsDiv]').append(html);
}
// Remove the inline click event for the anchor and delgate it to the
// static parent container
$('[id$=ResultsDiv]').on('click', 'a', function(e) {
var $this = $(this),
$currentCheckbox = $this.data('id');
// Set the flag value of the input back to false
$('#'+ $currentCheckbox).data('flag', false);
e.preventDefault(); // prevent the default action of the anchor
$this.closest('.selectedjobs').remove();
});
function FillSelectedJobs() {
//save values into the hidden field
var selectedJobs = $("[id$=ResultsDiv]").find("[class$='selectedjobs']");
var returnvalue = "";
for (var i = 0; i < selectedJobs.length; i++)
returnvalue += selectedJobs[i].id + ";";
$("[id$=HiddenClientCode]").val(returnvalue);
}
Check Fiddle