Clever Geek Handbook

How to export whole data from a table in angularjs including all paginated data?

I am trying to export data from ng-table

using the ngTableExport plugin for angularjs , but this is only exporting data from 1 page. I am looking for a solution that exports all data from a table (including paginated data, which also has sorting or filter data, so cannot use an array directly).

Below I am giving my code as my plunker link is not working, but I can do export to my local codebase.

<a class="btn btn-primary" ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="myreport.csv">Export</a>
<table ng-table="tableParams" show-filter="false" class="table" export-csv="csv">
  <tr ng-repeat="item in $data" height="10px">
    <td data-title="'Date'">{{translate(item[0])}}</td>
    <td data-title="'Tasks Run Count'">{{item[1]}}</td>
  </tr>
</table>

$scope.translate = function(value) {
  if (value === null || value === undefined)
    return value;
  var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var myDate = new Date(value);
  return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
}

$scope.tasksRunData = [
  [1412582400000, 135, 1412582400000, 9],
  [1412586000000, 324, 1412586000000, 144],
  [1412589600000, 324, 1412589600000, 108],
  [1412593200000, 324, 1412593200000, 36],
  [1412596800000, 324, 1412596800000, 54],
  [1412600400000, 324, 1412600400000, 36],
  [1412604000000, 324, 1412604000000, 36],
  [1412607600000, 324, 1412607600000, 36],
  [1412611200000, 324, 1412611200000, 36],
  [1412614800000, 324, 1412614800000, 36],
  [1412618400000, 324, 1412618400000, 36],
  [1412622000000, 324, 1412622000000, 36],
  [1412625600000, 324, 1412625600000, 36],
  [1412629200000, 198, 1412629200000, 36],
  [1412632800000, 108, 1412632800000, 36],
  [1412636400000, 306, 1412636400000, 36],
  [1412640000000, 324, 1412640000000, 153],
  [1412643600000, 324, 1412643600000, 117],
  [1412647200000, 288, 1412647200000, 36],
  [1412650800000, 189, 1412650800000, 36],
  [1412654400000, 324, 1412654400000, 36],
  [1412658000000, 324, 1412658000000, 36],
  [1412661600000, 324, 1412661600000, 36],
  [1412665200000, 324, 1412665200000, 36],
  [1412668800000, 324, 1412668800000, 36],
  [1412672400000, 324, 1412672400000, 135],
  [1412676000000, 324, 1412676000000, 117],
  [1412679600000, 324, 1412679600000, 36],
  [1412683200000, 306, 1412683200000, 54],
  [1412686800000, 324, 1412686800000, 36],
  [1412690400000, 324, 1412690400000, 36],
  [1412694000000, 324, 1412694000000, 36],
  [1412697600000, 324, 1412697600000, 36],
  [1412701200000, 324, 1412701200000, 36],
  [1412704800000, 324, 1412704800000, 36],
  [1412708400000, 324, 1412708400000, 36],
  [1412712000000, 324, 1412712000000, 36],
  [1412715600000, 324, 1412715600000, 36],
  [1412719200000, 324, 1412719200000, 36],
  [1412722800000, 324, 1412722800000, 36],
  [1412726400000, 324, 1412726400000, 162],
  [1412730000000, 324, 1412730000000, 108],
  [1412733600000, 324, 1412733600000, 36],
  [1412737200000, 324, 1412737200000, 36],
  [1412740800000, 324, 1412740800000, 36],
  [1412744400000, 324, 1412744400000, 36],
  [1412748000000, 324, 1412748000000, 36],
  [1412751600000, 324, 1412751600000, 36],
  [1412755200000, 324, 1412755200000, 36],
  [1412758800000, 324, 1412758800000, 135],
  [1412762400000, 324, 1412762400000, 117],
  [1412766000000, 324, 1412766000000, 36],
  [1412769600000, 324, 1412769600000, 54],
  [1412773200000, 324, 1412773200000, 36],
  [1412776800000, 297, 1412776800000, 36],
  [1412780400000, 324, 1412780400000, 36],
  [1412784000000, 324, 1412784000000, 36],
  [1412787600000, 324, 1412787600000, 36],
  [1412791200000, 324, 1412791200000, 36],
  [1412794800000, 279, 1412794800000, 27],
  [1412798400000, 324, 1412798400000, 36],
  [1412802000000, 324, 1412802000000, 36],
  [1412805600000, 324, 1412805600000, 36],
  [1412809200000, 324, 1412809200000, 36],
  [1412812800000, 324, 1412812800000, 126],
  [1412816400000, 324, 1412816400000, 144],
  [1412820000000, 324, 1412820000000, 36],
  [1412823600000, 324, 1412823600000, 36],
  [1412827200000, 324, 1412827200000, 36],
  [1412830800000, 324, 1412830800000, 36],
  [1412834400000, 324, 1412834400000, 36],
  [1412838000000, 297, 1412838000000, 36],
  [1412841600000, 324, 1412841600000, 36],
  [1412845200000, 324, 1412845200000, 135],
  [1412848800000, 324, 1412848800000, 117],
  [1412852400000, 324, 1412852400000, 36],
  [1412856000000, 324, 1412856000000, 54],
  [1412859600000, 324, 1412859600000, 36],
  [1412863200000, 324, 1412863200000, 36],
  [1412866800000, 324, 1412866800000, 36],
  [1412870400000, 324, 1412870400000, 36],
  [1412874000000, 324, 1412874000000, 36],
  [1412877600000, 162, 1412877600000, 18]
];

$scope.tableParams = new ngTableParams({
  page: 1, // show first page
  count: 10 // count per page
}, {
  total: $scope.tasksRunData.length, // length of data
  counts: [],
  getData: function($defer, params) {
    //console.log($scope.tasksRunData.length);
    params.total($scope.tasksRunData.length);
    $defer.resolve($scope.tasksRunData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
  }
});

$scope.exportPdf = function($event) {
  alert("Export to pdf click handler");
}
+3


source to share


2 answers


I found davisford here

I made significant changes, namely, I needed to fix this to work with the ng-table pager. If pager is enabled, the export plugin will only export the data page. My fix is ​​mostly rewriting and it's not perfect, but it seems to work for me.

Since the plugin dumps the HTML table data, the trick is to force the table to disable the pager, let the browser re-render the entire table, and only then parse the table (and then restore the pager to be nice and that's it).



forked repo here with a few improvements (for some).

Other suitable solutions are also welcome.

+3


source


  • Added global variable in ng-table

    var selectedEntries = '' ";

  • then edit the following function in ng-table

    getData function (data, parameters) {if (data == null) {return []; }

                var options = angular.extend({}, defaultDataOptions, params.settings().dataOptions);

            var fData = options.applyFilter ? applyFilter(data, params) : data;
            var orderedData = options.applySort ? applySort(fData, params) : fData;
            selectedEntries = orderedData;
            return options.applyPaging ? applyPaging(orderedData, params) : orderedData;
        }

  • Then add the following function to ng table

    this.orderedData = function () {return selectedEntries};

  • You can get the selected records from the controller like this

    $ scope.self.tableParams.orderedData ();



0


source






More articles:


All Articles