Datatablesのようなエクスポートオプションを持つ同等の単一HTMLファイル

Question

DataTablesを使用して静的データを使用して、エクスポートオプション、検索、ページネーションを使用して単一HTMLテーブルを作成しました。

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview 

のDataTableは、巨大な記録とうまく動作しません

角度-UI-グリッドの例と同様の種類や使用可能な作業htmlです。あらかじめ角度ui grid..thanksを使って同等のhtmlファイルを手助けしてください。

ありがとうございました。

Answer 1

CSVとPDFをエクスポートすることができます。私は、Excelのエクスポート作業の証拠は表示されません。私は印刷機能についてはわかりませんが、PDFのエクスポートと印刷はオプションになります。私は後でそれが契約の破り人であるかどうか見ることができます。

JSコードはかなり簡単です。私はPDF構成のオプションもいくつか追加しました。

エクスポート機能のコードは、UI-Grid.info: 312 Exporting Data With Custom UIからそのままです。必要に応じてボタンに変換することもできますが、これは外部のエクスポート機能を提供します。右上の小さなメニューにもエクスポートオプションがありますので、私はあなたの実験のために残しました。 $ scope.gridOptions.enableGridMenuをからに設定すると、がオフになります。

JS

$scope.gridOptions = { 
    enableGridMenu: true, 
    data: 'data', 
    paginationPageSizes: [10], 
    paginationPageSize: 10, 

    exporterLinkLabel: 'get your csv here', 
    exporterPdfDefaultStyle: {fontSize: 9}, 
    exporterPdfTableStyle: {margin: [10, 10, 10, 10]}, 
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'}, 
    exporterPdfOrientation: 'portrait', 
    exporterPdfPageSize: 'LETTER', 
    exporterPdfMaxGridWidth: 500, 

    onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
    }, 

    }; 

    // Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex 
    $scope.export = function(){ 
    if ($scope.export_format == 'csv') { 
     var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location")); 
     $scope.gridApi.exporter.csvExport($scope.export_row_type, $scope.export_column_type, myElement); 
    } else if ($scope.export_format == 'pdf') { 
     $scope.gridApi.exporter.pdfExport($scope.export_row_type, $scope.export_column_type); 
    } 
    }; 

HTML

<!-- Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex --> 
<label>Which columns should we export?</label> 
    <select ng-model="export_column_type"</select> 
    <option value='all'>All</option> 
    <option value='visible'>Visible</option> 
    </select> 
    <label>Which rows should we export?</label> 
    <select ng-model="export_row_type"</select> 
    <option value='all'>All</option> 
    <option value='visible'>Visible</option> 
    <option value='selected'>Selected</option> 
    </select> 
    <label>What format would you like?</label> 
    <select ng-model="export_format"</select> 
    <option value='csv'>CSV</option> 
    <option value='pdf'>PDF</option> 
    </select> 
    <button ng-click="export()">Export</button> 
    <div class="custom-csv-link-location"> 
    <label>Your CSV will show below:</label> 
    <span class="ui-grid-exporter-csv-link">&nbsp</span> 
    </div> 

    <div ui-grid="gridOptions" class="grid" style="width:100%" 
     ui-grid-selection ui-grid-exporter ui-grid-pagination></div> 
    </div> 

Example Plunk