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

13,591

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.

Share:
13,591
AabinGunz
Author by

AabinGunz

Quiet and fun loving, here to learn and share. :) SOreadytohelp Got to share some amazing things. Thanks SO.

Updated on June 04, 2022

Comments

  • AabinGunz
    AabinGunz about 2 years

    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");
    }
    
  • Pramod Gaikwad
    Pramod Gaikwad over 8 years
    Thank you. You save my hours.