Using Java Struts 2 with Datatables Editor
Using Java Struts 2 with Datatables Editor
TasneemImamKhan
Posts: 4Questions: 2Answers: 0
in General
Hello everyone,
I hope you are well!
I am new to Datatables Editor and am returning to programming after a 10 year hiatus! I am having trouble sending an AJAX request to edit a row in my datatable to my struts action class. Does anyone have any idea on how to approach this issue? I would greatly appreciate it!
Here is my javascript which is inside a jsp page:
var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor( {
table: '#myTable',
idSrc: 'student_id',
bServerSide: true,
"sAjaxSource": "http://localhost:8080/MyProject/FetchCCAttendance.action?fetchData=FetchCCAttendance",
"sServerMethod" : "POST",
"bProcessing" : true,
fields: [
{ label: 'Branch', name: 'branch' },
{ label: 'First Name', name: 'studentFirstName' },
{ label: 'Last Name', name: 'studentLastName' },
{ label: 'Phone 1', name: 'phone1' },
{ label: 'Phone 2', name: 'phone2' },
{ label: 'Phone 3', name: 'phone3' },
{ label: 'Email 1', name: 'email1' },
{ label: 'Email 2', name: 'email2' },
{ label: 'Grade', name: 'grade' },
{ label: 'Total Classes Enrolled', name: 'total_classes_enrolled' },
{ label: 'Classes Remaining Transition', name: 'classes_remaining_transition' },
{ label: 'Classes Taken Transition', name: 'classes_taken_transition' },
{ label: 'Classes Remaining', name: 'classes_remaining' },
{ label: 'Package Start Date', name: 'package_start_date' },
{ label: 'Package Expiration Date', name: 'package_expiration_date' },
{ label: 'Student ID', name: 'student_id' },
{ label: 'Sales ID', name: 'sales_id' }
]
} );
$('#myTable').DataTable( {
dom: 'Bfrtip',
"ordering": false,
"pagingType": "full_numbers",
columns: [
{ data: 'branch' },
{ data: 'studentFirstName' },
{ data: 'studentLastName' },
{ data: 'phone1' },
{ data: 'phone2' },
{ data: 'phone3' },
{ data: 'email1' },
{ data: 'email2' },
{ data: 'grade' },
{ data: 'total_classes_enrolled' },
{ data: 'classes_remaining_transition' },
{ data: 'classes_taken_transition' },
{ data: 'classes_remaining' },
{ data: 'package_start_date' },
{ data: 'package_expiration_date' },
{ data: 'student_id' },
{ data: 'sales_id' }
],
select: true,
buttons: [
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
} );
});
......
<h1 class="text-center"><small class="text-muted">Common Core Student List</small></h1>
<s:if test="fetchData=='FetchCCRecords'">
<div style="margin-top: 40px; margin-right: 50px; margin-left: 50px;">
<table class="table table-hover table-striped table-bordered table-condensed" id="myTable">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Branch</th>
<th>Student First Name</th>
<th>Student Last Name</th>
<th>Phone 1</th>
<th>Phone 2</th>
<th>Phone 3</th>
<th>Email 1</th>
<th>Email 2</th>
<th>Grade</th>
<th>Total Classes Enrolled</th>
<th>Classes Remaining Transition</th>
<th>Classes Taken Transition</th>
<th>Classes Remaining</th>
<th>Package Start Date</th>
<th>Package Expiration Date</th>
<th>Student ID</th>
<th>Sales ID</th>
</tr>
</thead>
<s:iterator value="dataList">
<tr>
<td><s:property value="branch" /></td>
<td><s:property value="studentFirstName" /></td>
<td><s:property value="studentLastName" /></td>
<td><s:property value="phone1" /></td>
<td><s:property value="phone2" /></td>
<td><s:property value="phone3" /></td>
<td><s:property value="email1" /></td>
<td><s:property value="email2" /></td>
<td><s:property value="grade" /></td>
<td><s:property value="total_classes_enrolled" /></td>
<td><s:property value="classes_remaining_transition" /></td>
<td><s:property value="classes_taken_transition" /></td>
<td><s:property value="classes_remaining" /></td>
<td><s:property value="package_start_date" /></td>
<td><s:property value="package_expiration_date" /></td>
<td><s:property value="student_id" /></td>
<td><s:property value="sales_id" /></td>
</tr>
</s:iterator>
</table>
</div>
</s:if>
Here is my struts action class:
package com.myproject.struts;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class FetchCCStudentAction extends ActionSupport {
List<FetchCCStudentBean> dataList = null;
ResultSet rs = null;
String fetchData = "";
FetchCCStudentsDAO daoObj = null;
String action = "";
public String getAction() {
return action;
}
public void setAction(String action) {
this.action = action;
}
public List<FetchCCStudentBean> getDataList() {
return dataList;
}
public void setDataList(List<FetchCCStudentBean> dataList) {
this.dataList = dataList;
}
public ResultSet getRs() {
return rs;
}
public void setRs(ResultSet rs) {
this.rs = rs;
}
public String getFetchData() {
return fetchData;
}
public void setFetchData(String fetchData) {
this.fetchData = fetchData;
}
public FetchCCStudentsDAO getDaoObj() {
return daoObj;
}
public void setDaoObj(FetchCCStudentsDAO daoObj) {
this.daoObj = daoObj;
}
public String execute() throws Exception {
Map parameters = ActionContext.getContext().getParameters();
System.out.println("Map Parameters is " + parameters);
try {
if (fetchData.equals("FetchCCRecords")) {
dataList = new ArrayList<FetchCCStudentBean>();
FetchCCStudentBean dataBean = null;
rs = new FetchCCStudentsDAO().fetchData();
if (rs != null) {
while (rs.next()) {
dataBean = new FetchCCStudentBean();
dataBean.setBranch(rs.getString("branch"));
dataBean.setStudentFirstName(rs.getString("student_firstname"));
dataBean.setStudentLastName(rs.getString("student_lastname"));
dataBean.setPhone1(rs.getString("phone1"));
dataBean.setPhone2(rs.getString("phone2"));
dataBean.setPhone3(rs.getString("phone3"));
dataBean.setEmail1(rs.getString("email1"));
dataBean.setEmail2(rs.getString("email2"));
dataBean.setGrade(rs.getString("grade"));
dataBean.setTotal_classes_enrolled(rs.getString("total_classes_enrolled"));
dataBean.setClasses_remaining_transition(rs.getString("classes_remaining_transition"));
dataBean.setClasses_taken_transition(rs.getString("classes_taken_transition"));
dataBean.setClasses_remaining(rs.getString("classes_remaining"));
dataBean.setPackage_start_date(rs.getString("package_start_date"));
dataBean.setPackage_expiration_date(rs.getString("package_expiration_date"));
dataBean.setStudent_id(rs.getString("student_id"));
dataBean.setSales_id(rs.getString("sales_id"));
dataList.add(dataBean);
}//end while
}//end if
}//end if
} catch (Exception e) {
e.printStackTrace();
}
return "SUCCESS";
}
}
So I can display my data nicely in the datatable editor when I call http://localhost:8080/MyProject/FetchCCAttendance.action?fetchData=FetchCCAttendance
However, when I click on the "Edit" button in the Datatable Editor and submit my edits, nothing is sent to the server. I'm guessing my sAjaxSource value is incorrect.
Can anyone guide me in the right direction? And apologies in advance if my question is SUPER LONG!
Thank you so much!
This discussion has been closed.
Answers
Hi! I just figured it out and wanted to share the solution. Basically, I added an "ajax" field and correlated the "edit" and "delete" buttons to a url. The url points to an action class that either updates or deletes the data. Thanks all the same! Also, if there's a better way to do this, I'm all ears
Thanks for reporting back!
Colin