<table id="state_table" class="table" width="100%">
<thead>
<tr>
<th class="column_checkbox disabled">
<th class="sortable desc" data-type="stateid">ID</th>
<th class="sortable" data-type="name">Name</th>
webdriver code to sort the table by column header is
driver.findElement(By.cssSelector("th.sortable")).click();
This sorts the table by ID column. How do I sort the table by Name column using "Name" and not the data type="name"
Thanks
Why bother with css? Using XPath, that should be something like
driver.findElement(By.xpath("//th[text()='Name']")).click();
We can use the CSS here
driver.findElement(By.cssSelector(".sortable[data-type='name']")) -- Data Type(Name)
driver.findElement(By.cssSelector(".sortable[data-type='stateid']")) -- Data Type (State ID)
Please Let me know is the above CSS Selectors are working.
Related
can someone show me an example of using Bootstrap and AngularJS to create table columns with
sort
search
edit
pagination
You can use the following code (instead of json data you can simply put your data directly in the table):
<table id="resultTable"
data-toggle="table"
data-url="json.php"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-select-item-name="toolbar1"
data-pagination="true">
<thead>
<tr>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="column1" data-sortable="true">Column1</th>
</tr>
</thead>
</table>
So what you look for is data-search="true" (search) and data-pagination="true" (pagination) as well as data-sortable="true" (sort).
For editing I think you need to use an additional plugin like this one: https://mindmup.github.io/editable-table/
I have a problem withe the Smart Table AngularJS Sorting, I implemented this on my table as:
The initialized app:
angular.module('myproyApp', ['smart-table'])
The controller side:
$scope.dataList = []; //any json collection with: id, name and description
The view side with st-table directive:
<table class="table table-bordered table-striped" st-table="dataRows" st-safe-src="dataList">
<thead>
<tr>
<th><span class="glyphicon"></span>Q</th>
<th st-sort="name">Name</th>
<th st-sort="descripcion">Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in dataRows">
<td class="col-md-1">{{$index + 1}}</td>
<td class="col-md-4">{{row.name}}</td>
<td class="col-md-4">{{row.description}}</td>
<td>Change</td>
</tr>
</tbody>
</table>
On click the sorting header's cells the table is sorting, but the sorting isn't working for the $index cells. Please if you have any think to include the $index cells to sort. I want not to use the indexes on dataList $scope values, I need that this index will be include only on table view.
Track by is used to link your data with the DOM generation made by ng-repeat. When you add track by you tell angular to generate a single DOM element per data object in the given collection. Because $index has to do with the DOM there is no way to have it relate to a particular data entry. Here's a more detailed explanation.
If you really want to do it without touching your dataList, you could call indexOf in your table:
<tbody>
<tr ng-repeat="row in dataList | orderBy:sortField">
<td class="col-md-1">{{dataRows.indexOf(row)}}</td>
<td class="col-md-4">{{row.name}}</td>
<td class="col-md-4">{{row.description}}</td>
<td>Change</td>
</tr>
</tbody>
Where there is a scoped variable called sortField which is a string that is the name of the field you wish to sort by. I implemented a similar thing in this plunker, using the smart-tables module. http://plnkr.co/edit/AF90dQ
I would advise against this because it quickly becomes expensive for large arrays, and runs into problems if your entries aren't unique.
Is there any way to have conditional st-sort in smart-table. Example - I have an array which tells me the columns in my table which are sortable. Lets say my table has columns [FirstName, LastName, Age, email] and my sorters array is [firstName, age], which means only firstname and age fields are sortabe. How can I achieve this using smart-talbe. Any help is much appreciated! Thanks!!
The way smart table wants you to specify if a column is sortable or not is by using the st-sort directive in your <thead>, it tells which column should be sortable by what object property, like so:
<thead>
<tr>
<th st-sort="firstName">first name</th> <!-- sortable rows -->
<th st-sort="lastName">last name</th>
<th st-sort="age">age</th>
<th>email</th> <!-- not sortable -->
</tr>
</thead>
what you're saying is that you have an array that tells your table which column is sortable and which is not.
In my opinion is a very awkward way to do things in general and it can't really be done neatly in ST.
You can however write a directive that conditionally adds or removes st-sort from your table using values from an array. but that will just be a mess
I agree it is an awkward way to do but that's how the services are returning data to us. I tried the following code and got it working(It sorts the firstname and age columns. ), although it doesn't seem a very clean approach to me -
In my HTML -
<thead>
<tr>
<th st-ratio="20" ng-attr-st-sort="sorters.getSorter('firstName')">first name</th> <!-- sortable rows -->
<th st-ratio="20" ng-attr-st-sort="sorters.getSorter('lastName')">last name</th>
<th st-ratio="10" ng-attr-st-sort="sorters.getSorter('age')">age</th>
<th st-ratio="30" ng-attr-st-sort="sorters.getSorter('email')">email</th>
<th st-ratio="20" ng-attr-st-sort="sorters.getSorter('balance')">balance</th>
</tr>
</thead>
enter code here
In my js -
$scope.sorters = {
getSorter: function(prop){
return function(value){
var sortables = ['firstName', 'age'];
for(var i=0;i<sortables.length; i++){
if(sortables[i] === prop) {
return value[prop];
};
}
return undefined;
}
}
};
Although this solves my problem, I dont like the approach. Is there any better option to this?
P.S - I will eventually be converting this to a directive if I have no better option.
I'm trying to add custom column filter (autocomplete, select ...) but can't find how. I tried to override default filter template with a tr-ng-grid-column-filter attribute on a th, but it does not works. Header is changed somehow (title is not bold anymore) and the new template is not used at all.
Is the tr-ng-grid-column-filter right way to do it at all or there is something else?
Data is sorted, paginated and filtered on the server so it does not have any relation to angular or trnggrid client side filtering & formating. So I just want to display some other input on some columns (e.g. select) instead of default input text rendered by a grid.
I'm using angular 1.2.22 with TrNgGrid 3.0.3
There are some samples floating around the net. Here's one:
http://plnkr.co/edit/I6JJQD?p=preview
<table tr-ng-grid='' items='myItems'>
<thead>
<tr>
<th field-name="name"></th>
<th field-name="computedTagsField" display-format="computedTags:gridItem">
<div>
<div class="tr-ng-title">Tags</div>
<div class="tr-ng-column-filter">
<select class="form-control input-sm" ng-options="tag for tag in [null, 'tennis', 'basketball', 'volley']" ng-model="columnOptions.filter"></select>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td field-name="computedTagsField"></td>
</tr>
</tbody>
</table>
I created a directive to implement a custom drop down filter. It, in itself, can be reused on any project, but it will also give you a good working example of how to implement your own custom filter by simply extending TRNG grid.
Tutorial:
http://www.davidcline.info/2015/08/trnggrid-dropdown-column-filter.html
Demo:
http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview
I'm trying to use the JQuery tablesorter plugin working along with Angular.
Currently if you click on any column for sorting the entire width and structure of the table changes and a new row with the ng-repeat expressions is created.
$(document).ready(function() {
$("#check").tablesorter();
});
<table id="check" class="table table-bordered table-striped table-condensed table-hover tablesorter" cellspacing="1">
<thead>
<tr>
<th class="header">Product Code#</th>
<th class="header">Item Description#</th>
<th class="header">Unit Cost#</th>
</tr>
</thead>
<tbody>
<tr ng:repeat="i in itemresponse" >
<td><a href="#/ItemSearch/{{i._ItemID}}" >{{i._ItemID}}</a></td>
<td>{{i.PrimaryInformation._ShortDescription}}</td>
<td>{{i.PrimaryInformation._UnitCost}}</td>
</tr>
</tbody>
</table>
You're doing it wrong.
If you want to sort rows in a table with AngularJS, you should use the orderBy filter. There is no need to include another framework. Once you have made that leap, you can find a plethora of samples online (or on SO).
See for example this fiddle: http://jsfiddle.net/uRPSL/1/
Fortunately there's an Angular Module called ng-table.