Bonjour,


J'utilise TableSorter avec symfony2 (je précise même si le problème reste le même ailleurs), je génère un tableau a partir de ma base de données triés et paginés. Tout fonctionne sauf quand le nombre d'entrées d'un ou des tableaux est trop grand et la le chargement est énorme et la page plante des fois car je vois bien que ma page affiche d'abord toutes mes entrées et les pagines seulement après. Je voudrais charger et afficher d'abord la première page de mon tableau et que le reste se charge après en ajax par exemple mais ce que j'ai essayer na rien donné apart des conflits avec tableSorter.

Code de la vue (.tiwg) :ne vous fiez pas aux noms des colonnes.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div id="tabs-1">
    <div style="overflow:auto;">
        <table id="tabs1" class="table table-bordered table-striped tablesorter">
            <thead>
                <tr>
                    <th><div style="width:150px;>1</div></th>
                    <th><div style="width:150px;">2</div></th>
                    <th>3</th>
                    <th>4</div></th>
                    <th><div style="width:40px;">5</div></th>
                    <th><div style="width:100px;">6</div></th>
                    <th><div style="width:60px;">7</div></th>
                    <th><div style="width:60px;">8</div></th>
                    <th><div style="width:150px;">9</div></th>
                    <th><div style="width:100px;">10</div></th>
                </tr>
            </thead>
            <tbody>
                {%for info in donnees['info']%}
                <tr>   
                    <td>
                        {{info[1]}}
                    </td>
                    <td>
                        {{info[2]}}
                    </td>
                    <td>
                        <div style="width:200px;overflow: hidden;text-overflow:ellipsis;">
                            {{info[3]}}
                        </div>
                    </td>
                    <td>
                        <div style="width:150px;overflow: hidden;text-overflow:ellipsis;">
                            {{info[4]}}
                        </div>
                    </td>
                    <td>
                        {{info[5]}}
                    </td>
                    <td>
                        {{info[6]|date("d/m/Y")}}
                    </td>
                    <td>
                        {{info[7]}}
                    </td>
                    <td>
                        {{info[8]}}
                    </td>
                    <td>
                        {{info[9]|date("m-d-Y h:i:s")}}
                    </td>
                    <td>
                        {{info[10]}}
                    </td>
                {%endfor%}
                </tr>
            </tbody>
        </table>
    </div>
    <form id="pager" >
        <img src="{{ asset('bundles/monBundle/js/tableSorter/images/first.png') }}" class="first"/>
        <img src="{{ asset('bundles/monBundle/js/tableSorter/images/prev.png') }}" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="{{ asset('bundles/monBundle/js/tableSorter/images/next.png') }}" class="next"/>
        <img src="{{ asset('bundles/monBundle/js/tableSorter/images/last.png') }}" class="last"/>
        <select class="pagesize">
            <option value="10">10 per page</option>
            <option value="2">2 per page</option>
            <option value="5">5 per page</option>
            <option value="15">15 per page</option>
        </select>
    </form>
</div>

Voila le script JS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 <script>
$(document).ready(function()
    {
        $("#tabs1").tablesorter()
                   .tablesorterPager({container: $("#pager")});
     });
</script>