Export only filtered data into csv in angular smart table - angularjs

We have implemented a report table using angular smart table.When user applied search criteria using st-search , we need to export all items into csv.We have used ng-csv directive for exporting. When use st-table array collection, the only first page data is getting.That mean total 7 records after filtering and first page showing 5 items, only this data(5 items) is exported.How can export all filtered data?
<table class="table table-striped" st-table="displayed">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th >email</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="5" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>

You can have access to the filtered collection through the table controller api. So you just need to create a directive which requires the stTable controller:
.directive('stExport',function(){
return {
require:'^stTable',
link:function(scope, element, attr,ctrl){
element.bind('click',function(){
alert(ctrl.getFilteredCollection().length);
})
};
}
have a look at that running example

Related

items in ng-repeat disappear after a second or so in IE 11?

This only happens in IE/Edge and works as expected in Chrome/Firefox. However, in IE, the tables items display for a second and then disappear. Here is my HTML:
<table md-table md-row-select ng-model="upLoaders">
<thead md-head md-order="query.tom" md-on-reorder="getIds">
<tr md-row>
<th md-column><span>Username</span></th>
<th md-column>Role</th>
<th md-column>Approved</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="user in filtered = (users | filterArray:uploadedUsers)">
<td md-cell>{{user.username}}</td>
<td md-cell>{{user.role}}</td>
<td md-cell>{{user.approved}}</td>
</tr>
</tbody>
</table>
Try updating Angularjs version to 1.7.2 above

How can data be filtered in a html table with filter in each column separately using Angular JS?

I want to use some text box in a dropdown or so beside each column header for text input for searching in that particular column as in for ID or Name.
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in data">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
use filter like this
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
It's simple, you just have to add a input for each column, like this:
<table class="table">
<tbody>
<tr>
<th>
<p>ID</p>
<input ng-model="search.id" />
</th>
<th>
<p>Name</p>
<input ng-model="search.name" />
</th>
</tr>
<tr ng-repeat="item in data | filter:search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
Take a look in this example and this answer

Showing "No data available in table" on sorting and searching data

Below is my table's html code -
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
This is js code for table -
$('#srchTable').dataTable();
I am populating table from json result. Below is the json -
[{
"Name":"Sam",
"Age":"25",
"Salary":"$25000"
},
{
"Name":"Phillip",
"Age":"25",
"Salary":"$30000"
}]
Now when I am clicking on sort icons table is showing No data available in table message. And same thing is happeing when I am trying to search in data table.I tried below code but it didn't worked.
$('#srchTable').dataTable({
"ordering":true,
"searching": true
});
Please help.
In this case jquery is executed before angular render the data .
You don't need to use jquery here. Angular provides filters
and sorting options .
example :
<input type="search" ng-model="query">
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}} </a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
Be sure to wrap your data rows in <tbody></tbody>.
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody><!-- start after </thead> Be sure not to include in loop -->
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</tbody><!-- end after loop -->
</table>

Angualarjs smart table search particular columns

i have used this documentation smart table
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th>email</th>
</tr>
<tr>
<th>
<input st-search="{{firstName}},{{lastName}}" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="3">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>
i have used st-search search for particular column . it is working fine but two column not working. can you help me? i need search two column only
There is apparently no way to achieve this directly with the built smart-table.
You can use a directive like suggested here :
AngularJS smart-table search within multiple columns
I have another idea for others who have the same problem:
If your data rowCollection is not too big,
in the javascript in the init() of the page do something like:
self.rowCollection.forEach(function (element) {
element.NameForFilter = element.firstName+ ' ' + element.lastName;
});
and then in the input of the th:
st-search=NameForFilter

Multiple Filtered Counts with Angular

I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length
Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.
Count of Active Users is where user.is_user_active = true
Count of Pending Users is where user.is_user_active = false
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
<td class="hidden">{{item.id}}</td>
<td class="">{{item.name}}</td>
<td class="user-count">{{item.users.length}}</td>
</tr>
<tr ng-if="item.users.length > 0">
<td colspan="100" class="hiddenRow">
<div class="accordian-body collapse" id="store_user{{$index}}">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Is Active</th>
<th>Last Login</th>
</tr>
</thead>
<tbody class="tbl-search-data">
<tr ng-repeat="app in item.users">
<td>{{app.id}}</td>
<td>{{app.name}}</td>
<td>{{app.state}}</td>
<td>{{app.is_user_active}}</td>
<td>{{app.last_login}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Just use filter, eg
<td class="active_user_count">
{{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
{{ (item.users | filter : { is_user_active: false }).length }}
</td>
I hope I've got the syntax right, the Angular docs are down at the moment >:(

Resources