Example of a sortable and pageable table with action cells to hide the data rows and to minimize the complete table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>jsm</title> <link rel=stylesheet type="text/css" href="../jsm-documentation.css"> <style> body { margin: 10px 0px 0px 10px; background-color:#ffffff; color: #000000; } </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="Here could be your RemoteCall to synchronize with the server:<br><br> Data: <br>"; 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("value") + "<br>"; } jsmAddMessage('jsmOnSaveRow Event: ' + message, 5); table.getRow(rowIdx).setDirty(false); } </script> </head> <body> <p id="jsmMessage"> </p> <br> <div id="myTableContainer"></div> <script> /* * If you look at this JavaScript-code and think it is ugly, hard to write and error prone: * 1) I think it is not too bad * 2) You are not really supposed to write it by hand. You are supposed to create * Jsm-Java objects on the server side (eg. via JsmTableUtil) put the JsmTable-object in the * request and then call the generateJavaScript() method in the JSP. */ myTable = new JsmTable("myTableContainer", "myTable"); myTable.addRowActionCell(jsmEditRowActionCell).addRowActionCell(jsmDeleteRowActionCell); myTable.addHeaderActionCell(jsmShowOnlyHeaderActionCell).addHeaderActionCell(jsmHideTableActionCell); myTable.setPageingMaxRows(5); myTable.addFooterActionCell(jsmGotoFirstPageActionCell).addFooterActionCell(jsmGotoPreviousPageActionCell).addFooterActionCell(jsmPageCounter).addFooterActionCell(jsmGotoNextPageActionCell).addFooterActionCell(jsmGotoLastPageActionCell) 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.addFooter(new JsmTr(new JsmTd(" ").setAttribute("colspan", "3"))); myTable.sort(); myTable.render(); </script> </body> </html>