Hi all, I am having problems displaying data in DataTables when using DateRangePicker for filtering. I have same example but with regular Table and it works. Examples are below

This DataTables does not work for selected dates. It does show data for default date I entered in configuration.

DataTables::create(array(
            'name' => 'DataTable1',
            // 'dataSource' => function() {
            //     return $this->src('automaker')
            //     ->query("select SifraMat, BarCode, SifArtOdDob, NazivMat, sum(kolicina) as Kolicina, sum(Iznos) as Iznos from cm_prodaja where Dobavljac = :korisnik and DatumOtprem between :start and :end group by SifraMat, BarCode, SifArtOdDob, NazivMat order by SifraMat")
            //     ->params(array(
            //         ":korisnik"=>$this->params["korisnik"],
            //         ":start"=>$this->params["dateRange"][0],
            //         ":end"=>$this->params["dateRange"][1],
            //     ));
            //     // ->query("select concat(e.first_name, ' ', e.last_name) as emp_name,
            //     // s.* from salaries s left join employees e on s.emp_no = e.emp_no");
            // },
            "dataStore"=>$this->dataStore("sumirana_prodaja"),
            //'scope' => $this->params,
            "options" => array(
                "searching" => true,
                "paging" => true,
                "colReorder" => true,
                "select"=>true,
                "order" => [],
                "ordering" => true,
                "pageLength" => 50,
            ),
            "columns"=>array(
                "SifraMat"=>array(
                    "label"=>"Šifra artikla",
                    "type"=>"text"
                ),
                "BarCode"=>array(
                    "label"=>"Barkod",
                    "type"=>"text"
                ),
                "SifArtOdDob"=>array(
                    "label"=>"Šifra u dobavljača",
                    "type"=>"text"
                ),
                "NazivMat"=>array(
                    "label"=>"Naziv artikla",
                    "type"=>"text"
                ),
                "Kolicina"=>array(
                    "label"=>"Količina",
                    "type"=>"number",
                ),
                "Iznos"=>array(
                    "label"=>"Iznos",
                    "type"=>"number",
                    "suffix"=>".00 KM",
                     "cssStyle"=>"text-align:right; font-weight: bold !important"
                )
            ),
            "showFooter"=>true,
            "serverSide"=>true,
            "themeBase"=>"bs4",
            "method"=>"post", //default method = 'get'
        ));

Here is regular basic Table which works perfectly for selected dynamic dates from date picker.

Table::create(array(
            //"dataStore"=>$data,
            "title"=>"Sumirana prodaja za dobavljača",
            "dataStore"=>$this->dataStore("sumirana_prodaja"),
            "columns"=>array(
                "SifraMat"=>array(
                    "label"=>"Šifra artikla",
                    "type"=>"text"
                ),
                "BarCode"=>array(
                    "label"=>"Barkod",
                    "type"=>"text"
                ),
                "SifArtOdDob"=>array(
                    "label"=>"Šifra u dobavljača",
                    "type"=>"text"
                ),
                "NazivMat"=>array(
                    "label"=>"Naziv artikla",
                    "type"=>"text"
                ),
                "Kolicina"=>array(
                    "label"=>"Količina",
                    "type"=>"number",
                ),
                "Iznos"=>array(
                    "label"=>"Iznos",
                    "type"=>"number",
                    "suffix"=>".00 KM",
                     "cssStyle"=>"text-align:right; font-weight: bold"
                )
            ),
            "cssClass"=>array(
                "th"=>"cssHeader",
                "tr"=>"cssItem"
            ),
            "paging"=>array(
                "pageSize"=>50,
                "pageIndex"=>0,
            ),
        ));

Can someone have a look and let me know does DataTables:: works with this DataRangePicker. Thanks in advance

Hi David, thanks for reply. I have tried what you suggested and I am getting different outputs for different data ranges which is good. The only problem (still) is that DataTables does not show output defined by Date range.

Here is full example of my View, I've commented out Table and DataTable. As you can see, DataTable is using dataStore instead dataSource, I do not know does that effect output. It also using serverSide which could maybe be a problem here.

<div class="filtriranje">  
     <!--Filter -->
            <form method="post">
                <div class="row">
                    <div class="col-md-8 offset-md-2">
                        <div class="form-group">
                        <?php
                        DateRangePicker::create(array(
                            "name"=>"dateRange",
                            // "language"=>"hr",
                            "format"=>"YYYY-MM-DD",
                        ))
                        ?>
                        </div>
                        
                        <div class="form-group text-center">
                            <button class="btn btn-success"><i class="glyphicon glyphicon-refresh"></i> Prikaži</button>
                        </div>
                    </div>
                </div>
            </form>
    <!--Filter-->
     
 
    
</div>


