KoolReport's Forum

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

Filter #2260

Open abedalqader swedan opened this topic on on Aug 12, 2021 - 18 comments
abedalqader swedan commented on Aug 12, 2021

Dears, I hope all is well,

How can I use your filter with laravel? Also, How to use filter without reloading all page, just reloading the table?

Sebastian Morales commented on Aug 12, 2021

Pls check our Filter and SubReport examples and copy their code if you want:

https://www.koolreport.com/examples/reports/processes/filter/

https://www.koolreport.com/examples/reports/others/subreport_demo/

If you use crsf token in Laravel, pls remember to add a "_token" field to subreport's update ajax call:

<?php
    ...
            "clientEvents"=>array(
                "change"=>"function(){
                    subReport.update('customerselecting',{
                        country:$('#country').val(),
                        customer:$('#customer').val(),
                        _token:'" . csrf_token() . "' //add this _token field to update ajax call
                    });                     
                }",
            ),
abedalqader swedan commented on Aug 15, 2021

I use it with laravel. Doesn't work! Data not transfer from sub report to sub report when I use it in laravel.

Can I get how to use it with laravel?

abedalqader swedan commented on Aug 15, 2021

Please this is urgent for us!

Sebastian Morales commented on Aug 16, 2021

Pls post your report's setup and view code (only relevant part, not all of them) for us to check it for you.

abedalqader swedan commented on Aug 16, 2021

I think filtering is work.

But there is problem with the table. It loss his format after filtering.

The photos below explains what happened:

Can you help?

Sebastian Morales commented on Aug 16, 2021

Pls show the subreport code where your DataTables belongs to. Tks,

abedalqader swedan commented on Aug 16, 2021

__### select subreport code: __view: 

<?php
    use \koolreport\inputs\Select;
?>

<div class="form-group">
    <label>Select OS:</label>
    <?php
    Select::create(array(
        "name"=>"os",
        "dataStore"=>$this->dataStore("os_data"),
        "defaultOption"=>array("--"=>null),
        "dataBind"=>"OS",
        "clientEvents"=>array(
            "change"=>"function(){
                subReport.update('assetsselect',{
                    os:$('#os').val(),
                    _token:'" . csrf_token() . "'
                });
                subReport.update('listassets', {
                    OS:$('#os').val(),
                    _token:'" . csrf_token() . "'
                });
            }",
        ),
        "attributes"=>array(
            "class"=>"form-control",
        )
    ));
    ?>                
</div>

*

__DataTables view code:

__*

<?php
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\datagrid\DataTables;
?>



<h2 >Total Assets </h2><div class="border-top my-3"></div>


    <?php
    DataTables::create(array(
        "plugins" => ["Buttons", "FixedColumns", "FixedHeader", "KeyTable", "Responsive", "RowReorder", "Scroller", "SearchPanes"],
        "options" => array(
            "dom" => 'Blfrtip',
            "buttons" => [
                [
                    "extend" => 'pdfHtml5', 
                    "orientation" => "landscape",
                    "pageSize" => "A6",
                ],
                "copy", "csv", "excel", "print", "colvis"
            ],
            "searching"=>true,
            "paging" => true
        ),
        "dataStore"=>isset($this->params["OS"])?$this->dataStore("clientslists"):$this->dataStore("clientslistsmain"),
        "data"=>isset($this->params["OS"])?$this->dataStore("clientslists"):$this->dataStore("clientslistsmain"),
        

"cssClass"=>array(
    "table"=>"table table-striped table-bordered"
),
        "columns"=>array(
            "Hostname"=>array(
                "label"=>"Hostname",
            ),
                "OS"=>array(
                    "label"=>"OS",
                ),
                
            "Type"=>array(
                "label"=>"Type"
            ),
                
            "InstanceId"=>array(
                "label"=>"Instance ID"
            )
        ),
        
        "class"=>array(
            "table"=>"table table-striped"
        )
    ));
?>
Sebastian Morales commented on Aug 16, 2021

