1. java script which is called
this.changeRole=function(user){
alert(user)
if(user=='Admin' || user=='Subject Manager'){
$scope.role=false;
}
else{
$scope.role=true;
}
}
2. html from that function is called
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="uc.newuser.role"
ng-change="uc.changeRole(uc.newuser.role)" required >
<option ng-repeat="role in uc.roles" ng-value="user.name" >
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="role=='Admin'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="role=='Admin'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
After ng-change the column with ng-if is hiding.
ng-if should be checked like
<td ng-if="role">
Not exactly sure on what actually is required. However, this is what I think:
The select dropdown decides the role and based on the role the actions should appear on the following set of users.
You could directly use ng-model to do the same.
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.selectedRole = 'ADMIN'
$scope.roles = ['ADMIN','Subject Manager','Student'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="selectedRole"required >
<option ng-repeat="role in roles" value="{{role}}">
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="selectedRole === 'ADMIN'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="selectedRole==='ADMIN'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</body>
Related
I have a dynamic table and there is an input field in each row as well as a respective button on every rows. I want to get the respective value of the input field when I click on the respective button. To replicate the scenario, you may refer to the following static code with two rows. Can someone help?
$(".returnItem").click(function(){
var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
var row = $(".newQty").val(); //This is not working also
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
In your example you are using jQuery 1.2.3, which doesn't contains closest function (added since 1.3). Although, you're not looking for function closest, but parents. By this function, you will find parent <tr>, and then by find you will find the input and get his value via val.
Also, since your buttons are inside form, after pressing the button, form will be submitted, so you need to add e.preventDefault() from preventing the form to be sent.
$(".returnItem").click(function(e){
e.preventDefault();
row = $(this).parents("tr").find("input[name='newQty']").val();
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
You have used type="submit" in button which led to refresh in
jquery fetching data there are many options below given is one of
them.
Use latest version of jquery cdn for using closest and find based functions. https://cdnjs.com/libraries/jquery
$(".returnItem").click(function(){
var row = $(this).parent().prev().prev().children().val();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
</tbody>
</table>
</div>
</form>
I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.
I have some data from a AJAX GET request I would like to append to a table.
This is my HTML:
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
I would like to append my data inside the tbody with the id of project-body.
I append my data like this:
$('#project-body').append(
`
<tr>
<td> <input class="form-control" type="hidden" name="projectid" id="projectid > </td>
<td> <input class="form-control" type="text" name="projectName" id="projectName > </td>
<td> <input class="form-control" type="text" name="description" id="description > </td>
<td> <input class="form-control" type="text" name="estimatedTime" id="estimatedTime > </td>
<td> <input class="form-control" type="text" name="actualTime" id="actualTime > </td>
<td> <a id="addTask" class="btn btn-info" href="Overview.php" role="button"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task </td>
<td> <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project </button> </td>
</tr>
`
);
The problem is that all of my TD elements seem to either be not showing at all or are stacking on top of each other. Normally i would like my data to spread vertically over my table filling the all of the table heads
You have missed to add value attribute to each input.
Here is a working example:
$('#add-row').on('click', function(e){
$('#project-body').append(
`
<tr>
<td>
<input class="form-control" type="hidden" name="projectid" id="projectid value="1">
</td>
<td>
<input class="form-control" type="text" name="projectName" id="projectName value="Some value">
</td>
<td>
<input class="form-control" type="text" name="description" id="description value="Some value">
</td>
<td>
<input class="form-control" type="text" name="estimatedTime" id="estimatedTime value="Some value">
</td>
<td>
<input class="form-control" type="text" name="actualTime" id="actualTime value="Some value">
</td>
<td>
<a id="addTask" class="btn btn-info" href="Overview.php" role="button">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
</a>
</td>
<td>
<button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>
</td>
</tr>
`
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-row">Add row</button>
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
Hope it helps.
I used blaze templates in my meteor project. I coded all tables in blaze templates.
used Meteor/easy search package to search table data. and use kuronin pagination for the subscription base pagination.
Now I want to covert that tables to the data tables. What is the best way to do it?
This is my code base.
<table class="table table-hover am-customers-table-2" id="mytable">
<thead>
<tr>
<th width="20%"><label>Customer Name</label></th>
<th width="15%"><label>Phone Number</label></th>
<th width="35%"></th>
<th width="5%"></th>
<th width="10%"><label>Actions</label></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<!-- {{#EasySearch.Each index=searchCustomersIndex }} -->
{{#each documents}}
<tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}">
<td>
<div class="single-line-list-item">
<span class="number">{{getFirstLettersOfTheName name}}</span>
<div class="data">
<span>{{name}}</span>
</div>
</div>
</td>
<td>
<span>{{number}}</span>
</td>
<td>
</td>
<td>
</td>
<td>
{{#if flagStatus}}
<button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button>
{{else}}
<button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button>
{{/if}}
</td>
<td>
<button class="btn btn-sm btn-default" style="float: left">View Profile</button>
</td>
</tr>
<!-- {{/EasySearch.Each}} -->
{{/each}}
</tbody>
</table>
Can't you simply initialise the dataTable in .onRendered like so:
Template.onRendered(function () {
this.$('table.table').dataTable();
});
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>