I am using jquery for doing pagination in jsp with jtable plugin
the following code is written in a jsp, here all the fields to be displayed in pagination are hard-coded this is working fine for getting and displaying data from a table in database which is having same columns but if i try to get data from another table where columns may differ in numbers or types it wont display the content, so i was trying to give these field name according to columns from the selected query.. I will get all the column names to this jsp as a list
like list=[Id,name,salary,Doj,Dob,Ctc];
this list may vary from table to table, so i want to give these values in the list as fields in the following code dynamically,like using something like iterator,i am completely new to jquery. Excepting some suggestions to get field values dynamically from a list
this is code of jsp which uses ajax calls to retrieve data from database
<!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 one 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">
function TxtValue()
{
var Selectedval = document.getElementById("data");
document.getElementById("name").value = Selectedval.value;
}
/************** jquery fields are hardcoded here*******************************/
$(document).ready(function() {
$('#PersonTableContainer').jtable({
title : 'Table of people',
paging : true, //Enable paging
pageSize : 10, //Set page size (default: 10)
actions : {
listAction : 'CRUD?action=list',
createAction : 'CRUD?action=create',
updateAction : 'CRUD?action=update',
deleteAction : 'CRUD?action=delete'
},
fields : {
EMPLOYEE_CODE : {
title : 'EMPLOYEE_CODE ',
key : true,
list : true,
create : true,
edit : false
},
NAME : {
title : 'NAME',
width : '30%',
edit : true
},
CC : {
title : 'CC',
width : '30%',
edit : true
},
LOADED_COST_PA : {
title : 'LOADED_COST_PA ',
width : '20%',
edit : true
},
LOADED_COST_PM : {
title : 'LOADED_COST_PM ',
width : '30%',
edit : true
},
DOJ : {
title : 'DOJ ',
width : '30%',
edit : true
},LOB : {
title : 'LOB ',
width : '30%',
edit : true
},LOADED_COST_PA : {
title : 'LOADED_COST_PA ',
width : '30%',
edit : true
},ONSITE_MANAGER : {
title : 'ONSITE_MANAGER ',
width : '30%',
edit : true
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#PersonTableContainer').jtable('load', {
name: $('#name').val(),
id: $('#id').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
// $('#PersonTableContainer').jtable('load');
/***********************************************/
$('#id').change(function(event) {
var columnName = $("select#id").val();
$.get('CRUD?action=columnFilter', {
columnName : columnName
}, function(response) {
var select = $('#data');
select.find('option').remove();
$.each(response, function(index, value) {
$('<option>').val(value).text(value).appendTo(select);
});
});
});
/*******************************************/
});
</script>
</head>
<body>
<%!
public String tablename = "";
%>
<%
HttpSession sec = request.getSession();
List columnsList=(List)sec.getAttribute("columnsList");
%>
<c:import url="manage_data.jsp" />
<br/>
<div class="filtering"
style="width: 60%; margin-right: 20%; margin-left: 20%; text-align: center;">
<form>
Search By: <select id="id" name="table">
<option selected="selected" value="default">Complete Data</option>
<c:forEach var="str" items="${columnsList}">
<option>${str}</option>
<br>
</c:forEach>
</select>
Select Data:
<select id="data" onclick ="TxtValue()" >
<option selected="selected">--NONE--</option>
<option></option>
</select>
Enter Value: <input type="text" name="name" id="name" />
<button type="submit" id="LoadRecordsButton">Load records</button>
</form>
<div id="PersonTableContainer"></div>
</div>
</body>
</html>
I have found out the way to do this ,I was posting this for reference to others who was searching for this
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ 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">
<title>Setup and Load Data to jTable using Servlets and JSP</title>
<!-- Include one 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">
<% List<String> strList = new ArrayList<String>();
strList.add("one");
strList.add("two");
strList.add("three"); %>
var jsArray = [<% for (int i = 0; i < strList.size(); i++) { %>"<%= strList.get(i) %>"<%= i + 1 < strList.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',
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields:fields
});
$('#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>