I'm using jquery in an html table, this is my first example FIDDLE
the thing is when I try to pass this example to my angular app it doesnt work
This is my view in agular:
<table class="table table condensed drillDown">
<thead>
<tr style="background-color: #E3E3E3">
<th style="width: 5%"></th>
<th style="text-align: center">Categories</th>
<th style="text-align: center">LW $</th>
<th style="text-align: center">LW</th>
<th style="text-align: center">L4 W</th>
<th style="text-align: center">L13 W</th>
<th style="text-align: center">L52 W</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in category" class="parent">
<td ng-class="expand" style="cursor: pointer"></td>
<td>{{d.desc}}</td>
<td>{{d.LW$}}</td>
<td>{{d.LW}}</td>
<td>{{d.L4W}}</td>
<td>{{d.L13W}}</td>
<td>{{d.L52W}}</td>
</tr>
<tr ng-repeat="d in subcat" class="child">
<td ng-class="expand" style="cursor: pointer"></td>
<td>{{d.desc}}</td>
<td>{{d.LW$}}</td>
<td>{{d.LW}}</td>
<td>{{d.L4W}}</td>
<td>{{d.L13W}}</td>
<td>{{d.L52W}}</td>
</tr>
</tbody>
</table>
So as you can see, I call my parent, child and expand class the same way I'm doing on the regular html example but I cant make it work
The jquery code that im using is in the fiddle, but I read that this can be done by using a directive but I dont know how to do this, Im new with angular.
Some help would be nice
This is my example using angular Angular FIDDLE example
Yes, a directive would be the way to go. I created an example using your jQuery in a directive here:
https://jsfiddle.net/h90Luy3h/
The directive is restricted to the drill-down attribute in the td tag. I'm a fan of using attributes or elements over classes for directive hooks because I think they're easier to identify and you can be pretty explicit with what it's doing by the name of the directive. Classes as hooks can get messy and really should only apply to a style rather than a dom identifier, but that's definitely a personal preference.
function drillDown() {
var directive = {
restrict: 'A',
link: link
};
return directive;
function link(scope,element) {
var table = $('.categories-table');
table.each(function() {
var $table = $(this);
$table.find('.parent').each(function(){
if($(this).nextUntil('.parent', ".child").length > 0){
$(this).children('td:first').html('+');
}
});
$table.find('.child').each(function(){
if($(this).nextUntil('.child', ".grandson").length > 0){
$(this).children('td:first').html('+');
}
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').click(function() {
$childRows.hide();
});
});
element.on('click',function(){
if($(this).parent().hasClass('parent') == true)
{
console.log("----Parent");
if ($(this).text() == "+")
$(this).text("-")
else
$(this).text("+");
$(this).parent().nextUntil('.parent', ".child").fadeToggle("slow", "linear");
$(this).parent().nextUntil('.parent', ".grandson").hide("fast");
$(this).parent().nextUntil('.parent', ".child").each(function(){
if($(this).children('td:first').text() == '-')
$(this).children('td:first').text('+');
});
}
else if($(this).parent().hasClass('child') == true)
{
console.log("----Child");
if ($(this).text() == "+")
$(this).text("-")
else
$(this).text("+");
$(this).parent().nextUntil('.child', ".grandson").fadeToggle("slow", "linear");
}
});
}
}
The table in the angular version doesn't exist when your jQuery function is trying to run, so the jQuery function isn't able to modify the table.
Angular is really a different way of building UIs, so it would be useful to read up about directives and the angular lifecycle. A super useful discussion on the topic: "Thinking in AngularJS" if I have a jQuery background?
I don't have much of an answer, but you need more than just a code snippet here.
Related
I have a table in a razor page in which I'm looping through an IENumenrable collection (vwAssignedTaskProgress) and adding rows based on conditions. One or more of the contains 'recent' to indicate it is a row that has been recently added. I want to briefly highlight these rows to indicate they are new rows.
My problem is twofold. I'm using jquery (although I'm happy with any solution) and I can't get the jquery selector to fire on rows generated inside my loop. It works fine on content outside my # block of code.
And secondly, I can't seem to get .effect to work in Jquery (trying outside the # block). Research tells me that it's part of jquery UI which is both incorporated into jquery and deprecated.
Using jquery 3.5.1
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress){
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr >
<th scope="row">
#tsk.Description
</th>
#if(#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td >
recent
</td>
}
</tr>
}
}
</tbody>
</table>
script block, within a form and body tag.
<script>
$('#tblTasks4 td').filter(
function(t){
if($(this).text() =="recent") {
$(this).closest('tr').effect("highlight", {}, 3000);
return;
}
});
</script>
First of all jQuery UI is not included in jQuery. You have it add it to your project separately.
Then I would add a recent class to the recent tds and hightlight them using:
$('.recent').parent().effect("highlight", {}, 3000);
Example:
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress)
{
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr>
<th scope="row">
#tsk.Description
</th>
#if (#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td class="recent">
recent
</td>
}
</tr>
}
}
</tbody>
</table>
#section Scripts {
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script>
$('.recent').parent().effect("highlight", {}, 3000);
</script>
}
I am new to Knockout JS, therefore need your help to fix one small issue. I am trying to bind css style with a table row in CSHTML page, based on a condition. I have added 2 rows but displaying only one for each item using 'visible' attribute. Following is my cshtml code:
<table class="listing">
<tbody class="no-wrap" data-bind="foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr class="selectable" data-bind="visible: !$root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
--
--
<tr/>
<tr class="selectablematch" data-bind="visible: $root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
--
--
<tr/>
Underlying Typescript: Inside app.listing.ts File:
isSelected(item: T) {
return this.selectedItems.indexOf(item) >= 0;
}
As you can see, based on the result of isMatchedCase() method (which returns a boolean), I am displaying either of the tr (selectable or selectablematch). The problem is the css on the tr is getting binded only for the first tr, i.e. with the class selectable, and not getting binded with the selectablematch tr. The method 'isSelected($data)' is not getting called when the checkbox in the first td is clicked for 'selectablematch' tr. Can you guys please let me know what I am missing here?
I am little confused as to why you need to have 2 tr to begin with. What you could do is have a computed which would return the correct class for you and have only one row which will be always visible. Not need to deal with hide/show etc.
Look at this article on the css binding and how it is done. Here is what I am suggesting:
<table class="listing">
<tbody class="no-wrap" data-bind="foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr data-bind="css: { rowClass($data), selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
<tr/>
</tbody>
</table>
And your pureComputed (wrapped in a function so we can pass the $data):
var rowClass = function(data) {
return ko.pureComputed(function(){
return isMatchedCase(data) ? 'selectablematch' : 'selectable')
)}
}
I think that should get you going in the right direction.
I am trying to add a slider on my page which is filtering a specific numeric column,of a specific class of a specific class table.
I have tried to correct and make modifications of many existing example1,example2 ... without success.
I use Zurb-Foundation slider. Slider works for now, but it is not linked with anything of my page(not useful at all). Here is the HTML for the slider ;
<div class="large-9 columns">
<div class="slider" data-slider data-initial-start="0.5" data-end="1" data-step="0.05" id="slider-filter">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns">
<input type="number" id="slider-number">
</div>
According to the Foundation doc and examples above, here is my JS :
$(document).ready(function () {
$(function () {
$("#slider-filter").slider({
slide: function (event, ui) {
// in this function we can define what happens when a user changes the sliders
console.log("Slider is moving");
}
})
})
})
I am failing already at this part, of detecting my slider movement... I also tried according to the doc this line(var elem = new Foundation.Slider(element, options);) in order to use within the .slide()... no success.
Table example :
<table id="Table-to-filter">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr class="Prt">
<td>XXXX</td>
<td>23</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>51</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>77</td>
<td>XXXX</td>
</tr>
<tr class="Prt">
<td>XXXX</td>
<td>215</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>450</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>450</td>
<td>XXXX</td>
</tr>
Any detailed help would be more than appreciated to solve this problem using Foundation slider.
Thank you.
After Nowres Rafed's response :
FILTERING OF BIGDATA TABLE
After many tries, here is what I have been able to do. I have explications and questions about my code.
As you can see, my table is organised with this structure, an expandable parent row that gives many child rows if you click on arrow icon. I would like to use the slider to filter the "Score" column of both parent and child rows. My score is stored on a "accordion menu", not on a simple <td>.
I was wondering is there a better way to filter only the Score column ? I used the row.cells indice, does it change the speed to do it with the row.cells name (i.e "Score") ? Do you think I used the correct way to acces to my score value, using : $(colx.getElementsByClassName("accordion-title")).html();
Moreover, I divided the filtering of parent and child rows on two different loops, is it possible to improve this part ?
Many thanks for your help.
You are initializing the plugin in the wrong way, there is no jQuery plugin called slider in your code.
Here is a working example for your case:
$(function() {
var $filter = $('.slider');
$filter.foundation();
$filter.on('moved.zf.slider', function() {
var slideValue = $('#sliderOutput1').val();
// Do your filtering here
console.log(slideValue);
});
});
Live: https://codepen.io/anon/pen/VbYZgO
Just add your columns filtering code and it's done.
edited:
I think you can make it simpler: https://codepen.io/anon/pen/Qvjqyo
add score-value class on each accordion-title, you can extend the exemple if you wish to distinguish between child and parent rows...
Below is the tabular structure for expand & collapse, i have done using table. Now i have used the below script for collapse & expand. But sometime i succeeded in expand & sometime don't.
What i did, when i got response from the api, i call this function :
$timeout(function (){
$scope.initExpandCollapse();
},1000);
$scope.initExpandCollapse = function () {
angular.element(document).on("click", ".table_exp", function(){
var TBODY = angular.element(this).parents(3);
if(TBODY.hasClass("open")){
TBODY.children("tr.expand-table-row").hide();
TBODY.removeClass("open");
return false;
}
TBODY.addClass("open");
TBODY.children("tr.expand-table-row").show();
});
}
If you guys, can help me out for this problem . Thanks.
CSS:
tr.expand-table-row {
display: none;
}
tr.expand-table-row.open {
display: initial;
}
Angular
$scope.expandCollapse = function expandCollapse (item) {
item.open = !item.open
}
HTML
<table>
<tbody>
<tr ng-repeat="item in items track by $index"">
<td ng-click="expandCollapse(item)">++++</td>
<td>
<table>
<tr ng-class="{'open': item.open}" class="expand-table-row open">
<td>{{item.name}}</td>
<td ng-repeat="data in item.options">{{data.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You need nested tables so the click marker does not simply vanish with the rest, apart from that the salient point is the ng-class="{'open': item.open}" espression that sets the class open if the property open on item is set.
Try to use window.onload instead of $timeout, or add you script to the end of body tag.
I have a jquery dataTable with 3 columns (check box column, userId, full name). The 'check_all' check box worked fine (meaning all the rows were checked when the 'check_all' was clicked) when I used it with jquery.dataTables.js and jquery.dataTables.min.js version 1.9.4. However, I have to use dataTable version 1.10.5 in order to use the "draw()" function. But once I started using the new version, the check_all checkbox stopped working, the alert() inside the .click() didn't get invoked. I tried to put the .click function inside the $(document).ready(), but didn't fix the issue. Anybody has any idea ? Thanks!!
Script:
$('#check_all').click(function()
{
alert("here");
var oTable = $('#users').DataTable();
});
HTML part:
<DIV id ="tablePanel">
<table class="userTable" cellpadding="4" rules="all" border="1" id="users">
<THEAD>
<TR>
<th><input type="checkbox" id ="check_all" class="call-checkbox" name="check_all">Select users</th>
<th>User Id</th>
<th>Full Name</th>
</TR>
</THEAD>
<TBODY>
<TBODY>
</table>
</DIV>
You are missing the closing ")" on the click event handler function. You should also ensure that any bindings occur after the DOM is ready by placing them inside jQuery's document.ready() function.
The full syntax is $(document).ready(function () { .. }); but it can be shortened to $(function() { ... });
$(function () {
$('#check_all').click(function () {
alert("here");
var oTable = $('#users').DataTable();
});
});
Demo: http://jsfiddle.net/BenjaminRay/qe0ckve8/