jtable CRUD Operations
I am using jTable jQuery plugin for CRUD application with JSP and servlet
My requirement is that if status for record is active then it should be updatable else if status is inactive then record must not be updatable
JSP
<html>
<head>
<title>CRUD operations using jTable in J2EE</title>
<!-- Include one of jTable styles. -->
<link href="css/metro/blue/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>
<!-- validation -->
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#StudentTableContainer').jtable({
title : 'Students List',
paging:true,
pageSize:10,
sorting: true,
defaultSorting: 'studentId desc',
actions : {
listAction : '<%=request.getContextPath()%>/Controller?action=list',
createAction : '<%=request.getContextPath()%>/Controller?action=create',
updateAction : '<%=request.getContextPath()%>/Controller?action=update',
deleteAction : '<%=request.getContextPath()%>/Controller?action=delete'
},
fields : {
studentId : {
title : 'Student Id',
width : '5%',
key : true,
list : true,
edit : false,
create : true
},
name: {
title : 'Name',
width : '20%',
edit : true,
inputClass: 'validate[required]'
},
department : {
title : 'Department',
width : '10%',
edit : true,
inputClass: 'validate[required, maxSize[5]]'
},
email : {
title : 'Email',
width : '15%',
edit : true,
inputClass: 'validate[required,custom[email]]'
},
gender: {
title: 'Gender',
width: '5%',
options: { 'M': 'Male', 'F': 'Female' }
},
city: {
title: 'City',
width: '20%',
options: '<%=request.getContextPath()%>/Controller?action=getCity'
},
status: {
title: 'Status',
width: '5%',
options: {'Active':'Active','Inactive':'Inactive'}
},
birthDate: {
title: 'Birth date',
width: '25%',
type: 'date'
, displayFormat: 'yy-mm-dd'
}
},
//Initialize validation logic when a form is created
formCreated: function (event, data) {
data.form.validationEngine();
},
//Validate form when it is being submitted
formSubmitting: function (event,data) {
//data.formType:
//data.form:
//data.row:
// alert("FormType(edit or create) ="+data.formType);
if(data.formType=='edit'){
// alert("101 data.row is "+data.row.record);
}
if (!confirm(" Do you want to save the records ?")) {
return false ;
}
return data.form.validationEngine('validate');
},
//Dispose validation logic when form is closed
formClosed: function (event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
}
});
$('#StudentTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: center;">
<h4>AJAX based CRUD operations using jTable in J2ee</h4>
<div id="StudentTableContainer"></div>
</div>
<a href="jTableIndex.jsp" style="font-size: 14px">|Back|</a>
</body>
</html>
