https://www.thischurch.org/mod/form/table.js

1$(document).ready(function() {
2	$('.pPrev').click(function() { return movePage($(this).closest('table'), -1); });
3	$('.pNext').click(function() { return movePage($(this).closest('table'), +1); });
4});
5
6function movePage($table, direction) {
7	var numPerPage = $table.data('numperpage');
8	var numRows = $table.find('tbody tr').length;
9	var newRow = $table.data('row')+(numPerPage*direction);
10
11	if( newRow > 1 ) { $table.find('.pPrev').show(); } else { $table.find('.pPrev').hide(); }
12	if( newRow+numPerPage <= numRows ) { $table.find('.pNext').show(); } else { $table.find('.pNext').hide(); }
13
14	$table.find('tbody tr').hide().slice(newRow, newRow+numPerPage).show();
15	$table.data('row', newRow).find('.pStatus').html((newRow+1) + " - " + Math.min(numRows,newRow+numPerPage));
16	return false;
17}
18
19
20//-----------------------------------------------------------------------------
21// sortTable(id, col, rev)
22//
23//  id  - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted.
24//  col - Index of the column to sort, 0 = first column, 1 = second column,
25//        etc.
26//  rev - If true, the column is sorted in reverse (descending) order
27//        initially.
28//
29// Note: the team name column (index 1) is used as a secondary sort column and
30// always sorted in ascending order.
31//-----------------------------------------------------------------------------
32
33function sortTable(id, col, rev) {
34
35  // Get the table or table section to sort.
36  var tblEl = document.getElementById(id);
37
38  // The first time this function is called for a given table, set up an
39  // array of reverse sort flags.
40  if (tblEl.reverseSort == null) {
41    tblEl.reverseSort = new Array();
42    // Also, assume the team name column is initially sorted.
43    tblEl.lastColumn = 1;
44  }
45
46  // If this column has not been sorted before, set the initial sort direction.
47  if (tblEl.reverseSort[col] == null)
48    tblEl.reverseSort[col] = rev;
49
50  // If this column was the last one sorted, reverse its sort direction.
51  if (col == tblEl.lastColumn)
52    tblEl.reverseSort[col] = !tblEl.reverseSort[col];
53
54  // Remember this column as the last one sorted.
55  tblEl.lastColumn = col;
56
57  // Set the table display style to "none" - necessary for Netscape 6 
58  // browsers.
59  var oldDsply = tblEl.style.display;
60  tblEl.style.display = "none";
61
62  // Sort the rows based on the content of the specified column using a
63  // selection sort.
64
65  var tmpEl;
66  var i, j;
67  var minVal, minIdx;
68  var testVal;
69  var cmp;
70
71  for (i = 0; i < tblEl.rows.length - 1; i++) {
72
73    // Assume the current row has the minimum value.
74    minIdx = i;
75    minVal = getTextValue(tblEl.rows[i].cells[col], true);
76
77    // Search the rows that follow the current one for a smaller value.
78    for (j = i + 1; j < tblEl.rows.length; j++) {
79      testVal = getTextValue(tblEl.rows[j].cells[col], true);
80      cmp = compareValues(minVal, testVal);
81      // Negate the comparison result if the reverse sort flag is set.
82      if (tblEl.reverseSort[col])
83        cmp = -cmp;
84      // Sort by the second column (team name) if those values are equal.
85      if (cmp == 0 && col != 1)
86        cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1], true),
87                            getTextValue(tblEl.rows[j].cells[1]), true);
88      // If this row has a smaller value than the current minimum, remember its
89      // position and update the current minimum value.
90      if (cmp > 0) {
91        minIdx = j;
92        minVal = testVal;
93      }
94    }
95
96    // By now, we have the row with the smallest value. Remove it from the
97    // table and insert it before the current row.
98    if (minIdx > i) {
99      tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
100      tblEl.insertBefore(tmpEl, tblEl.rows[i]);
101    }
102  }
103
104  // Make it look pretty.
105  makePretty(tblEl, col);
106
107  // Restore the table's display style.
108  tblEl.style.display = oldDsply;
109
110  return false;
111}
112
113//-----------------------------------------------------------------------------
114// Functions to get and compare values during a sort.
115//-----------------------------------------------------------------------------
116
117// This code is necessary for browsers that don't reflect the DOM constants
118// (like IE).
119if (document.ELEMENT_NODE == null) {
120  document.ELEMENT_NODE = 1;
121  document.TEXT_NODE = 3;
122}
123
124function getTextValue(el, base) {
125
126  var i;
127  var s;
128  if( base == true && el.childNodes.length > 0 && 
129  		el.childNodes[0].nodeType == document.COMMENT_NODE ) { 
130  		return el.childNodes[0].nodeValue; 
131  }
132  
133
134  // Find and concatenate the values of all text nodes contained within the
135  // element.
136  s = "";
137  for (i = 0; i < el.childNodes.length; i++)
138    if (el.childNodes[i].nodeType == document.TEXT_NODE)
139      s += el.childNodes[i].nodeValue;
140    else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
141             el.childNodes[i].tagName == "BR")
142      s += " ";
143    else
144      // Use recursion to get text within sub-elements.
145      s += getTextValue(el.childNodes[i], false);
146
147  return normalizeString(s);
148}
149
150function compareValues(v1, v2) {
151  var f1, f2;
152
153  // If the values are numeric, convert them to floats.
154
155  f1 = parseFloat(v1);
156  f2 = parseFloat(v2);
157  if (!isNaN(f1) && !isNaN(f2)) {
158    v1 = f1;
159    v2 = f2;
160  }
161
162  // Compare the two values.
163  if (v1 == v2)
164    return 0;
165  if (v1 > v2)
166    return 1
167  return -1;
168}
169
170// Regular expressions for normalizing white space.
171var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
172var whtSpMult = new RegExp("\\s\\s+", "g");
173
174function normalizeString(s) {
175
176  s = s.replace(whtSpMult, " ");  // Collapse any multiple whites space.
177  s = s.replace(whtSpEnds, "");   // Remove leading or trailing white space.
178
179  return s;
180}
181
182//-----------------------------------------------------------------------------
183// Functions to update the table appearance after a sort.
184//-----------------------------------------------------------------------------
185
186// Style class names.
187var rowClsNm = "alternateRow";
188var colClsNm = "sortedColumn";
189
190// Regular expressions for setting class names.
191var rowTest = new RegExp(rowClsNm, "gi");
192var colTest = new RegExp(colClsNm, "gi");
193
194function makePretty(tblEl, col) {
195  var i, j;
196  var rowEl, cellEl;
197
198  // Set style classes on each row to alternate their appearance.
199  for (i = 0; i < tblEl.rows.length; i++) {
200   rowEl = tblEl.rows[i];
201   rowEl.className = rowEl.className.replace(rowTest, "");
202    if (i % 2 != 0)
203      rowEl.className += " " + rowClsNm;

204    rowEl.className = normalizeString(rowEl.className);
205    // Set style classes on each column (other than the name column) to
206    // highlight the one that was sorted.
207    for (j = 2; j < tblEl.rows[i].cells.length; j++) {
208      cellEl = rowEl.cells[j];
209      cellEl.className = cellEl.className.replace(colTest, "");
210      if (j == col)
211        cellEl.className += " " + colClsNm;
212      cellEl.className = normalizeString(cellEl.className);
213    }
214  }
215
216  // Find the table header and highlight the column that was sorted.
217  var el = tblEl.parentNode.tHead;
218  rowEl = el.rows[el.rows.length - 1];
219  // Set style classes for each column as above.
220  for (i = 2; i < rowEl.cells.length; i++) {
221    cellEl = rowEl.cells[i];
222    cellEl.className = cellEl.className.replace(colTest, "");
223    // Highlight the header of the sorted column.
224    if (i == col)
225      cellEl.className += " " + colClsNm;
226      cellEl.className = normalizeString(cellEl.className);
227  }
228
229}