Kategória: html

Tabuľka v HTML formulári

<table id="datova_tabulka" class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>Položka</th>
            <th>Merná jednotka</th>
            <th>Počet jednotiek</th>
            <th>Cena za jednotku (bez DPH)</th>
        </tr>
    </thead>

    <tbody>
        <?php for ($x = 0; $x <= 9; $x++) { ?>

        <tr>

            <td align="left">
                <input id="polozka" name="polozka[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="jednotka" name="jednotka[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="kusy" name="kusy[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="cena" name="cena[]" placeholder="" type="text">
            </td>
                
        </tr>

        <?php } ?>

    </tbody>
</table>

PHP View – tabuľka

<h2 class="content-subhead"><?php echo $pagetitle;?></h2>

<table id="datova_tabulka" class="pure-table pure-table-bordered">
	<thead>
		<tr>
			<th>POS</th>
			<th>Zákazník</th>
			<th>Formát</th>
			<th>Adresa</th>
		</tr>
	</thead>

	<tbody>

	<?php foreach($tabdata as $row ):?>
		<tr>
			<td align="left"><?php echo $row['pos'];?></td>
			<td align="left"><?php echo $row['nazov'];?></td>
			<td align="left"><?php echo $row['format'];?></td>
			<td align="left"><?php echo $row['ulica'];?></td>
		</tr>
	<?php endforeach;?>

	</tbody>
</table>

Klasický spôsob:

<h2 class="content-subhead"><?php echo $pagetitle;?></h2>

<table id="datova_tabulka" class="pure-table pure-table-bordered">
<thead>
	<tr>
		<th>POS</th>
		<th>Zákazník</th>
		<th>Formát</th>
		<th>Adresa</th>
	</tr>
</thead>

<tbody>
<?php
foreach($tabdata as $row ):
    echo "<tr>\n";
	
	echo "<td align='left'>" . $row['pos'] ."</td>\n";
	echo "<td align='left'>" . $row['nazov'] ."</td>\n";
	echo "<td align='left'>" . $row['format'] ."</td>\n";
	echo "<td align='left'>" . $row['ulica'] ."</td>\n";

     echo "</tr>\n";
endforeach;
?>
</tbody>
</table>

Zobrazenie foto:

//Foto
$link = $row['ID_link'];
$xdata = new sqldata();
$xdata->sql_query = "SELECT foto FROM zaznamy_xep_foto WHERE ID_link = $link";
$fotodata = $xdata->get_sql_data();

echo "<td align='left'>";
foreach($fotodata as $rowf):
	if (empty($rowf['foto'])) { echo " "; } 
	else
	{
		echo '<img src="data:image/png;base64,'.base64_encode( $rowf['foto'] ).'" height="250"/>';
		echo " ";
	}
endforeach;
echo "</td>\n";

Data tables – rozšírený filter

Riadiaci script:


<script type="text/javascript" class="init">
  $(document).ready(function() 
  {
  console.log("pause")
  $.fn.dataTable.moment( 'DD-MMM-YYYY' );
    $('#datova_tabulka').DataTable(
      {
        language: {url: 'https://cdn.datatables.net/plug-ins/1.11.4/i18n/sk.json'},
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Všetko"]],
        fixedHeader: true,
        colReorder: true,
        iDisplayLength: 50,
        order: [[ 0, "desc" ]],
        dom: 'Qlfrtip'
      });
  });
</script>

Vyžaduje moment JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>

HTML formulár

<form action="<?php echo $form_action;?>"
	class="pure-form pure-form-aligned"
	enctype="multipart/form-data"
        id="formular"
	method="post">

        <fieldset>
        <legend>Dodávateľ</legend>

                <?php
                //Dáta pre element "dropdown"
                $drp_data = new sqldata();
                $drp_data->sql_query = "SELECT navi_kod, nazov FROM dodavatelia";
                $drp_data_result = $drp_data->get_sql_data();
                //$cars = array("Volvo", "BMW", "Toyota");

                $drp = new purecss_form_control();
                $drp->label = "Supervízor";
                $drp->name = "super";
                $drp->id = "superid";
                //$drp->help_block = "Navštívená osoba 1";
                $drp->dd_value = array_column($drp_data_result, 'navi_kod'); //alebo natvrdo pole s hodnotami: array("VO", "BM", "TO");
                $drp->dd_display = array_column($drp_data_result, 'nazov'); //alebo natvrdo pole s hodnotami: array("Volvo", "BMW", "Toyota");
                $drp->required = TRUE;
                echo $drp->show_drop();
                ?>

        </fieldset>

        <fieldset>
        <legend>Osoba</legend>

                <?php
                $item = new purecss_form_control();
                $item->label = "Meno";
                $item->name = "meno";
                $item->type = "text";
                $item->required = true;
                //$item->help_block = "Neuvádzať titulani oslvenie";
                echo $item->show_input();
                ?>

                <?php
                $item = new purecss_form_control();
                $item->label = "Priezvisko";
                $item->name = "priezvisko";
                $item->type = "text";
                $item->required = true;
                //$item->help_block = "Poznámka...";
                echo $item->show_input();
                ?>

        </fieldset>


        <button class="pure-button pure-button-primary"
                type="submit"
                name="submit"
                id="submitID">
                Zaznamenať
        </button>
        <p hidden id="oznam">Pracujeme na tom...</p>
                
</form>



<script>
    //Script to prevent double form submission
    var form = document.getElementById('formular');
    var submitButton = document.getElementById('submitID');
    var oznamtext = document.getElementById('oznam');
    form.addEventListener('submit', function()
    {
        submitButton.setAttribute('hidden', 'hidden');
        submitButton.innerHTML = 'Pracujeme na tom...';
        oznamtext.removeAttribute('hidden');
    }, false);
</script>