You don't need to update the self select subreport when it's changed. Pls try to comment it out:

        "clientEvents"=>array(
            "change"=>"function(){
                // subReport.update('assetsselect',{ 
                    // os:$('#os').val(),
                    // _token:'" . csrf_token() . "'
                // });
                subReport.update('listassets', {
                    OS:$('#os').val(),
                    _token:'" . csrf_token() . "'
                });
            }",

Also in your DataTables view, use "dataSource" instead of both "dataStore" and "data":

    DataTables::create(array(
        // "dataStore"=>isset($this->params["OS"])?$this->dataStore("clientslists"):$this->dataStore("clientslistsmain"),
        // "data"=>isset($this->params["OS"])?$this->dataStore("clientslists"):$this->dataStore("clientslistsmain"),
        "dataSource"=>isset($this->params["OS"])?
            (!empty($this->dataStore("clientslists")->data()) ? $this->dataStore("clientslists")->data() : array())
            :
            (!empty($this->dataStore("clientslistsmain")->data()) ? $this->dataStore("clientslistsmain")->data() : array()),
abedalqader swedan commented on Aug 16, 2021

I try it.

Doesn't work!

still have the same problem in the table!

Sebastian Morales commented on Aug 16, 2021

Would you pls check your jQuery version (run this command: $().jquery in your browser console)? Our example jQuery version is 3.2.1 which doesn't have this subreport update problem like your subreport.

abedalqader swedan commented on Aug 16, 2021

jQuery version is "3.3.1"

Sebastian Morales commented on Aug 16, 2021

Ok, this is really a hard case. Pls copy our subreport demo example code exactly:

https://www.koolreport.com/examples/reports/others/subreport_demo/

Only replace the Table widget with DataTables one and see if the problem remains. Tks,

abedalqader swedan commented on Aug 17, 2021

I try it. Doesn't work!

Same issue!

Can it be solved?

Sebastian Morales commented on Aug 18, 2021

Ok, pls open your browser dev tool (F12), tab Network -> XHR button, then change your select to update DataTables in your subreport. You should see an ajax request in dev tool's Network. Click on it and copy its response's raw data here for us to check it for you. Tks,

abedalqader swedan commented on Aug 18, 2021 
<subreport-partial>




<h2 >Total Assets </h2><div class="border-top my-3"></div>


    <krwidget widget-name='datatables611ca6ae5fe801' widget-type='koolreport/datagrid/DataTables'><table id="datatables611ca6ae5fe801" class='table table-striped table-bordered'>
    <thead>
                    <tr>
                                    <th class=''>
                        Hostname                    </th>
                                    <th class=''>
                        OS                    </th>
                                    <th class=''>
                        Type                    </th>
                                    <th class=''>
                        Instance ID                    </th>
                            </tr>
            </thead>
            <tbody>
                            <tr class=''>
                                            <td class=''>
                            ip-172-31-41-179.us-east-2.compute.internal
                        </td>
                                            <td class=''>
                            Oracle Linux 7                        </td>
                                            <td class=''>
                            Linux                        </td>
                                            <td class=''>
                            i-01cfce068a20b2c94                        </td>
                                    </tr>
                            <tr class=''>
                                            <td class=''>
                            ip-172-31-41-179.us-east-2.compute.internal
                        </td>
                                            <td class=''>
                            Oracle Linux 7                        </td>
                                            <td class=''>
                            Linux                        </td>
                                            <td class=''>
                            i-01cfce068a20b2c94                        </td>
                                    </tr>
                            <tr class=''>
                                            <td class=''>
                            ip-172-31-25-165.ec2.internal
                        </td>
                                            <td class=''>
                            Oracle Linux 7                        </td>
                                            <td class=''>
                            Linux                        </td>
                                            <td class=''>
                            i-0439cd38c4dc6ee6f                        </td>
                                    </tr>
                    </tbody>
        </table>
<script type="text/javascript">
    KoolReport.widget.init(
        {"js":["\/koolreport_assets\/421826660\/jquery.min.js",["\/koolreport_assets\/1582164994\/KRDataTables.js","\/koolreport_assets\/1582164994\/datatables.min.js",["\/koolreport_assets\/1582164994\/pagination\/input.js","\/koolreport_assets\/1582164994\/Buttons-1.6.2\/js\/dataTables.buttons.min.js","\/koolreport_assets\/1582164994\/Buttons-1.6.2\/js\/buttons.colVis.min.js","\/koolreport_assets\/1582164994\/Buttons-1.6.2\/js\/buttons.html5.min.js","\/koolreport_assets\/1582164994\/Buttons-1.6.2\/js\/buttons.print.min.js","\/koolreport_assets\/1582164994\/JSZip-2.5.0\/jszip.min.js","\/koolreport_assets\/1582164994\/pdfmake-0.1.36\/pdfmake.min.js",["\/koolreport_assets\/1582164994\/pdfmake-0.1.36\/vfs_fonts.js"],"\/koolreport_assets\/1582164994\/FixedColumns-3.3.1\/js\/dataTables.fixedColumns.min.js","\/koolreport_assets\/1582164994\/FixedHeader-3.1.7\/js\/dataTables.fixedHeader.min.js","\/koolreport_assets\/1582164994\/KeyTable-2.5.2\/js\/dataTables.keyTable.min.js","\/koolreport_assets\/1582164994\/Responsive-2.2.4\/js\/dataTables.responsive.min.js","\/koolreport_assets\/1582164994\/RowReorder-1.2.7\/js\/dataTables.rowReorder.min.js","\/koolreport_assets\/1582164994\/Scroller-2.0.2\/js\/dataTables.scroller.min.js","\/koolreport_assets\/1582164994\/SearchPanes-1.1.0\/js\/dataTables.searchPanes.min.js","\/koolreport_assets\/1582164994\/AutoFill-2.3.5\/js\/dataTables.autoFill.min.js","\/koolreport_assets\/1582164994\/ColReorder-1.5.2\/js\/dataTables.colReorder.min.js","\/koolreport_assets\/1582164994\/RowGroup-1.1.2\/js\/dataTables.rowGroup.min.js","\/koolreport_assets\/1582164994\/Select-1.3.1\/js\/dataTables.select.min.js"]]],"css":["\/koolreport_assets\/1582164994\/KRDataTables.css","\/koolreport_assets\/1582164994\/datatables.min.css","\/koolreport_assets\/1582164994\/FixedHeader-3.1.7\/css\/fixedHeader.dataTables.min.css"]},
        function() {
            
            var name = 'datatables611ca6ae5fe801';
            var dtOptions = {"searching":true,"paging":true,"dom":"Blfrtip","buttons":[{"extend":"pdfHtml5","orientation":"landscape","pageSize":"A6"},"copy","csv","excel","print","colvis"],"columnDefs":[{"targets":0,"type":"string"},{"targets":1,"type":"string"},{"targets":2,"type":"string"},{"targets":3,"type":"string"}]};
            var fastRender = 0;
            if (fastRender) {
                dtOptions.data = [{"Client_ID":"1e52109feff836bdf1ad6da04c9e17c2","Hostname":"ip-172-31-41-179.us-east-2.compute.internal\n","IP_Address":"172.31.41.179","Multi_IPS":"172.31.41.179","MAC_Address":"0a:41:95:a4:1d:ac","OS":"Oracle Linux 7","Client_Group_ID":"0","Create_Date":"2021-05-19 13:54:50","Last_Update":"2021-07-27 22:42:45","KeepAliveTime":"2021-05-19 22:53:12.700867","Type":"Linux","Technical_Owner":null,"Log_Monitoring":null,"Classification":null,"File_Integrity":null,"Malware_Protection":null,"Encryption":null,"Data_Classification":null,"Security_Policies":null,"Arch":"x86_64\n","agentless":"0","deleted":"0","Uninstall":"0","Licensed":"1","backupFim":"0","SystemDate":"2021-05-19 10:54:47\n","status":"0","AgentVersion":"1.4.7","Remoteip":"3.14.8.178","InstanceId":"i-01cfce068a20b2c94","OsName":null,"AV":"","FireWall":null,"Syslog":"0","DomainRole":null,"Leader":"0"},{"Client_ID":"73b92e1dc33473362486babe4079345a","Hostname":"ip-172-31-41-179.us-east-2.compute.internal\n","IP_Address":"172.31.41.179","Multi_IPS":"172.31.41.179","MAC_Address":"0a:41:95:a4:1d:ac","OS":"Oracle Linux 7","Client_Group_ID":"0","Create_Date":"2021-05-19 22:55:27","Last_Update":"2021-07-27 22:42:45","KeepAliveTime":"2021-05-20 09:52:01.275115","Type":"Linux","Technical_Owner":null,"Log_Monitoring":null,"Classification":null,"File_Integrity":null,"Malware_Protection":null,"Encryption":null,"Data_Classification":null,"Security_Policies":null,"Arch":"x86_64\n","agentless":"0","deleted":"0","Uninstall":"0","Licensed":"1","backupFim":"0","SystemDate":"2021-05-19 19:55:25\n","status":"0","AgentVersion":"1.4.7","Remoteip":"3.14.8.178","InstanceId":"i-01cfce068a20b2c94","OsName":null,"AV":"","FireWall":null,"Syslog":"0","DomainRole":null,"Leader":"0"},{"Client_ID":"b2b31c850a4d9ad4687a3aa981b7b9f0","Hostname":"ip-172-31-25-165.ec2.internal\n","IP_Address":"172.31.25.165","Multi_IPS":"172.31.25.165","MAC_Address":"0a:ed:e7:a2:17:f7","OS":"Oracle Linux 7","Client_Group_ID":"0","Create_Date":"2021-06-06 21:03:50","Last_Update":"2021-07-27 22:42:45","KeepAliveTime":"2021-06-06 21:14:12.742841","Type":"Linux","Technical_Owner":null,"Log_Monitoring":null,"Classification":null,"File_Integrity":null,"Malware_Protection":null,"Encryption":null,"Data_Classification":null,"Security_Policies":null,"Arch":"x86_64\n","agentless":"0","deleted":"0","Uninstall":"0","Licensed":"1","backupFim":"0","SystemDate":"2021-06-06 18:03:48\n","status":"0","AgentVersion":"1.4.10","Remoteip":"54.242.143.61","InstanceId":"i-0439cd38c4dc6ee6f","OsName":null,"AV":"","FireWall":null,"Syslog":"0","DomainRole":null,"Leader":"0"}];
            }
            var dt = window[name] = $('#' + name).DataTable(dtOptions);

            var datatables611ca6ae5fe801_data = {
                id: 'datatables611ca6ae5fe801',
                searchOnEnter: 0,
                searchMode: {"default":0},
                serverSide: 0,
                rowDetailData: dtOptions.rowDetailData,
                showColumnKeys: ["Hostname","OS","Type","InstanceId"],
                fastRender: fastRender,
                rowDetailIcon: 1,
                rowDetailSelector: '',
            };
            KRdatatables611ca6ae5fe801 = KoolReport.KRDataTables.create(
                datatables611ca6ae5fe801_data);

            
                    }
    );
</script></krwidget>    <!-- <div class="text-center">
//         <form method="post" action="export.php">
//             <input type="hidden" value="" name="customerNumber" />
//             <button class="btn btn-primary">Export to PDF</button>
//         </form>
//     </div> -->


</subreport-partial>
Sebastian Morales commented on Aug 18, 2021

I see no problem with this response. Would you mind letting us know which browser you use? Pls check this demo of ours with subreports and DataTables and let us know if it works on your browser:

https://www.koolreport.com/examples/reports/others/subreport_demo/

abedalqader swedan commented on Aug 18, 2021

I using firefox browser and google chrome browser. But, it give me the same results. demo is working, but our implementation doesn't!

Sebastian Morales commented on Aug 18, 2021

We can't replicate your problem so it's really hard to find out what the reason is. The only approach I can think of right now is commenting out all of your the css, js files in your implementation. Only keep jQuery and the subreports and see if it works. If it does then add the css, js files one by one to see which one might conflict. If after commenting out all css, js it still doesn't work you must start from scratch with a stand-alone report page or start from our example which ,as you've seen in the online demo, does work for this case:

KoolReport and Examples

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
None yet
None

Designed and built with by KoolPHP Inc.

Code licensed MIT.