javascript - getting jquery fields from a List -
in below jsp code fields hard code can fields using loop list may grow dynamically
list list=[userid,firstname,lastname,email];
for every new request list may grow or shrink dynamically depends on columns of table present in database ,so there way field name without hard coding..
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <!-- include 1 of jtable styles. --> <link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" /> <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> <!-- include jtable script file. --> <script src="js/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> <script src="js/jquery.jtable.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#persontablecontainer').jtable({ title: 'table of people', paging: true, //enable paging pagesize: 10, //set page size (default: 10) actions: { listaction: 'crudcontroller?action=list', createaction:'crudcontroller?action=create', updateaction: 'crudcontroller?action=update', deleteaction: 'crudcontroller?action=delete' }, fields: { userid: { title:'s.no', key: true, list: true, create:true }, firstname: { title: 'first name', width: '30%', edit:false }, lastname: { title: 'last name', width: '30%', edit:true }, email: { title: 'email', width: '20%', edit: true } } }); $('#persontablecontainer').jtable('load'); }); </script> </head> <body> <div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;"> <div id="persontablecontainer"></div> </div> </body> </html>
this can achieved iterating on list
<% httpsession sec = request.getsession(); list<string> columnslist=(list<string>)sec.getattribute("columnslist"); %> <script type="text/javascript"> var jsarray = [<%for (int = 0; < columnslist.size(); i++) {%>"<%=columnslist.get(i)%>"<%=i + 1 < columnslist.size() ? ",":""%><%}%>]; var fields={}; var arraylength = jsarray.length; for(var i=0;i<arraylength;i++) { fields[jsarray[i]] = { title: jsarray[i], width: '40%', }; } $(document).ready(function() { $('#persontablecontainer').jtable({ title : 'table of people', paging : true, //enable paging sorting: true, //enable sorting defaultsorting: 'name asc', //set default sorting pagesize : 10, //set page size (default: 10) actions : { listaction : 'data?action=list' }, fields : fields }); //load records when page first shown $('#persontablecontainer').jtable('load'); }); </script>
Comments
Post a Comment