Řazení tabulky hříšníků klikáním na záhlaví tabulky – JS na straně klienta.
authorFrantišek Kučera <franta-hg@frantovo.cz>
Wed, 11 Feb 2009 23:00:37 +0100
changeset 729bb67aa99fd
parent 6 38625daa449b
child 8 cfdfea29cfa5
Řazení tabulky hříšníků klikáním na záhlaví tabulky – JS na straně klienta.
java/HrisniciSpameri/web/index.jsp
java/HrisniciSpameri/web/souhrn.jspx
java/HrisniciSpameri/web/styl.css
java/HrisniciSpameri/web/tabulka-dolu.gif
java/HrisniciSpameri/web/tabulka-nahoru.gif
java/HrisniciSpameri/web/tridenitabulky.js
     1.1 --- a/java/HrisniciSpameri/web/index.jsp	Wed Feb 11 22:25:09 2009 +0100
     1.2 +++ b/java/HrisniciSpameri/web/index.jsp	Wed Feb 11 23:00:37 2009 +0100
     1.3 @@ -7,6 +7,7 @@
     1.4      <head>
     1.5          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     1.6          <link href="styl.css" type="text/css" rel="StyleSheet"/>
     1.7 +        <script type="text/javascript" src="tridenitabulky.js"></script>
     1.8          <title>Hříšníci spameři</title>
     1.9      </head>
    1.10      <body>
     2.1 --- a/java/HrisniciSpameri/web/souhrn.jspx	Wed Feb 11 22:25:09 2009 +0100
     2.2 +++ b/java/HrisniciSpameri/web/souhrn.jspx	Wed Feb 11 23:00:37 2009 +0100
     2.3 @@ -25,7 +25,7 @@
     2.4                      <c:otherwise>
     2.5                          <a href="${f:escapeXml(c.url)}"><c:out value="${c.nazev}"/></a>
     2.6                      </c:otherwise>
     2.7 -                </c:choose>                
     2.8 +                </c:choose>
     2.9              </li>
    2.10          </c:forEach>
    2.11      </ul>
    2.12 @@ -33,12 +33,14 @@
    2.13  
    2.14      <h2>Denní souhrn</h2>
    2.15  
    2.16 -    <table>
    2.17 +    <table class="sortable" id="seznamHrisniku">
    2.18          <thead>
    2.19 -            <td title="Jméno a příjmení">IP adresa</td>
    2.20 -            <td title="Přihlašovací jméno">Doména</td>
    2.21 -            <td title="Jestli může být předsedou komise">Počet pokusů</td>
    2.22 -            <td title="Jestli může být předsedou komise">Cíl útoku</td>
    2.23 +            <tr>
    2.24 +                <td title="Jméno a příjmení">IP adresa</td>
    2.25 +                <td title="Přihlašovací jméno">Doména</td>
    2.26 +                <td title="Jestli může být předsedou komise">Počet pokusů</td>
    2.27 +                <td title="Jestli může být předsedou komise">Cíl útoku</td>
    2.28 +            </tr>
    2.29          </thead>
    2.30          <tbody>
    2.31              <c:forEach var="s" items="${denniSouhrn.souhrn}">
     3.1 --- a/java/HrisniciSpameri/web/styl.css	Wed Feb 11 22:25:09 2009 +0100
     3.2 +++ b/java/HrisniciSpameri/web/styl.css	Wed Feb 11 23:00:37 2009 +0100
     3.3 @@ -15,5 +15,13 @@
     3.4  thead {
     3.5      background: silver;
     3.6      font-weight:bold;
     3.7 +}
     3.8  
     3.9 +thead td a {
    3.10 +    color: black;
    3.11 +    text-decoration: none;
    3.12 +}
    3.13 +
    3.14 +img {
    3.15 +    border: none;
    3.16  }
    3.17 \ No newline at end of file
     4.1 Binary file java/HrisniciSpameri/web/tabulka-dolu.gif has changed
     5.1 Binary file java/HrisniciSpameri/web/tabulka-nahoru.gif has changed
     6.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     6.2 +++ b/java/HrisniciSpameri/web/tridenitabulky.js	Wed Feb 11 23:00:37 2009 +0100
     6.3 @@ -0,0 +1,357 @@
     6.4 +addEvent(window, "load", sortables_init);
     6.5 +
     6.6 +var SORT_COLUMN_INDEX;
     6.7 +
     6.8 +function trim(myText)
     6.9 +{
    6.10 +  if (myText != null)
    6.11 +  {
    6.12 +    while (myText.indexOf(". ") != -1 || myText.indexOf(": ") != -1 || myText.indexOf("\n") != -1)
    6.13 +    {
    6.14 +      myText = myText.replace(/\. /,".");
    6.15 +      myText = myText.replace(/\: /,".");
    6.16 +      myText = myText.replace(/\s /,"");
    6.17 +    }
    6.18 +  }
    6.19 +  return myText;
    6.20 +}
    6.21 +
    6.22 +function sortables_init()
    6.23 +{
    6.24 +  predemNactiNahoru = new Image(14,11);
    6.25 +  predemNactiNahoru.src ="tabulka-nahoru.gif";
    6.26 +  predemNactiDolu = new Image(14,11);
    6.27 +  predemNactiDolu.src ="tabulka-dolu.gif";
    6.28 +
    6.29 +  if (!document.getElementsByTagName)
    6.30 +   return;
    6.31 +  tbls = document.getElementsByTagName("table");
    6.32 +  for (ti=0;ti<tbls.length;ti++)
    6.33 +  {
    6.34 +    thisTbl = tbls[ti];
    6.35 +    if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id))
    6.36 +    {
    6.37 +      ts_makeSortable(thisTbl);
    6.38 +    }
    6.39 +  }
    6.40 +}
    6.41 +
    6.42 +function ts_makeSortable(table)
    6.43 +{
    6.44 +  if (table.rows && table.rows.length > 0)
    6.45 +  {
    6.46 +    var firstRow = table.rows[0];
    6.47 +  }
    6.48 +  if (!firstRow)
    6.49 +    return;
    6.50 +  var cell;
    6.51 +  var txt;
    6.52 +  for (var i=0;i<firstRow.cells.length;i++)
    6.53 +  {
    6.54 +    cell = firstRow.cells[i];
    6.55 +    if (cell.className != 'dontsort')
    6.56 +    {
    6.57 +      txt = ts_getInnerText(cell);
    6.58 +      cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this); return false;">'+txt+'<span class="sortarrow"></span></a>';
    6.59 +    }
    6.60 +  }
    6.61 +}
    6.62 +
    6.63 +function ts_getInnerText(el)
    6.64 +{
    6.65 +  if (typeof el == "string")
    6.66 +    return el;
    6.67 +  if (typeof el == "undefined")
    6.68 +    return el;
    6.69 +  if (el.innerText)
    6.70 +    return el.innerText;  //Not needed but it is faster
    6.71 +  var str = "";
    6.72 +
    6.73 +  var cs = el.childNodes;
    6.74 +  var l = cs.length;
    6.75 +  for (var i = 0; i < l; i++)
    6.76 +  {
    6.77 +    switch (cs[i].nodeType)
    6.78 +    {
    6.79 +      case 1: //ELEMENT_NODE
    6.80 +        str += ts_getInnerText(cs[i]);
    6.81 +      break;
    6.82 +      case 3:  //TEXT_NODE
    6.83 +        str += cs[i].nodeValue;
    6.84 +      break;
    6.85 +    }
    6.86 +  }
    6.87 +  return str;
    6.88 +}
    6.89 +
    6.90 +function findValidRowInColumn(table,column)
    6.91 +{
    6.92 +  var ir = 1;
    6.93 +  for (ir=1 ;ir < table.rows.length; ir++)
    6.94 +  {
    6.95 +    if (table.rows[ir].cells[column] != undefined && table.rows[ir].cells[column].className != 'dontsort' && ts_getInnerText(table.rows[ir].cells[column]).length > 0  && ts_getInnerText(table.rows[ir].cells[column]) != " ")
    6.96 +      return ir;
    6.97 +  }
    6.98 +  return 0;
    6.99 +}
   6.100 +
   6.101 +function ts_resortTable(lnk)
   6.102 +{
   6.103 +  var span;
   6.104 +  for (var ci=0;ci<lnk.childNodes.length;ci++)
   6.105 +  {
   6.106 +    if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
   6.107 +  }
   6.108 +  var spantext = ts_getInnerText(span);
   6.109 +  var td = lnk.parentNode;
   6.110 +  var column = td.cellIndex;
   6.111 +  var table = getParent(td,'TABLE');
   6.112 +
   6.113 +  if (table.rows.length <= 1)
   6.114 +    return;
   6.115 +  var vr = findValidRowInColumn(table,column);
   6.116 +  var itm = ts_getInnerText(table.rows[vr].cells[column]);
   6.117 +
   6.118 +  if (itm.match(/^\d{1,2}[\/.\/-][ ]?\d{1,2}[\/.\/-][ ]?(\d{2}|\d{4})([ ]{0,3}\d{1,2}[:]{1}\d{1,2}([ ]{0}|[:]{1}\d{1,2}))?$/))
   6.119 +    sortfn = ts_sort_date;
   6.120 +  else if (itm.match(/^(([�L\$])|k� |K� |K� ){1}.*|.*(([�L\$])|k� |K� |K� ){1}$/))
   6.121 +    sortfn = ts_sort_currency;
   6.122 +  else if (itm.match(/^[\d\,]+$/))
   6.123 +    sortfn = ts_sort_numeric;
   6.124 +  else
   6.125 +    sortfn = ts_sort_caseinsensitive;
   6.126 +
   6.127 +  SORT_COLUMN_INDEX = column;
   6.128 +  var firstRow = new Array();
   6.129 +  var newRows = new Array();
   6.130 +  var noSortRows = new Array();
   6.131 +  firstRow[0] = table.rows[0];
   6.132 +  var tableRowIndex = 1;
   6.133 +  var newRowIndex = 0;
   6.134 +  var noSortIndex = 0;
   6.135 +  while (tableRowIndex < table.rows.length)
   6.136 +  {
   6.137 +    if (!table.rows[tableRowIndex].className || (table.rows[tableRowIndex].className && (table.rows[tableRowIndex].className != 'dontsort')))
   6.138 +    {
   6.139 +      newRows[newRowIndex] = table.rows[tableRowIndex];
   6.140 +      newRowIndex++;
   6.141 +    }
   6.142 +    else
   6.143 +    {
   6.144 +      noSortRows[noSortIndex] = table.rows[tableRowIndex];
   6.145 +      noSortIndex++;
   6.146 +    }
   6.147 +    tableRowIndex++;
   6.148 +  }
   6.149 +
   6.150 +  newRows.sort(sortfn);
   6.151 +
   6.152 +  if (span.getAttribute("sortdir") == 'down')
   6.153 +  {
   6.154 +    ARROW = '&nbsp;&nbsp;<img src=\"tabulka-dolu.gif\">';
   6.155 +    //ARROW = '&nbsp;&nbsp;&uarr;';
   6.156 +    newRows.reverse();
   6.157 +    span.setAttribute('sortdir','up');
   6.158 +  }
   6.159 +  else
   6.160 +  {
   6.161 +    //ARROW = '&nbsp;&nbsp;&darr;';
   6.162 +    ARROW = '&nbsp;&nbsp;<img src=\"tabulka-nahoru.gif\">';
   6.163 +    span.setAttribute('sortdir','down');
   6.164 +  }
   6.165 +
   6.166 +  for (i=0;i<noSortRows.length;i++)
   6.167 +  {
   6.168 +    newRows[newRows.length] = noSortRows[i];
   6.169 +  }
   6.170 +
   6.171 +  for (i=0;i<newRows.length;i++)
   6.172 +  {
   6.173 +    table.tBodies[0].appendChild(newRows[i]);
   6.174 +  }
   6.175 +
   6.176 +  var allspans = document.getElementsByTagName("span");
   6.177 +  for (var ci=0;ci<allspans.length;ci++)
   6.178 +    if (allspans[ci].className == 'sortarrow')
   6.179 +      if (getParent(allspans[ci],"table") == getParent(lnk,"table"))
   6.180 +        allspans[ci].innerHTML = '';
   6.181 +  span.innerHTML = ARROW;
   6.182 +}
   6.183 +
   6.184 +function getParent(el, pTagName)
   6.185 +{
   6.186 +  if (el == null)
   6.187 +    return null;
   6.188 +  else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
   6.189 +    return el;
   6.190 +  else
   6.191 +    return getParent(el.parentNode, pTagName);
   6.192 +}
   6.193 +
   6.194 +function ts_sort_date(a,b)
   6.195 +{
   6.196 +  var aaDateTime;
   6.197 +  if (a.cells[SORT_COLUMN_INDEX] != undefined && a.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).length > 0  && ts_getInnerText(a.cells[SORT_COLUMN_INDEX]) != " ")
   6.198 +  {
   6.199 +    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
   6.200 +    var aaList = trim(aa).split(" ");
   6.201 +    var aaDateList;
   6.202 +    var aaTimeList;
   6.203 +    if (aaList[0].indexOf(".") != -1)
   6.204 +    {// prvnĂ­ je datum
   6.205 +
   6.206 +      aaDateList = aaList[0].split(".");
   6.207 +
   6.208 +      if (aaList[1] != null && aaList[1].indexOf(":") != -1)
   6.209 +      { // rozbrakovat �as
   6.210 +        aaTimeList = aaList[1].split(":");
   6.211 +        if (aaTimeList.length > 2)
   6.212 +          aaDateTime = new Date(aaDateList[2],(aaDateList[1]-1),aaDateList[0],aaTimeList[0],aaTimeList[1],aaTimeList[2]);
   6.213 +        else
   6.214 +          aaDateTime = new Date(aaDateList[2],(aaDateList[1]-1),aaDateList[0],aaTimeList[0],aaTimeList[1],0);
   6.215 +      }
   6.216 +      else
   6.217 +      { // jenom datum
   6.218 +        aaDateTime = new Date(aaDateList[2],(aaDateList[1]-1),aaDateList[0]);
   6.219 +      }
   6.220 +    }
   6.221 +    else
   6.222 +    { // první je �as
   6.223 +      aaTimeList = aaList[1].split(":");
   6.224 +      aaDateList = aaList[0].split(".");
   6.225 +      if (aaTimeList.length > 2)
   6.226 +        aaDateTime = new Date(aaDateList[2],(aaDateList[1]-1),aaDateList[0],aaTimeList[0],aaTimeList[1],aaTimeList[2]);
   6.227 +      else
   6.228 +        aaDateTime = new Date(aaDateList[2],(aaDateList[1]-1),aaDateList[0],aaTimeList[0],aaTimeList[1],0);
   6.229 +    }
   6.230 +  }
   6.231 +  else
   6.232 +    aaDateTime = new Date(1900,0,1);
   6.233 +
   6.234 +  var bbDateTime;
   6.235 +  if (b.cells[SORT_COLUMN_INDEX] != undefined && b.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).length > 0  && ts_getInnerText(b.cells[SORT_COLUMN_INDEX]) != " ")
   6.236 +  {
   6.237 +    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
   6.238 +    var bbList = trim(bb).split(" ");
   6.239 +    var bbDateList;
   6.240 +    var bbTimeList;
   6.241 +
   6.242 +    if (bbList[0].indexOf(".") != -1)
   6.243 +    {// prvnĂ­ je datum
   6.244 +      bbDateList = bbList[0].split(".");
   6.245 +      if (bbList[1] != null && bbList[1].indexOf(":") != -1)
   6.246 +      { // rozbrakovat �as
   6.247 +        bbTimeList = bbList[1].split(":");
   6.248 +        if (bbTimeList.length > 2)
   6.249 +          bbDateTime = new Date(bbDateList[2],(bbDateList[1]-1),bbDateList[0],bbTimeList[0],bbTimeList[1],bbTimeList[2]);
   6.250 +        else
   6.251 +          bbDateTime = new Date(bbDateList[2],(bbDateList[1]-1),bbDateList[0],bbTimeList[0],bbTimeList[1],0);
   6.252 +      }
   6.253 +      else
   6.254 +      { // jenom datum
   6.255 +        bbDateTime = new Date(bbDateList[2],(bbDateList[1]-1),bbDateList[0]);
   6.256 +      }
   6.257 +    }
   6.258 +    else
   6.259 +    { // první je �as
   6.260 +      bbTimeList = bbList[1].split(":");
   6.261 +      bbDateList = bbList[0].split(".");
   6.262 +      if (bbTimeList.length > 2)
   6.263 +        bbDateTime = new Date(bbDateList[2],(bbDateList[1]-1),bbDateList[0],bbTimeList[0],bbTimeList[1],bbTimeList[2]);
   6.264 +      else
   6.265 +        bbDateTime = new Date(bbDateList[2],(bbDateList[1]-1),bbDateList[0],bbTimeList[0],bbTimeList[1],0);
   6.266 +    }
   6.267 +  }
   6.268 +  else
   6.269 +    bbDateTime = new Date(1900,0,1);
   6.270 +
   6.271 +  if (aaDateTime == bbDateTime)
   6.272 +    return 0;
   6.273 +  else if (aaDateTime < bbDateTime)
   6.274 +    return -1;
   6.275 +  else
   6.276 +    return 1;
   6.277 +}
   6.278 +
   6.279 +function ts_sort_currency(a,b)
   6.280 +{
   6.281 +  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
   6.282 +  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
   6.283 +  return parseFloat(aa) - parseFloat(bb);
   6.284 +}
   6.285 +
   6.286 +function ts_sort_numeric(a,b)
   6.287 +{
   6.288 +  if (a.cells[SORT_COLUMN_INDEX] != undefined && a.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).length > 0  && ts_getInnerText(a.cells[SORT_COLUMN_INDEX]) != " ")
   6.289 +    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
   6.290 +  else
   6.291 +    aa = 0;
   6.292 +  if (b.cells[SORT_COLUMN_INDEX] != undefined && b.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).length > 0  && ts_getInnerText(b.cells[SORT_COLUMN_INDEX]) != " ")
   6.293 +    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
   6.294 +  else
   6.295 +    bb = 0;
   6.296 +  return aa-bb;
   6.297 +}
   6.298 +
   6.299 +function char2Diacritic(transDiacritic)
   6.300 +{
   6.301 +  var charDiacritic = "�����ĚĽ�����ŠŤ�Ŏ�Ž";
   6.302 +  var numDiacritic = "ACDEILLNOORRSTUUYZ";
   6.303 +  var tmpDiacritic = "";
   6.304 +  var newDiacritic = "";
   6.305 +  transDiacritic = transDiacritic.toUpperCase();
   6.306 +  for(i=0;i<transDiacritic.length;i++)
   6.307 +  {
   6.308 +    if (charDiacritic.indexOf(transDiacritic.charAt(i))!=-1)
   6.309 +      tmpDiacritic += numDiacritic.charAt(charDiacritic.indexOf(transDiacritic.charAt(i)))+'|';
   6.310 +    else
   6.311 +     tmpDiacritic += transDiacritic.charAt(i);
   6.312 +  }
   6.313 +  return tmpDiacritic;
   6.314 +}
   6.315 +
   6.316 +function ts_sort_caseinsensitive(a,b)
   6.317 +{
   6.318 +  var aa = "_";
   6.319 +  var bb = "_";
   6.320 +  if (a.cells[SORT_COLUMN_INDEX] != undefined && a.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).length > 0)
   6.321 +    aa = char2Diacritic(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
   6.322 +  if (b.cells[SORT_COLUMN_INDEX] != undefined && b.cells[SORT_COLUMN_INDEX].className != 'dontsort' && ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).length > 0)
   6.323 +    bb = char2Diacritic(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
   6.324 +  if (aa==bb)
   6.325 +    return 0;
   6.326 +  else if (aa < bb)
   6.327 +    return -1;
   6.328 +  else
   6.329 +    return 1;
   6.330 +}
   6.331 +
   6.332 +function ts_sort_default(a,b)
   6.333 +{
   6.334 +  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
   6.335 +  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
   6.336 +  if (aa==bb)
   6.337 +    return 0;
   6.338 +  else if (aa<bb)
   6.339 +    return -1;
   6.340 +  else
   6.341 +    return 1;
   6.342 +}
   6.343 +
   6.344 +function addEvent(elm, evType, fn, useCapture)
   6.345 +{
   6.346 +  if (elm.addEventListener)
   6.347 +  {
   6.348 +    elm.addEventListener(evType, fn, useCapture);
   6.349 +    return true;
   6.350 +  }
   6.351 +  else if (elm.attachEvent)
   6.352 +  {
   6.353 +    var r = elm.attachEvent("on"+evType, fn);
   6.354 +    return r;
   6.355 +  }
   6.356 +  else
   6.357 +  {
   6.358 +    alert("Handler could not be removed");
   6.359 +  }
   6.360 +}