WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 sortabletable + multi checkbox + fixed header, stephane, August 9, 2004

Subject: sortabletable + multi checkbox + fixed header From: stephane Date: August 9, 2004

Hi everybody,

I am very interested by using the sortabletable.js (http://www.webfx.nu/dhtml/sortabletable/sortabletable.js) and I have 2 questions:

1.
I have some problems by sorting checkbox. In the demo web page (http://www.webfx.nu/dhtml/sortabletable/inputdemo.html) it is explained how to integrate checkbox. It works fine with one column, but I need two columns with checkbox data type. I tried the following code but the behavior is not what I expect :(
Can somebody help me to resolve my problem ? Probably I missed something.

2.
As I am using a large amount of data (many rows),  I would like to display only some rows, and using a scrollbar. I did it by using a div and by defining a class. However the whole table is in the div so when I scroll down the headers disapear. Is there any way to keep headers visible? like in this forum (Subject, from, Sent).

Thanks very much for your help.

stephane

Here is my code for the first question:

<table class="sort-table" id="table-1" cellspacing="0">
 <col /> <col /> <col /> <col /> <col style="text-align: right" /> <col /> <col /> 
<thead>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>String</td>
   <td title="CaseInsensitiveString">String</td>
   <td>Number</td>
   <td>Date</td>
   <td>No Sort</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
   <td>apple</td>
   <td>Strawberry</td>
   <td>45</td>
   <td>2001-03-13</td>
   <td>Item 0</td>
  </tr>
  </tbody>
</table>

<script type="text/javascript">
//<![CDATA[

/*
// override getRowValue to support CheckBox
SortableTable.prototype._getRowValue = SortableTable.prototype.getRowValue;
SortableTable.prototype.getRowValue = function (oRow, sType, nColumn) {
 if (sType == "CheckBox") {
  return oRow.cells[nColumn].firstChild.checked ? 1 : 0;
 }
 return this._getRowValue(oRow, sType, nColumn);
};
*/


var st = new SortableTable(document.getElementById("table-1"),
 ["CheckBox","CheckBox", "String", "CaseInsensitiveString", "Number", "Date", "None"]);

function getCheckBoxValue (oRow, nColumn) {
 return oRow.cells[nColumn].firstChild.checked ? 1 : 0;
};

// add new sort type and use the default compare
// also use custom getRowValue since the text content is not enough
st.addSortType("CheckBox", null, null, getCheckBoxValue);

// IE does not remember input values when moving DOM elements
if (/MSIE/.test(navigator.userAgent)) {

 // backup check box values
 st.onbeforesort = function () {
  var table = st.element;
  var inputs = table.getElementsByTagName("INPUT");
  var l = inputs.length;
  for (var i = 0; i < l; i++) {
   inputs[i].parentNode.parentNode._checked = inputs[i].checked;
  }
 };

 // restore check box values
 st.onsort = function () {
  var table = st.element;
  var inputs = table.getElementsByTagName("INPUT");
  var l = inputs.length;
  for (var i = 0; i < l; i++) {
   inputs[i].checked = inputs[i].parentNode.parentNode._checked;
  }
 };
}

//]]>
</script>

 




Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX