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 skrýt na stránkách div pomocí JavaScriptu

Není to nic složitého, jde to vygooglit, ale jak už jste na tomto blogu poznali, rád si sem dávám návody i pro sebe abych je nezapomněl a měl je při ruce. Teď tedy k tomu jak skrýt pomocí nějakého tlačítka nějakou část na stránkách ohraničenou tagem div.

Kód v JavaScriptu

Asi nemá cenu chodit okolo horké kaše a rovnou si ukážeme kompletní kód a to nejdříve v JavaScriptu, který zařídí výslednou funkcionalitu:

function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

Kód v HTML

V HTML pak kód může vypadat např. takto:

<p>
    <a href="javascript:showhide('hide')">
        <button>Skrýt/zobrazit obsah</button>
    </a>
</p>

<div id="hide" style="display:none;>
obsah, který se bude skrývat
</div>

Funkční příklad

Výsledný funkční kód funguje takto:

Publikováno 6.8.2017 v 23:36 | Kategorie: JavaScript

JavaScript: jak z WWW kopírovat text

Potřebovali jste někdy na svých webových stránkách funkci, kdy přes tlačítko označíte potřebný text a ve stejný moment se i vloží do schránky (clipboardu)? V tomto příspěvku naleznete jednoduchá a funkční řešení.

clipboard.js

Nejelegantnější řešení jsem našel na těchto stránkách. Ukažme si kód pro příklad s kopírováním textu z <textarea></textarea>:

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#text">Označ text a zkopíruj</button>
<textarea id="text">Text pro zkopírování.</textarea>

<script src="js/clipboard.min.js"></script>

<script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function (e) {
        console.log(e);
    });
    clipboard.on('error', function (e) {
        console.log(e);
    });
</script>

Funkční výsledek pak vypadá takto:


Řešení, které používá Flash

Toto jsem viděl na github.com. Je to konkrétně řešení, které používá ZeroClipboard a je pod MIT licencí (co je MIT).

Do stránek vložíme skripty:

<script type="text/javascript" src="http://domena.tld/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://domena.tld/js/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="http://domena.tld/js/clipboard.js"></script>

Výše dva uvedené skripty lze stáhnout volně z internetu, třetí skript pak z těchto mých stránek, kdy je použit následující kód:

$(document).ready(function() {
    $(".clipboard").each(function() {
        var button = $(this);
        button.attr('data-clipboard-target', button.attr('id')+'_src');
        var clip = new ZeroClipboard(
            button,
            {
                moviePath: "/swf/ZeroClipboard.swf"
            }
        );
    });
});

Pak už jen stačí vložit potřebný kód do stránek:

<button type="button" id="zmena" class="clipboard">Označ text a zkopíruj</button>
<textarea id="zmena_src">
Text pro zkopírování.
</textarea>

A výsledek pak funguje takto:


Označení bez vložení do schránky

Pokud chcete jen označit text bez toho, aby se vložil do schránky, můžeme zvolit jednodušší řešení:

<button onclick="document.getElementById('source_textarea').focus();document.getElementById('source_textarea').select()">
Označ text
</button>
<textarea id="source_textarea">
Text pro označení.
</textarea>

Výsledek pak vypadá takto:


Publikováno 13.12.2015 v 23:05 | Kategorie: JavaScript