tabellio.webviews/tabellio/webviews/deputy_listform.pt

<div xmlns="http://www.w3.org/1999/xhtml">

        <form id="deputy-search">
         <div id="form-name">
          <label for="name">Nom / Prénom</label><input name="name" tal:attributes="value view/getQueryName"/>
         </div>
         <div id="form-initial">
          <label>Liste alphabétique</label>
          <div class="alphabet">
          <a href="#" class="tous active">Tous</a>
          <a class="a" href="#">A</a>
          <a class="b" href="#">B</a>
          <a class="c" href="#">C</a>
          <a class="d" href="#">D</a>
          <a class="e" href="#">E</a>
          <a class="f" href="#">F</a>
          <a class="g" href="#">G</a>
          <a class="h" href="#">H</a>
          <a class="i" href="#">I</a>
          <a class="j" href="#">J</a>
          <a class="k" href="#">K</a>
          <a class="l" href="#">L</a>
          <a class="m" href="#">M</a>
          <a class="n" href="#">N</a>
          <a class="o" href="#">O</a>
          <a class="p" href="#">P</a>
          <a class="q" href="#">Q</a>
          <a class="r" href="#">R</a>
          <a class="s" href="#">S</a>
          <a class="t" href="#">T</a>
          <a class="u" href="#">U</a>
          <a class="v" href="#">V</a>
          <a class="w" href="#">W</a>
          <a class="x" href="#">X</a>
          <a class="y" href="#">Y</a>
          <a class="z" href="#">Z</a>
          </div>
         </div>
         <div id="form-age">
          <label>Âge</label>
          <div class="age">
          <a href="#" class="tous active">Tous</a>
          <a class="m30"   href="#">- de 30</a>
          <a class="d30-40" href="#">30 à 40</a>
          <a class="d40-50" href="#">40 à 50</a>
          <a class="d50-60" href="#">50 à 60</a>
          <a class="d60-70" href="#">60 à 70</a>
          <a class="p70"   href="#">+ de 70</a>
          </div>
         </div>
         <div id="form-polgroup">
           <label>Composition politique</label>
           <div class="groupe">
           <a href="#" class="tous" tal:condition="python: view.getSelectedPolgroup()">Tous</a>
           <a href="#" class="tous active" tal:condition="python: not view.getSelectedPolgroup()">Tous</a>
           <tal:block tal:repeat="item view/getPolGroups">
           <a class="ps" href="#" tal:condition="python: view.getSelectedPolgroup() != item.id" tal:attributes="class item/id" tal:content="item/Title">PS</a>
           <a class="ps" href="#" tal:condition="python: view.getSelectedPolgroup() == item.id" tal:attributes="class string:${item/id} active" tal:content="item/Title">PS</a>
           </tal:block>
           </div>
         </div>
        </form>

        <div id="resultsbox">
          <span>…</span>
        </div>

        <table id="deputy-table" class="listing">
        <thead>
         <th class="name nosort">Nom / Prénom</th>
         <th class="polgroup">Groupe</th>
         <th class="arrond">Arrondissement</th>
         <th class="birth nosort">Naissance</th>
        </thead>
        <tbody>
        <tr tal:repeat="entry view/sortedDeputies">
         <td class="name"><a tal:attributes="href entry/id">
             <span class="lastname" tal:content="entry/lastname"/>
             <span class="firstname" tal:content="entry/firstname"/></a></td>
         <td class="polgroup">
           <span tal:condition="entry/polgroup" tal:attributes="class string:${entry/polgroup/to_object/id}" tal:content="entry/polgroup/to_object/title"></span>
         </td>
         <td class="arrond" tal:content="entry/district"></td>
         <td class="birth" tal:content="entry/formatted_birthdate"></td>
         <td style="display: none" class="agerange"><span tal:attributes="class entry/agerange"/></td>
        </tr>
        </tbody>
        </table>
        <div class="contentBottom"/>

<script type="text/javascript">
function refreshtable() {
        agerange = null;
        polgroup = null;
        initial = null;
        name = null;
        if (jq('#form-age a.active').length) {
                agerange = jq('#form-age a.active').attr('class').split(' ')[0];
                if (agerange == 'tous') { agerange = null; }
        }
        if (jq('#form-polgroup a.active').length) {
                polgroup = jq('#form-polgroup a.active').attr('class').split(' ')[0];
                if (polgroup == 'tous') { polgroup = null; }
        }
        if (jq('#form-initial a.active').length) {
                initial = jq('#form-initial a.active').attr('class').split(' ')[0];
                if (initial == 'tous') { initial = null; }
        }
        if (jq('#form-name input').val()) {
                name = jq('#form-name input').val().toLowerCase();
        } else {
                name = null;
        }
        rows = jq('#deputy-table tbody tr');
        count = 0;
        for (i=0; i < rows.length; i++) {
                row = jq(rows[i]);
                display = true;
                if (agerange && row.find('td.agerange span.'+agerange).length == 0) {
                        display = false;
                }
                if (polgroup && row.find('td.polgroup span.'+polgroup).length == 0) {
                        display = false;
                }
                if (initial) {
                        letter = row.find('td.name span.lastname').text().toLowerCase().charAt(0);
                        if (initial != letter) {
                                display = false;
                        }
                }
                if (name && name != 'null') { // hack around some string conversion
                        depname = row.find('td.name').text().toLowerCase();
                        if (depname.indexOf(name) == -1) {
                                display = false;
                        }
                }
                if (display) {
                        row.show();
                        count += 1;
                        row.removeClass('even').removeClass('odd');
                        if (count%2 == 1) {
                                row.addClass('odd');
                        } else {
                                row.addClass('even');
                        }
                } else {
                        row.hide();
                }
        }
        if (count == 0) {
                jq('#resultsbox span').text('Aucun résultat trouvé');
        } else if (count == 1) {
                jq('#resultsbox span').text('1 résultat trouvé');
        } else {
                jq('#resultsbox span').text(count + ' résultats trouvés');
        }
}

jq('#deputy-search div a').click(
        function(event) {
                jq(this).siblings().removeClass('active');
                jq(this).addClass('active');
                refreshtable();
                return false;
        });

jq('#form-name input').keyup(refreshtable);

refreshtable();

</script>
</div>