aaSorting in datatables not working properly - javascript

I have the following html in my first column. It shows a icon and an anchor tag.
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="0">
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
<tr class="odd">
<td class=" sorting_1">
<span data-sortvalue="1">
<img title="icon" src="icon.png">
1
</span>
</td>
</tr>
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="2">
<img title="icon" src="icon.png">
2
</span>
</td>
</tr>
....................
...................
...................
I am using aaSorting[0, 'asc']
In chrome, the 0 value is always staying at the top if the column is sorted either ascending or descending. All the remaining values are getting sorted accordingly.
In firefox, the sorting is completely broken.

The data attributes for sorting on your span tags need to be on the td tag. They should also be changed to just 'data-sort' or 'data-order'.
Check out DataTables data-attributes docs here
<tr class="even">
<td class=" sorting_1" data-sort="0">
<span>
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
...
...

Related

table inside hidden div becomes visible upon appending tr dynamically

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

Get tr element with document.querySelector

I trying to get a tr element using the document.querySelector sentence, but I get :
TypeError: tempNode.querySelector(...) is null
My selector in Javascript is: document.querySelector("#row-model")
This is working with other element (with a div to be exact) but with it, I tried others selectors (using the datatype, the tr, etc, but always I get the same error)...Then in the browser console I checked the existence of the element, the HTML of the element is as follows:
<table>
<tbody>
<tr class="" id="row-model" data-id="myid" data-type="rowtemplate">
<td class="category">
</td>
<td class="title showTipTip">
<a data-cats="" href="#profile" id="title" aria-controls="profile" role="tab" data-toggle="tab" title="" data-id="" class="spotlink" address="true"></a>
</td>
<td class="comments">
<a class="spotlink" href="#comments" title="" id="commentValue"> commentValue
</a>
</td>
<td class="genre">
catdesc
</td>
<td class="poster">
poster
</td>
<td class="date" id="since"></td>
<td class="filesize" id="filesize">
</td>
<td class="nzb">
NZB
</td>
<td class="multinzb">
<input onclick="multinzb()" name="messageid[]" value="" type="checkbox">
</td>
</tr>
</tbody>
</table>
EDITED:
The JS code inside the function is:
$('#catalog').each(function(){
var tempNode = document.querySelector("#row-model").cloneNode(true); //I clone the element and then append it to another table
tempNode.querySelector("a #category").textContent = "test";
$('#spotsTable tr:last').after(tempNode);
});
Also, I have the table inside a div with hidden class (bootstrap), maybe it can affect it?

Remove all element that does not have specific descendandt element in jquery

So i have the following markup:
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
there are multiple tr elements, but only some of them have the innermost span with "woocommerce-Price-amount" class. The other have nothing after the "festi-cart-product-price" classed span.
I'm trying to remove all the tr elements that does NOT have the "woocommerce-Price-amount" span inside it using jQuery.
jQuery( document ).ajaxComplete(function() {
jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
jQuery(this).parent('tr.festi-cart.item').hide();
});
});
I've been trying to use the :not selector, but it doesnt seem to produce anything. I'm really not sure where it goes wrong.
Can any of you spot where my code is going wrong, or if it's a completely hopeless approach to a simple solution?
Use .filter function to match elements with specific requirements.
Use $('tr').find('.woocommerce-Price-amount').length > 0 to check if element exists in tr.
Than simply do .hide() (or .remove()) to filtered elements.
$(document).ready(function() {
var hasWoo = $('.festi-cart-list tr').filter(function() {
return $(this).find('.woocommerce-Price-amount').length !== 0;
});
hasWoo.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
EMPTY
</span>
</td>
</tr>
</tbody>
</table>
</div>
You need to use .closest() method of jquery instead of .parent() method.
$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
if(!price)
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount"></span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn">remove</button>
You're so close, your selector is valid and select the festi-cart-product-price that have no span's :
$(".festi-cart-product-price:not(:has('>span'))")
You've just to go up to the parents tr using closest() then hide them :
selector.closest('tr').hide();
Check This fiddle using setTimeout() to see the effect .
Hope this helps.
$(function() {
var selector = $(".festi-cart-product-price:not(:has('>span'))");
selector.closest('tr').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list" border=1>
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 1
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p1</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 2
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 3
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 4
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p4</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
How about this.
$("tr:not(:has(>.woocommerce-Price-amount))").hide()
Not tested.
Comes from this question: How to select elements which do not have a specific child element with JQuery which is worth a read on this type of 'descendant without feature' question.

Slimscroll not working

I am new to slimscroll. I am working on an angular page where slimscroll works fine but when I click on some link and go to other page scroll stops working even for the main page but when I refresh this page it works fine.
Is there any thing I am missing which is making scrolling disable?
What is the thing which is enabling scroll on page refresh?
<div slimscroll data-height="455" scrolly condition="scrolling_condition">-->
<table class="table-grid" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr data-ng-repeat="item in project.list |
filter:project.search:strict |
startFrom: (project.pagination.current_page - 1) * project.pagination.items_per_page |
limitTo: project.pagination.items_per_page"
data-ng-show="project.list.length > 0">
<td width="13%">{{item.name}}</td>
<td width="16%">{{item.portfolio.name}}</td>
<td width="12%" data-ng-if="!project.isClient">{{item.client.name}}</td>
<td width="7%" data-ng-if="!project.isClient">{{item.status}}</td>
<td width="12%">{{item.installation_type}}</td>
<td width="7%">{{item.dc_rating}}</td>
<td width="12%">{{item.location.city_state}}</td>
<td width="8%">{{item.location.country}}</td>
<td width="13%" class="text-center">
<a data-ng-href="#/entity/projects/view/{{item.id}}" class="action-link">
<i class="fa fa-eye fa-lg-icn"></i>
<span data-ng-if='$last' infinite-scroll-disabled='max_data_loaded' infinite-scroll="project.loadMore()" infinite-scroll-distance='1' ></span>
</a>
<a data-ng-href="#/entity/projects/edit/{{item.id}}" class="action-link">
<i class="fa-lg-icn rg-pen"></i>
</a>
<a href="#" class="action-link" confirmed-click="project.delete({{item.id}})" ng-confirm-click="Are you sure to delete this Project?">
<i class="fa-lg-icn rg-bin"></i>
</a>
</td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.LOADING">
<td colspan="6"><div class="main-loading"> </div></td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.ERROR">
<td colspan="6">
<div class="error-loading-img"></div>
<div class="error-loading-msg text-center">{{errorMsg}} Click here to reload.</div>
</td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.SUCCESS && ((project.list | filter:project.search:strict).length == 0 || project.list.length == 0)">
<td colspan="6">No records found.</td>
</tr>
</tbody>
</table>
</div>
If i scroll inside this div and click on any url inside it then on new page scrolling stops.

jquery selector inside a table td

here is my html code wordpress that makes a table in my plugin dash page:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td:
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me?
You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
Working Demo
You cannot apply hide on text() - you apply it on an HTML Element
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working
and the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() {
var columnmTo=$(this).parent("th").next("td").next("td");
columnmTo.find('.selectedTest').addClass('highlight');
columnmTo.find('.error').hide();
columnmTo.find('.row-actions').hide();
});
span.highlight
{
font-weight:bold;
}
span.error
{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
<span class="selectedTest">this text is to be selected</span>
<span class="error">Hello</span>
<div class="row-actions">
<span class="subjects">a</span>
<span class="settings">b</span>
<span class="clone">c</span>
<span class="users">c</span>
<span class="uploads">d</span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>

Categories