Search code examples
angularjsngtableplunker

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


I am trying to export data from a ng-table using ngTableExport plugin for angularjs but this only exports data from 1 page. I am looking for a solution which exports all data from a table (including paginated data, which also has sorting or filter data so cannot use array directly).

Below I am giving my code, somehow my plunker link is not working, but I am able to do a export on 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");
}

Solution

  • I found a way here by davisford

    I made some considerable changes -- namely, I needed to fix it to work with ng-table's pager. If the pager is enabled, the export plugin would only export a page of data. My fix is mostly a re-write, and it isn't perfect, but it seems to work for me.

    Since the plugin scrapes the HTML table data, the trick is to force the table to turn off the pager, let the browser re-render the full table, and only then parse the table (afterwards restoring the pager, to be nice and all).

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

    Other relevant solutions are also welcome.