Using the jquery datatable is a really awesome thing when you have to display search results in an already sorted and paginated and searchable and..... the features just keep going on.
I spent some hours figuring using struts2 action class to return the values using ajax json object. Thought of sharing it..
I will start with the requirements:
1. struts2 framework application - Assuming you already have an application up and running. You can get a struts framework which has the dataTable jquery being used with a servlet here
2. struts2-json-plugin-2.1.8.jar - You can get the jar from the link. Put it in the lib folder of your struts application or add it to your project build path.
3. jquery dataTable plugin from here - JQuery DataTable
After downloading the dataTable zip file you just need few of the files if you are just using a basic version of the datatable.
Here are the files you would need from the zip extract:
i. \media\css\demo_page.css
ii. \media\css\demo_table.css
iii. \media\css\demo_table_jui.css
iv. \media\js\jquery.dataTables.min.js
v. \media\js\jquery.js
vi. /examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css - Just for a theme. This is not required for a basic table.
search.jsp
struts.xml
SearchItemAction.java
BaseWebAction - To get the request which is required by the datatable
Company.java
DataRepository.java
DataTablesParamUtility.java
JQueryDataTableParamModel.java
And that would be enough. PS: The last 4 classes are from the sample workspace provided in the link above.
Start giving your page the stylish datatable in your struts framework!!!
Sample : DataTable_Struts2 - Maven based. Just run the pom and it will get the jar files required.
Hi,
ReplyDeleteI tried the example, but getting some errors.can i get the .war file of this one?? This will be a great help if i can get that. Thank you in advance.
My Mail id: arun.vc.kumar@gmail.com
Regards,
Arun
Hi,
ReplyDeleteGreat Post...
Could i get the .war file of this one on my mail id : sunil7289@gmail.com !!!
Thanks in advance !!!
If you still need the code I have uploaded it in the link http://www.filefactory.com/file/5p11aty4789n/n/DataTable.zip
DeleteNice tutorial.
ReplyDeleteI have integrated datatables with existing struts2 app.
But could not get it to work as I am getting request params null in backend.
I am unable to make out where I went wrong.
Any help will be appreciated.
Thanks.
What is the error that you are getting. I have uploaded a sample in the link http://www.filefactory.com/file/5p11aty4789n/n/DataTable.zip
DeleteIf you cannot get the issue resolved please let me know
I also have the similar issue. It returns null to sEcho after calling request.getParameter. And I needa add fnServerData to datatable so as to post the form to the action class.
DeleteHi,
ReplyDeleteI had to remove the namespace="/user" from struts.xml in my app to get this to work.
I was getting an error saying ajaxSearch action could not be mapped.
Hope this helps.
PS.
DeleteThanks for your post - works a treat!
Hi
ReplyDeleteWell this is what I was looking for. But still My requirement is something different. Would like you to help me out with this.
Here goes the problem:
I have around 1000 records and i have to display them using datatables. My Datatable possess 8 columns and is populated through aaData.
I am doing it normally with an ajax call, which is to a Struts action where my aaData gets populated , just like you did in your code:
aaData = new ArrayList>();
for (Company c : companies) {
ArrayList newArray = new ArrayList();
newArray.add(c.getAddress());
newArray.add(c.getName());
newArray.add(c.getTown());
aaData.add(newArray);
}
But the problem is, it takes lot of time to get loaded in view coz of first : I fetch all the data at once. Second : then there is more of processing involved to get the accurate view(traversing the list and all)
I have to display 25 rows in each page. This is my script :
$.ajax(
{
type : "GET",
url : "ajaxBacklog",
contentType : 'application/json',
data : null,
dataType : 'json',
success : function(json)
{
oTable = $("#backlogTable").dataTable({
"aaData" : json.aaData,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"bJQueryUI" : true,
"bRetrieve" : true,
"bPaginate" : true,
"bStateSave" : true,
"bSort" : true,
"aaSorting" : [[ 4, "desc" ]],
"iDisplayLength" : 25,
"oLanguage": {
"sProcessing": "processing",
"sEmptyTable": "No records found."
},
"aoColumns": [
{ "sClass": "alignCenter"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sType": 'date-uk', "sClass":"datecolumn"},
{ "sType": 'date-uk', "sClass":"datecolumn"},
{ "sClass": "left"},
{ "sClass": "left"}
],
"error": function() {
alert("Failed to load Data");
}
});
}
}
);
How to modify your code, so that I could achieve something like fetching 25 rows from database in first load, then at each pagination link, making the ajax call to fetch next 25 and so on. Filtering and Sorting is handled in script code i guess. Only change i need to make is server side using iTotalDisplayRecords and iTotalRecords.
but i don't know how to achieve it.
Please help me out.Thanks
Hey Good post ... it is very help full.
ReplyDeleteThanks