Angular ng-repeat doesn't show items

Angular ng-repeat doesn't show items - javascript

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>

Related

Bootstrap collapse with change data in laravel

This is my table code and data view but problem is when i click particular view data show same, not change...Like I click first row, its show data but when i click second row same data show, how can i change data view in foreach loop? I am little bit stuck here
<table id="dtBasicExample" class="table table-striped table-bordered table-sm table table-condensed" cellspacing="0" width="100%" style="border-collapse:collapse;">
<thead>
<tr>
<th class="th-sm">Sport Id</th>
<th class="th-sm">Gender</th>
<th class="th-sm">Location</th>
<th class="th-sm">Country</th>
<th class="th-sm">State</th>
<th class="th-sm">City</th>
<th class="th-sm">Action</th>
</tr>
</thead>
<tbody>
#foreach ($challenges as $challenge)
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow"><div class="accordian-body collapse" id="demo1">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>sport_id
</th>
<th>gender_id
</th>
<th>location
</th>
<th>country
</th>
<th>state
</th>
<th>city
</th>
<th>action
</th>
</tr>
</tfoot>
</table>

Your problem is that you give each element a same id and it doesn't work so, you should write your code like below:
<table id="dtBasicExample" class="table table-striped table-bordered table-sm table table-condensed" cellspacing="0" width="100%" style="border-collapse:collapse;">
<thead>
<tr>
<th class="th-sm">Sport Id</th>
<th class="th-sm">Gender</th>
<th class="th-sm">Location</th>
<th class="th-sm">Country</th>
<th class="th-sm">State</th>
<th class="th-sm">City</th>
<th class="th-sm">Action</th>
</tr>
</thead>
<tbody>
#foreach ($challenges as $challenge)
<tr data-toggle="collapse" data-target="#demo{{$challenge->id}}" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow"><div class="accordian-body
collapse" id="demo{{$challenge->id}}">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>sport_id
</th>
<th>gender_id
</th>
<th>location
</th>
<th>country
</th>
<th>state
</th>
<th>city
</th>
<th>action
</th>
</tr>
</tfoot>
</table>

you gives same id in data-target and id attribute in collapse div change div id with every new row
#foreach ($challenges as $key=>$challenge)
<tr data-toggle="collapse" data-target="#demo{{$key}}" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo{{$key}}">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}
</div>
</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach

How to display the show hide option at the end of each column

Here I want to display the show and hide function at the end of the of the table column, where it's showing at the top of the column now. It is using the first column of the table as the parent and displaying the show and hide at the first of the column.
Here the fiddle
<div class="col-lg-12" style="width: 100%"
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed"
style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
Here's the code. Thanks in advance.

Working fiddle.
You've just to move the column to the end of the row like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="col-lg-12" style="width: 100%" <div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed" style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC1" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC1">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC2" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC2">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>

It's why you're putting everything inside thead tag, you need to put your show/hide function in the table's footer, using the tag tfoot. Like this:
<table>
<thead>
<tr>
<th>MyColumnHeader</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyContent</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button>show</button></td>
</tr>
</tfoot>
</table>

Insert row below clicked button

I am looking for a way to insert an element directly below a row. My table should look like the following:
As you can see the following element is inserted below my row:
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
Below you can find my viable example:
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement
plusButtonParent.insertAdjacentHTML('beforebegin', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
As you can see the element is inserted on the side and not at the bottom.
Any suggestions how to insert the element below the row?
I appreciate your replies!

It is an issue with your Javascript. You were close!
This is the problematic line:
let plusButtonParent = plusButton[0].parentElement;
You are accessing the <td> element. So inserting a <tr> before the <td> starts would result in something like this:
<tr>
<tr> <!-- this code is added -->
<td>...</td> <!-- this code is added -->
</tr> <!-- this code is added -->
<td>...</td>
</tr>
That's clearly not what you want. So target the parent <tr> instead, and problem solved.
let plusButtonParent = plusButton[0].parentElement.parentElement;
And you will probably want to keep the Product 2 at the top like in your example. Easy, just change beforebegin to afterend.
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>

Sort data in jQuery by specific attribute

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>

expand and collapse row for ng-table not working

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

Develop Reference

JavaScript is the programming language of the Web.

Angular ng-repeat doesn't show items - javascript

Related

Bootstrap collapse with change data in laravel

How to display the show hide option at the end of each column

Insert row below clicked button

Sort data in jQuery by specific attribute

expand and collapse row for ng-table not working

Categories

Resources