Example of a sortable table with auto-generated filter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JSM Test Page</title>
<link rel=stylesheet type="text/css" href="../jsm-documentation.css">
<style>
body {
margin: 10px 0px 0px 10px;
background-color:#ffffff;
color: #000000;
}
#myFilter table.jsmTable td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
background-color: #FFFFFF;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
overflow: hidden;
}
</style>
<script src="jsm.js" type="text/javascript"></script>
<link rel=stylesheet type="text/css" href="css/jsm.css">
<script>
//your onSaveRow Event
function jsmOnSaveRow(table, rowIdx) {
var message="Data: \n";
var tds = table.getTds(rowIdx);
for (var tdIdx in tds) {
var td = tds[tdIdx];
if (td.getMetaData('actionCell') != 'true') message=message+"Table cell is dirty: " + td.isDirty() + " and has value: " + td.getValue() + " - selectFieldValue: " + td.getMetaData("selectFieldValue") + "\n";
}
alert(message);
table.getRow(rowIdx).setDirty(false);
}
</script>
</head>
<body>
<div id="myFilter" style="width:450px; border: 1px outset; background-color: #fcf3c6 margin-top:5px; margin-bottom:5px;">
<div id="myFilterContainer"></div>
</div>
<br><br>
<div id="myTableContainer"></div>
<script>
myTable = new JsmTable("myTableContainer", "myTable");
var headerTr = new JsmTr().addCell(new JsmTh("Last name").setAttribute("width", "150"));
headerTr.addCell(new JsmTh("First name").setAttribute("width", "150"));
headerTr.addCell(new JsmTh("Country").setAttribute("width", "150"));
myTable.setHeaderRow(headerTr);
myTable.addWidget(0, new JsmTextField()).addWidget(1, new JsmTextField()).addWidget(2, new JsmSelectField([{'value':0, 'label':"USA"},{'value':1, 'label':"UK"},{'value':2, 'label':"Ireland"}]));
myTable.addRow(new JsmTr().addCell(new JsmTd("Kenny")).addCell(new JsmTd("John")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Kirk")).addCell(new JsmTd("Joseph")).addCell(new JsmTd("UK")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Levy")).addCell(new JsmTd("Isaac")).addCell(new JsmTd("UK")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Lowenstein")).addCell(new JsmTd("Bernard")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Dusenbery")).addCell(new JsmTd("Samuel")).addCell(new JsmTd("UK")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Eckhoff")).addCell(new JsmTd("Emilie")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Eddy")).addCell(new JsmTd("Selwyn")).addCell(new JsmTd("Ireland")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Caley")).addCell(new JsmTd("John")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Carpenter")).addCell(new JsmTd("Consuelo")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Watson")).addCell(new JsmTd("Douglas")).addCell(new JsmTd("Ireland")));
myTable.addRow(new JsmTr().addCell(new JsmTd("Widasky")).addCell(new JsmTd("Isadore")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr(new JsmTd("Runyon"), new JsmTd("Charles")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr(new JsmTd("Sachs"), new JsmTd("David")).addCell(new JsmTd("USA")));
myTable.addRow(new JsmTr(new JsmTd("Otis"), new JsmTd("James")).addCell(new JsmTd("UK")));
myTable.addRow(new JsmTr(new JsmTd("Page"), new JsmTd("Hamilton")).addCell(new JsmTd("Ireland")));
myTable.addRow(new JsmTr(new JsmTd("Getz"), new JsmTd("Louis")).addCell(new JsmTd("USA")));
myTable.sort();
myTable.render();
myTable.addFilterConfig(2, new JsmSelectField([{'value':'', 'label':"Please select..."}, {'value':0, 'label':"USA"},{'value':1, 'label':"UK"},{'value':2, 'label':"Ireland"}]), new JsmExactFilter().setIgnoreCase(false));
myTable.generateFilter('myFilterContainer', [0,1,2], 2);
</script>
</body>
</html>