KoolReport's Forum

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

Trying to add styling to a datatable any help is appreciated. #3123

Closed Jordan Taylor opened this topic on on Aug 18, 2023 - 1 comments

Jordan Taylor commented on Aug 18, 2023
<?php

    use \koolreport\widgets\koolphp\Table;
    use koolreport\core\Utility as Util;
    use koolreport\datagrid\DataTables;
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;
    use \koolreport\export\Exportable;
    use \koolreport\excel\ExcelExportable;

    function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }

    if (empty($_POST["datefrom"])) {
        $selected_date = NULL;
    } else {
        $selected_date = test_input($_POST["datefrom"]);
    }


?>

</div>

<div class="report-content">

    <div class="text-center">
        <h1>Transaction Report</h1>

        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <?php
            function addDayswithdate($date, $days){
                $date = strtotime("+".$days." days", strtotime($date));
                return date("Y-m-d", $date);
            }

            $today2 = date('yy-m-d');
            $today3 = DateTime::createFromFormat('Y-m-d', $today2);
            $today = $today3->format("d")."-".$today3->format("m")."-20".$today3->format("y");
            $today2 = "20".$today3->format("y")."-".$today3->format("m")."-".$today3->format("d");
            $prev_date = addDayswithdate($today2, -7);

            if ($selected_date != NULL) {
                $prev_date = $selected_date;
            }

            echo("<input type=\"date\" id=\"datefrom\" name=\"datefrom\" value=\"".$prev_date."\">");
            echo("<input type=\"date\" id=\"dateto\" name=\"dateto\" value=\"".$prev_date."\"><br>");

            require 'filters.php';
            echo("<br>");
            echo("<button class=\"button\" name=\"direction\" value=\"0\"><span>Preview</span></button>");
        ?>
        </form>
    </div>

    <?php
        if ($prev_date == $today2){
            $today2 = addDayswithdate($today2, +1);
        }

        DataTables::create(array(
            "excludedColumns" => array("string5"),
            "name" => "MyTable1",
            "dataStore" => $this->dataStore('sales_by_customer'),
            "cssClass" => array("table" => "table table-bordered table-hover table-striped text-center table-sm"), // Adjusted classes
            "showFooter" => true,
            "columns" => array(
                "contract" => array("visible" => false, "label" => "Contract"),
                "DONo" => array("visible" => false, "label" => "D/O"),
                "weigh_haul_name" => array("visible" => false, "label" => "Haulier"),
                "weigh_ticketno" => array("label" => "Ticket No"),
                "weigh_veh_reg" => array("label" => "Vehicle Reg"),
                "weigh_customer" => array("label" => "Customer"),
                "weigh_serial_2" => array("label" => "Serial"),
                "weigh_units" => array("label" => "Units"),
                "weigh_site" => array("label" => "Site"),
                "weigh_date_2" => array("label" => "Date", "type" => "datetime", 'format' => 'yyyy-mm-dd', "displayFormat" => "dd/mm/yy"),
                "weigh_time_2" => array("label" => "Time"),
                "weigh_nett" => array("type" => "number", "label" => "Nett(t)", "footer" => "sum", "decimals" => 2),

            ),
            "plugins" => array("Buttons", "FixedColumns", "FixedHeader", "KeyTable", "Responsive", "RowReorder", "Scroller", "SearchPanes"),
            "buttons" => array(
                array(
                    "extend" => "pdfHtml5",
                    "orientation" => "landscape",
                    "pageSize" => "A4",
                    "title" => "Transaction Report"
                ),
                "copy", "csv", "excel", "print", "colvis"
            ),
            "options" => array(
                "paging" => true,
                "pageLength" => 200,
                "searching" => true,
                "dom" => 'Bfrtip',
                "buttons" => array("copy", "csv", "excel", "pdf", "print", "colvis"),
                "width" => "80%", // Adjust the width as needed
                "style" => "margin: auto;", // Center the table
            ),
        ));
    ?>
</div>
KoolReport commented on Aug 23, 2023

May I know more what you need to change style. The easiest way to alternate css of datatables is to add extra style tag in the view:

<?php
DataTables::create([...]);
?>
<style>
**Provide overwritten css rule for datatables**
</style>

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