Datatables a ztráta responsible po redrawControl
- jedlicka
- Člen | 70
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 | 93
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