Datatables a ztráta responsible po redrawControl

jedlicka
Člen | 61
+
0
-

Ahoj,

mám takový problém. Používám datatables pro vykreslení tabulky. Při reloadu stránky se vše v pořádku načte a zobrazí, včetně responsivity. Pokud ovšem provedu nějaké ajaxové volání, např. vyhledání jména v tabulce, filtrování ve sloupci, stránkování a provedu v presenteru volání $this->redrawControl('admin_tbody');, tak se ztratí responsivita (ostatní nastavení tabulky je v pořádku). Prostě změním data v tabulce, překreslím snippet admin_tbody a tabulka se roztáhne mimo obrazovku (na mobilu), takže přestane fungovat responsivita.

Děkuji za každou radu.

Martin

latte:

<table id="users" class="table table-striped table-bordered table-hover" width="100%">
    <thead n:snippet="admin_thead">
        <tr>
            <th class="hasinput" style="width:2%"></th>
            <th class="hasinput" style="width:2%">
                <input id="uid" name="uid" type="text" class="form-control" title="">
            </th>
            <th class="hasinput" style="width:2%">
                <select id="state" class="form-control" name="state" style="width:100%;" title="">
                    <option value="">Vše</option>
                    <option value="0" style="background-color: red; color: white">off</option>
                    <option value="1" style="background-color: limegreen; color: white">on</option>
                </select>
            </th>
            <th class="hasinput" style="width:7%">
                <input id="company" name="company" type="text" class="form-control" placeholder="Hledaný text"/>
            </th>
            <th class="hasinput" style="width:6%">
                <input id="name" name="name" type="text" class="form-control" placeholder="Hledaný text"/>
            </th>
            <th class="hasinput" style="width:4%">
                <input id="mail" name="mail" type="text" class="form-control" placeholder="Hledaný text"/>
            </th>
        </tr>
        <tr>
            <th data-hide="phone">#</th>
            <th data-hide="phone">ID</th>
            <th data-hide="phone">Stav</th>
            <th>Firma</th>
            <th data-hide="phone">Jméno</th>
            <th data-hide="phone">Email</th>
        </tr>
    </thead>
    <tbody n:snippet="admin_tbody">
        {foreach $users as $u}
            <tr>
                <td>{index++}</td>
                <td>{$u->id}</td>
                <td>{if $u->state}</td>
                <td>{$u->company}</td>
                <td>{$u->name}</td>
                <td>{$u->email}</td>
            </tr>
        {/foreach}
    </tbody>
</table>

<script>

    $(document).ready(function () {

        $('#users').DataTable(
                {
                    "order": [[0, "desc"]],
                    "pageLength": 15,
                    responsive: true
                }
        );


		$("input#company").change(function () {
            $.nette.ajax({
                url: "?do=usersSort&find=company",
                type: 'GET',
                data: { text: $("input#company").val()},
                contentType: 'application/json;charset=UTF-8'
            });
        });
        $("input#name").change(function () {
            $.nette.ajax({
                url: "?do=usersSort&find=name",
                type: 'GET',
                data: { text: $("input#name").val()},
                contentType: 'application/json;charset=UTF-8'
            });
        });
        $("select#state").change(function () {
            $.nette.ajax({
                url: "?do=usersSort&find=state",
                type: 'GET',
                data: { text: $("select#state").val()},
                contentType: 'application/json;charset=UTF-8'
            });
        });

    });

</script>

presenter:

<?php
public function handleUsersSort()
    {
        if ($this->isAjax()) {
            ...
            $this->template->users = $users;

            $this->redrawControl('admin_tbody');
        }
    }

?>
dms
Člen | 87
+
+1
-

Hadam ze nejspise po prekreleni snippetu musis znovu reinitrout DataTable protoze se ti vymeni html. Kazdopadne DataTable ma urcite svoje vlastni razeni a nebo uplne nejlepe pouzit jako data source json pres ajax. Predpokladam tedy ze pouzivas https://datatables.net – je to tam vse v dokumentaci. Vypisovat tabulky o 10000 radcich a pak je zpracovavat javascriptem je velky spatny