I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle
Related
I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!
To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<tr role="row" class="odd">
<td style="background-color:white">
<table>
<tbody>
<tr data-row-id="22">
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)" style="display:none">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0">
<table>
----
</table>
</td>
</tr>
I am using jQuery datatable and in each row I have tables with inner tables.
I am able to get the required table from the datatable list using:
$(this).closest('table').closest('table tr')[0]
But I am not able to get the pid value which is inside
<label class="pid 8843">
I want to find the pid value. Each row has different pid values. For example:
<label class="pid 2">
<label class="pid 3">
<label class="pid 4">
...
I have found the correct tr in which my pid value resides but how to get the pid value is a problem.
Any help would be appreciated.
if the structure is same in you table, just target label and class to get that attr,, like this:
:EDIT (target input, even better)
$( $(this).closest('table').closest('table tr')[0] ).find('input').val()
try again please
Try this:
$('button').closest('table').find('tr:first td:first').find('label').attr('class')
console.log($('button').closest('table').find('tr:first td:first').find('label').attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>
The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>
With respect to this question pass array of objects to jsp, how do you retrieve the results in JSP?
The question is, I have this in my Javascript:
data = [
{
id: "333",
date: "22/12/2015"
},
{
id: "333",
date: "22/12/2015"
}]
$.post(eval.jsp, {data:data}, function(){}, "json");
How do i recover data in eval.jsp. I tried
request.getParameterValues("data");
But the value returned is null. This is not the value passed of course as can be seen in the headers (using Chrome).
You can use a dynamic table or Foreach to show data in it .
Example:
<table id="allStudent" class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>studentCode</th>
<th>Major</th>
<th>FatherName</th>
<th>id</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tmplBody">
<script id="scriptTmp">
<tr id="deleteTr" >
<td>
${firstName}
<td>
${lastName}
</td>
<td>
${studentCode}
</td>
<td>
${major}
</td>
<td>
${fatherName}
</td>
<td>
${id}
</td>
<td>
<button id="updateStudent" class="btn btn-success"><i class="fa fa-pencil" style="padding-right: 10px;"></i>
Update
</button>
<a href="#" type="button" class="btn btn-danger deletebtn" role="button" onclick="deleteSt(${id})"><i class="fa fa-trash" style="padding-right: 10px;"></i>
Delete
</a>
<button class="btn btn-info" role="button"><i class="fa fa-check" style="padding-right: 10px;"></i>Course
Selection
</button>
</td>
</tr>
</script>
</tbody>
</table>
</div>