Více datových tabulek zobrazených pod sebou

U jednoho svého projektu jsem řešil vypisování více datových tabulek pod sebou. Měl jsem problém s tím, že stránkování, vyhledávání, řazení apod. se zobrazovalo jen u první tabulky a u těch dalších již ne. Na těchto stránkách jsem našel kvalitně popsané a jednoduché řešení. Pojďme si zde tedy shrnout jak na to.

JavaScript

Pro výslednou funkčnost použijeme na stránkách tyto dané zdroje JavaScript kódu:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

A tento kód:

<script type="application/javascript">
    $(document).ready(function () {
        $('table.display').DataTable();
    });
</script>

HTML

Tabulky (samozřejmě doplněné o libovolný CSS kód) pak budou v HTML kódu vypadat nějak takto:

<table id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

<table class="display" id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

<table class="display" id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

Publikováno 18.10.2017 v 06:04 | Kategorie: JavaScript

Jak na stránky umístit responzivní video

Je mnoho způsobů jak na stránky vkládat videa z Youtube, Vimeo apod. Mně se nejvíce osvědčil způsob, který jsem našel zde. Jednoduché, elegantní a samozřejmě responzivní řešení.

CSS kód

Samotný CSS kód, který k umístění videa na stránky použijeme, vypadá tedy takto:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px;
    overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML kód

Kód, který pak vložíme do stránek, se již dá jednoduše odvodit:

<div class="responsive-video">
<iframe src="https://www.youtube.com/embed/XXXX"></iframe>
</div>

Publikováno 17.10.2017 v 02:26 | Kategorie: CSS

Jak (ne)přejmenovávat prefix ve WordPressu

Pokud jste někdy potřebovali měnit prefix u tabulek v databázi, kterou používáte u webu, který používá redakční systém WordPress, tak jste možná narazili na některá uskalí. Nebo jste se dokonce dostali do stavu, že se již nedá přihlásit do administrace WordPressu a místo úspěšného přihlášení dostáváte chybu:

Sorry, you are not allowed to access this page.

To může mít mnoho příčin. Pokud jste pokročilejší uživatelé WordPressu a již jste vyloučili běžné chyby typu práva, pluginy, témata, .htaccess apod., tak se pravděpodobně bude jednat o chybu v rámci daného přejmenovávání. Níže popíši celý postup krok za krokem a čeho se vyvarovat.

Přejmenování prefixu krok za krokem

  1. nejprve přejmenujeme prefix v souboru wp-config.php v proměnné $table_prefix
  2. přes adminer / phpmyadmin / terminál změníme prexif u tabulek v databázi
  3. přejmenujeme původní prefix v obsahu tabulek, kde se ještě vyskytuje – speciálně pak v tabulce prefix_options přejmenujeme původní_prefix_user_roles na nový_prefix_user_roles, jinak právě ztratíte práva na přihlášení

Publikováno 8.10.2017 v 12:40 | Kategorie: Wordpress