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>