KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Export view #1771

Closed Epitello opened this topic on on Dec 16, 2020 - 19 comments

Epitello commented on Dec 16, 2020

Hello, i wish to export a view to pdf. My problem is : i done some sorting on clientSide for a dataTable an i would like to export the dataTable with the sorting. Do you have any exemple how can i do that ? Thanks by advance

Sebastian Morales commented on Dec 17, 2020

Try running your javascript functions right after DataTables is loaded. Export should show that changes. If it doesn't pls show us your javascript code for us to check it for you. Cheers,

Epitello commented on Dec 17, 2020

Hello, i send you the js code.

function applyFilters(){
    //récupère le tableau voulu
    let table = $('#globalTable').DataTable()
    
    //fonction permettant de comparé chaque ligne du tableau avec le filtre
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            let matriculeNb = $('#matriculeNb').val()
            let operator = $('#operator').val()

            //indique quelle données utiliser pour la comparaison 
            //(le numéro correspond au numéro de la colonne. le compte du numéro de colonne commence à partir de 0)
            let matricule = data[2]

            if(matriculeNb != ""){
                return true
            }else{
                if(matricule > 410204){
                    return true
                }else{
                    return false
                }
            }
            
        }
    );
    
    table.draw()
}

$(document).ready(function(){
    applyFilters()
})

and the view

<?php 

    use koolreport\datagrid\DataTables;
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\widgets\google\ColumnChart;
?>
<html>
    <body style="margin:0.5in 1in 0.5in 1in">
        <div class="text-center">
            <h1>Cash In Report</h1>
            <h4>This report show the cash-in report per month</h4>
        </div>
        <hr/>

        <?php
        DataTables::create(array(
            "dataStore"=>$this->dataStore('personnes'),
            "name"=>"globalTable",
                "columns"=>array(
                    "nom",
                    "codeaffniv2",
                    "matricule"
                ),
            "cssClass"=>array(
                "table"=>"table table-hover table-bordered"
            ),
            "clientEvents"=>[
                "rowSelect"=>"function(e){
                    console.log(e.rowData);
                    console.log(e.rowIndex);
                    console.log(e.table);
                    getArrayFilter(e)
                }"
            ],
            "options"=>[
                "searching"=>true,
                "paging"=>true  
            ],
            "searchOnEnter"=>true,
            "searchMode"=>"or",
            "attributes"=>[
                "th"=> function($colKey){
                    return[
                        "colName" => $colKey
                    ];
                },
                "td"=>function($row, $colKey){
                    return[
                        "colName" => $colKey,
                        "cellVal" => $row[$colKey]
                    ];
                }
            ]
        ));
        ?>
        <script src="../../js/jquery"></script>
        <script src="../../koolreport/chartjs/clients/Chart.min.js"></script>
        <script src="../../js/createChartOnClickFilterExport.js"> </script>

thanks by advance

Sebastian Morales commented on Dec 18, 2020

Dont' apply applyFilters() after document ready event (because your DataTables might haven't been initialized yet). Instead apply it for DataTables' onReady event like this:

    DataTables::create(array(
        ...
        "onReady" => "function() { applyFilters(); } ";
    ));                
Epitello commented on Jan 4, 2021

Tanks for your answer, but when the export view is called, the event isn't processed. To be sure, i have write a debugger in the js function nd it's never called on export

David Winterburn commented on Jan 4, 2021

Did you add the onReady option to DataTables' in pdf view?

Epitello commented on Jan 4, 2021

yes i did it

