JSFiddle - React, Tailwind, and code Playground

by Farid009

HTML

<?php


require_once("inc/init.php");
include("connection.php");
//require UI configuration (nav, ribbon, etc.)
require_once("inc/config.ui.php");

/*---------------- PHP Custom Scripts ---------

 YOU CAN SET CONFIGURATION VARIABLES HERE BEFORE IT GOES TO NAV, RIBBON, ETC.
 E.G. $page_title = "Custom Title" */

$page_title = "DataTables";

/* ---------------- END PHP Custom Scripts ------------- */

//include header
//you can add your custom css in $page_css array.
//Note: all css files are inside css/ folder
$page_css[] = "your_style.css";
include("inc/header.php");

//include left panel (navigation)
//follow the tree in inc/config.ui.php
$page_nav["tables"]["sub"]["data"]["active"] = true;
include("inc/nav.php");
?>
<!-- ==========================CONTENT STARTS HERE ========================== -->
<!-- MAIN PANEL -->
<<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>

    <body>
        <style type="">
            body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}


div.container {
    min-width: 980px;
    margin: 0 auto;
}


</style>

        <div>
            <div id="main" role="main">

                <?php
                //configure ribbon (breadcrumbs) array("name"=>"url"), leave url empty if no url
                //$breadcrumbs["New Crumb"] => "http://url.com"
                $breadcrumbs["Tables"] = "";
                include("inc/ribbon.php");
                ?>

                <!-- MAIN CONTENT -->


                <!-- widget grid -->
                <section id="widget-grid" class="">

                    <!-- row -->
                    <div class="row">

                        <!-- NEW WIDGET START -->
                        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

 ...

JavaScript

// XML FILE //

<?php
include("connection.php");
@$wh_id = $_GET['wh_id'];
@$option = $_GET['option_id'];
$where = '';
$where2 = '';
if ($wh_id > 0)
    $where =  ' and o.wh_id = ' . $wh_id;
else
    $where = '';

if ($option == 0)
    $where2 = '';
elseif ($option == 1)
    $where2 = ' and ogp.ogp_num is null ';
elseif ($option == 2)
    $where2 = ' and ogp.ogp_num is not null';?>

<tbody>
<?php
    $sql = "SELECT w.wh_name, o.o_date, o.o_num, ch.ch_desc as cust_name, o.o_delieverto, ogp.ogp_num, 
                       ogp.ogp_vehiclenum,ogp.ogp_date, ogp.ogp_driver, ogp.ogp_drivercell, ogp.ogp_biltynum, ogp.ogp_carriage, 
                       ogp.ogp_carriageby
                FROM k_order as o 
                        left outer join k_ogp    as ogp on o.o_num     = ogp.o_num 
                        inner join      a_chart  as ch  on o.ch_code   = ch.ch_code 
                        left outer join a_chart  as chd on o.ch_code_d = chd.ch_code 
                        inner join      i_whouse as w   on o.wh_id     = w.wh_id 
                " . $where . $where2 . "
                    order by o.o_date";
    $result = mysqli_query($con, $sql) or die("error");
    if (mysqli_num_rows($result) > 0) 
    {
        while ($row = mysqli_fetch_assoc($result)) 
        {
            $color = $row['ogp_num'] <> "" ? "Green" : ($row['ogp_num'] == "" ?  "red" : "yellow");
    ?>  
        
            <tr>
                <td><?= $row['wh_name'] ?></td>
                <td><?= $row['o_date'] ?></td>
                <td style="color:white"><span <?php echo "style=background-color:" . $color . "" ?>><?= $row['o_num'] ?></span></td>
                <td><?= $row['cust_name'] ?></td>
                <td><?php echo nl2br($row['o_delieverto']) ?></td>
                <td><?= $row['ogp_num'] ?><br><?= $row['ogp_date'] ?></td>
                <td><?= $row['ogp_driver'] ?><br><?= $row['ogp_drivercell'] ?><br><?= $row['ogp_vehiclenum'] ?>
                    <?php
             ...