1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!doctype html>
- <html>
- <head>
- <title>Search results for "{{.SearchPhrase}}"</title>
- <style>
- table, th, td {
- border: 1px solid black;
- border-collapse: collapse;
- }
- th {
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <a href="/">Search again</a>
- <table>
- <tr style='text-align: left'>
- <th>Source</th>
- <th>Translation</th>
- <th>TM</th>
- </tr>
- {{range $result := .Results}}
- {{range $segment := $result.Segments}}
- <tr style='text-align: left'>
- <td>{{$segment.Source}}</td>
- <td>{{$segment.Target}}</td>
- <td>{{$result.TMName}}</td>
- </tr>
- {{end}}
- {{end}}
- </table>
- <br/>
- <a href="/">Search again</a>
- <script>
- // borrowed from https://stackoverflow.com/a/49041392/7342859
- const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
- const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
- v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
- )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
- // do the work...
- document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
- const table = th.closest('table');
- Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
- .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
- .forEach(tr => table.appendChild(tr) );
- })));
- </script>
- </body>
- </html>
|