Export data from Smart Table in AngularJS

Question

In AngularJS project I'm using Smart Table module and asafdav/ng-csv to export data from smart table to CSV.

I successfully export data from smart table to csv, but only from first page. I export data from $scope.displayedCollection variable (the same as in st-table directive). In this variable is exacly the same data as in table, but only from first page. Do you know how can I export whole data (with sorting and filtering from smart table). I think that I should "plug in" to smart table module before splitting data to pages. But how?

sne25088 · Accepted Answer · 2015-09-01 07:49:09Z

I created my own directive for get access to data from table before pagination:

angular.module('smart-table')
.directive('stFilteredCollection', function () {
    return {
      restrict: 'A',
      require: '^stTable',
      scope: {
        stFilteredCollection: '='
      },
      controller: 'stTableController',
      link: function (scope, element, attr, ctrl) {

        scope.$watch(function () {
          return ctrl.getFilteredCollection();
        }, function (newValue, oldValue) {
          scope.stFilteredCollection = ctrl.getFilteredCollection();
        });
      }
    };
  });

To use it please add st-filtered-collection attribute with name of variable which will be setting to data from table before pagination:

<table st-table="..." st-safe-src="..." st-filtered-collection="filteredCollection">
   ...
</table>

From now in controller you can use $scope.filteredCollection variable.

β.εηοιτ.βε · Accepted Answer · 2019-10-09 22:38:11Z

Add ng-csv.min.js to your main file (index.html). Please also make sure you're adding angular-sanitize.min.js.

HTML:

<td><a class="btn btn-default" st-expor  ng-csv="displayed" filename="test.csv" csv-header="['Field A', 'Field B', 'Field C']">ExportNow</a></td>

Controller:

top line
var myApp = angular.module('myApp', ['smart-table', 'ui.bootstrap','ngSanitize', 'ngCsv']);

somewhere in your controller

.directive('stExport', function(csv){
        return {
          restrict:'E',
          require:'^stTable',
          template:'<button ng-click="export()"></button>',
          link:function(scope, element, smartTable){
              scope.export = function(){
                  var filtered = smartTable.getFilteredCollection();
                  csv(filtered); 
              }
          }
        }
     })

Collectives™ on Stack Overflow

Export data from Smart Table in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related