<div class="dashboard-tabelice">
    <h3>Info: <span class="info-poruka">R1 - Sumirana prodaja - tabelarni prikaz</span></h3><br><br>
    <?php 
            // ####### Tabelarni prikaz 
       
            // Table::create(array(
            //     //"dataStore"=>$data,
            //     "title"=>"Sumirana prodaja za dobavljača",
            //     "dataStore"=>$this->dataStore("sumirana_prodaja"),
            //     "columns"=>array(
            //         "SifraMat"=>array(
            //             "label"=>"Šifra artikla",
            //             "type"=>"text"
            //         ),
            //         "BarCode"=>array(
            //             "label"=>"Barkod",
            //             "type"=>"text"
            //         ),
            //         "SifArtOdDob"=>array(
            //             "label"=>"Šifra u dobavljača",
            //             "type"=>"text"
            //         ),
            //         "NazivMat"=>array(
            //             "label"=>"Naziv artikla",
            //             "type"=>"text"
            //         ),
            //         "Kolicina"=>array(
            //             "label"=>"Količina",
            //             "type"=>"number",
            //         ),
            //         "Iznos"=>array(
            //             "label"=>"Iznos",
            //             "type"=>"number",
            //             "suffix"=>".00 KM",
            //              "cssStyle"=>"text-align:right; font-weight: bold"
            //         )
            //     ),
            //     "cssClass"=>array(
            //         "th"=>"cssHeader",
            //         "tr"=>"cssItem"
            //     ),
            //     "paging"=>array(
            //         "pageSize"=>50,
            //         "pageIndex"=>0,
            //     ),
            // ));
            
            print_r($this->dataStore("sumirana_prodaja")->data());
            
            // DataTables::create(array(
            //     'name' => 'DataTable1',
            //     // 'dataSource' => function() {
            //     //     return $this->src('automaker')
            //     //     ->query("select SifraMat, BarCode, SifArtOdDob, NazivMat, sum(kolicina) as Kolicina, sum(Iznos) as Iznos from cm_prodaja where Dobavljac = :korisnik and DatumOtprem between :start and :end group by SifraMat, BarCode, SifArtOdDob, NazivMat order by SifraMat")
            //     //     ->params(array(
            //     //         ":korisnik"=>$this->params["korisnik"],
            //     //         ":start"=>$this->params["dateRange"][0],
            //     //         ":end"=>$this->params["dateRange"][1],
            //     //     ));
            //     //     // ->query("select concat(e.first_name, ' ', e.last_name) as emp_name,
            //     //     // s.* from salaries s left join employees e on s.emp_no = e.emp_no");
            //     // },
            //     "dataStore"=>$this->dataStore("sumirana_prodaja"),
            //     'scope' => $this->params,
            //     "options" => array(
            //         "searching" => true,
            //         "paging" => true,
            //         "colReorder" => true,
            //         "select"=>true,
            //         "order" => [],
            //         "ordering" => true,
            //         "pageLength" => 50,
            //     ),
            //     "columns"=>array(
            //         "SifraMat"=>array(
            //             "label"=>"Šifra artikla",
            //             "type"=>"text"
            //         ),
            //         "BarCode"=>array(
            //             "label"=>"Barkod",
            //             "type"=>"text"
            //         ),
            //         "SifArtOdDob"=>array(
            //             "label"=>"Šifra u dobavljača",
            //             "type"=>"text"
            //         ),
            //         "NazivMat"=>array(
            //             "label"=>"Naziv artikla",
            //             "type"=>"text"
            //         ),
            //         "Kolicina"=>array(
            //             "label"=>"Količina",
            //             "type"=>"number",
            //         ),
            //         "Iznos"=>array(
            //             "label"=>"Iznos",
            //             "type"=>"number",
            //             "suffix"=>".00 KM",
            //              "cssStyle"=>"text-align:right; font-weight: bold !important"
            //         )
            //     ),
            //     "showFooter"=>true,
            //     "serverSide"=>true,
            //     "themeBase"=>"bs4",
            //     "method"=>"post", //default method = 'get'
            // ));
    ?>
    
     <!--<form method="post">-->
    
</div>

UPDATE:

Problem is with "serverSide"=>true, which when is set to true it does not show any data in table.

Hi David, I did that and works, but bit slow as it is loading all data (I have 3-6k rows to load). Is there a chance to display loading animation or something as table gets rendered very slow and does not look good.

Thanks

Hi David, I am using Codeigniter and this approach does not work for me. I am using multiple queries defined in MyReports.php and multiple classes. Defining query in view directly does not work for me. It will require me to rewrite everything. :/ Query does not take long to process but loading data into view (browser freezing) and paging is slow as hell if I have 4-5k records. We see what new version brings

When can we expect new version? Thanks

Hi David, I've send an email, I am willing to try it :) Thanks in advance