<?php 

    use koolreport\datagrid\DataTables;
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\widgets\google\ColumnChart;
?>
<html>
    <body style="margin:0.5in 1in 0.5in 1in">
        <div class="text-center">
            <h1>Cash In Report</h1>
            <h4>This report show the cash-in report per month</h4>
        </div>
        <hr/>

        <?php
        DataTables::create(array(
            "dataStore"=>$this->dataStore('personnes'),
            "name"=>"globalTable",
                "columns"=>array(
                    "nom",
                    "codeaffniv2",
                    "matricule"
                ),
            "cssClass"=>array(
                "table"=>"table table-hover table-bordered"
            ),
            "clientEvents"=>[
                "rowSelect"=>"function(e){
                    console.log(e.rowData);
                    console.log(e.rowIndex);
                    console.log(e.table);
                    getArrayFilter(e)
                }"
            ],
            "options"=>[
                "searching"=>true,
                "paging"=>true  
            ],
            "searchOnEnter"=>true,
            "searchMode"=>"or",
            "attributes"=>[
                "th"=> function($colKey){
                    return[
                        "colName" => $colKey
                    ];
                },
                "td"=>function($row, $colKey){
                    return[
                        "colName" => $colKey,
                        "cellVal" => $row[$colKey]
                    ];
                }
            ],
            "onReady" => "function(){applyFilters();}"
        ));
        ?>
        <script src="../../js/jquery"></script>
        <script src="../../koolreport/chartjs/clients/Chart.min.js"></script>
        <script src="../../js/createChartOnClickFilterExport.js"> </script>
    </body>
</html>
David Winterburn commented on Jan 4, 2021

Where is your applyFilters() function definition? If it's in a sourced script please put the sourced script before DataTables' create.

Epitello commented on Jan 4, 2021

i try it but it doesn't work

//ExportPdf.view.php
<?php 

    use koolreport\datagrid\DataTables;
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\widgets\google\ColumnChart;
?>
<html>
    <body style="margin:0.5in 1in 0.5in 1in">
        <div class="text-center">
            <h1>Cash In Report</h1>
            <h4>This report show the cash-in report per month</h4>
        </div>
        <hr/>

        <script src="../../js/jquery"></script>
        <script src="../../koolreport/chartjs/clients/Chart.min.js"></script>
        <script src="../../js/createChartOnClickFilterExport.js"> </script>

        <?php
        DataTables::create(array(
            "dataStore"=>$this->dataStore('personnes'),
            "name"=>"globalTable",
                "columns"=>array(
                    "nom",
                    "codeaffniv2",
                    "matricule"
                ),
            "cssClass"=>array(
                "table"=>"table table-hover table-bordered"
            ),
            "clientEvents"=>[
                "rowSelect"=>"function(e){
                    console.log(e.rowData);
                    console.log(e.rowIndex);
                    console.log(e.table);
                    getArrayFilter(e)
                }"
            ],
            "options"=>[
                "searching"=>true,
                "paging"=>true  
            ],
            "searchOnEnter"=>true,
            "searchMode"=>"or",
            "attributes"=>[
                "th"=> function($colKey){
                    return[
                        "colName" => $colKey
                    ];
                },
                "td"=>function($row, $colKey){
                    return[
                        "colName" => $colKey,
                        "cellVal" => $row[$colKey]
                    ];
                }
            ],
            "onReady" => "function(){applyFilters();}"
        ));
        ?>
        
    </body>
</html>
//index.php
<?php
require_once "SalesExport.php";
$report = new SalesExport;

$report->run()
->export('ExportPDF')
->pdf(array(
    "format"=>"A4",
    "orientation"=>"portrait",
    //"zoom"=>2
))
->toBrowser("sales_by_country.pdf");
//js
//applique le filtre et redessine le tableau
function applyFilters(){
    debugger
    //récupère le tableau voulu
    let table = $('#globalTable').DataTable()
    
    //fonction permettant de comparé chaque ligne du tableau avec le filtre
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            let matriculeNb = $('#matriculeNb').val()
            let operator = $('#operator').val()

            //indique quelle données utiliser pour la comparaison 
            //(le numéro correspond au numéro de la colonne. le compte du numéro de colonne commence à partir de 0)
            let matricule = data[2]

            /*if(matriculeNb != ""){
                return true
            }else{*/
                if(matricule > 410204){
                    return true
                }else{
                    return false
                }
            //}
            
        }
    );
    
    table.draw()
}
David Winterburn commented on Jan 4, 2021

What would happen if you moved the function applyFilters() definition to the report pdf view, inside a script tag?

Epitello commented on Jan 4, 2021

i got the same result, the export doesn't have filter

David Winterburn commented on Jan 4, 2021

If you copied the pdf view to the web view would the web view show a filtered DataTabled initially?

Epitello commented on Jan 4, 2021

yes

David Winterburn commented on Jan 4, 2021

I've tested the "onReady" event with export directly and it seems to work well:

<label class='test-label'>Test label</label>
<?php
                        DataTables::create(array(
                            "name" => "tableSalesQuarterProductName",
                            "dataStore" => $this->dataStore('salesQuarterProductName'),
                            "options" => [
                                "searching" => true,
                            ],
                            "onReady" => "function(dt) {
                                dt.search('Ferrari').draw(); //replace 'Ferrari' with a fixed string of yours, don't get it from your input. We are testing if onReady can run first
                                document.querySelector('.test-label').textContent = 'Test label in PDF view' + dt;
                            }"
                        )); 

Please try my "onReady" function like above with a fixed search term and let us know the result of the DataTables and the test label in the pdf. Thanks!

Epitello commented on Jan 4, 2021

with your "onReady" function it's work and the label appears on the PDF. But i need to use custom search about custom fields and the search methode can't do that. Thanks by advance

David Winterburn commented on Jan 5, 2021

Since "onReady" runs fine with DataTables' initial search there must be a problem between your applyFilters function and your pdf view. How about a test using your web view as your pdf view:

require_once "SalesExport.php";
$report = new SalesExport;

$report->run()
->export('SalesExport') //use your web view as pdf view to see if initial search works
->pdf(array(
    "format"=>"A4",
    "orientation"=>"portrait",
    //"zoom"=>2
))
->toBrowser("sales_by_country.pdf"); 

If it still doesn't work, copy your applyFilters function content directly to the "onReady" function, use a fixed search to make sure it works first. Then add your input values one by one to see which one breaks the function, i.e debugging.

Epitello commented on Jan 7, 2021

i don't have any search in my function, i compare value of a column with a fixed value and it doesn't work. i send you the onReady function

"onReady" => "function(){
                    //récupère le tableau voulu
                    let table = $('#globalTable').DataTable()
                    
                    //fonction permettant de comparé chaque ligne du tableau avec le filtre
                    $.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            let matriculeNb = $('#matriculeNb').val()
                            let operator = $('#operator').val()
                
                            //indique quelle données utiliser pour la comparaison 
                            //(le numéro correspond au numéro de la colonne. le compte du numéro de colonne commence à partir de 0)
                            let matricule = data[2]
                
                                if(matricule > 410204){
                                    return true
                                }else{
                                    return false
                                }
                            
                        }
                    );
                    
                    table.draw()
            }"
Epitello commented on Jan 7, 2021

but it works if i don't click on export button

David Winterburn commented on Jan 8, 2021

The filter function could work on Chrome/Firefox doesn't mean it always works on the headless browser used to render the pdf. Please add semicolon at the end of each of your command. Then comment out most of your function, keep only one or two line to see if it works:

<label class='test-label'>Test label</label>
<?php
                        DataTables::create(array(
                            "name" => "tableSalesQuarterProductName",
                            "dataStore" => $this->dataStore('salesQuarterProductName'),
                            "options" => [
                                "searching" => true,
                            ],
                            "onReady" => "function(dt) {
                    //récupère le tableau voulu
                    let table = $('#globalTable').DataTable();
                    
                    //fonction permettant de comparé chaque ligne du tableau avec le filtre
                    $.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            // let matriculeNb = $('#matriculeNb').val();
                            // let operator = $('#operator').val();
                
                            // //indique quelle données utiliser pour la comparaison 
                            // //(le numéro correspond au numéro de la colonne. le compte du numéro de colonne commence à partir de 0)
                            // let matricule = data[2];
            
                            // if(matricule > 410204){
                            //     return true;
                            // }else{
                            //     return false;
                            // }
                            
                        }
                    );
                    
                    table.draw();
                                document.querySelector('.test-label').textContent = 'Test label in PDF view' + dt;
                            }"
                        ));  

If the test label is changed it means the onReady function works, then you uncomment one by one command to see which causes the funtion not to work. If the test lable is not changed, you comment more commands to make it work and see which command is bad.

Epitello commented on Jan 11, 2021

it works fine thanks. The problem was the line : "let matricule = data[2]" i have delete it. thanks for your help

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
solved

Export