Hello . I heard about DataTables today.. I want to use it in my spring mvc3.0 application Can anybody tell me where to start with it???? Any sample application, help is welcome.. :)
In what way beyond this would you like to have it integrated into Spring MVC? At the moment, DataTables will work regardless of framework - it should be fairly easy to have the table initialised, as long as Spring allows a little but of custom Javascript.
I have been trying this also and I think the correct question is "How to make a jQuery AJAX call to Spring 3 MVC". This tutorial helped me getting into AJAX-jQuery-Spring:
jQuery - Spring 3 MVC
So, the AJAX call for Datatables should be something like this:
So, in Spring controller we get all the @RequestParam-s we need to understand what is datatables calling for. We just take this info and prepare de JSON response according to the call needs.
I'm testing DataTables with spring. I use the same code as above, but with the difference that I want use only the Ajaxe source (http://datatables.net/examples/data_sources/ajax.html)
My observation is, that doAjax() function is never called. I d'ont see why, Can you help me please ? (It worked well with the 0_config example, so the path tho te css and js files are correct).
Hi,
I am trying to use this code, but on return, the response i get back is just the return string.
Where and how I am going to reference the the jsp where i have the datatables defined.
Hi dsh,
let me try to help you. I'm using Spring 3 MVC as well and it worked well on my end so I hope I can give inputs.
When you said "the response i get back is just the return string", this is correct behavior.
Basically, the sequence of events should be:
1. user goes to the page that has the datatables (testDt.jsp) - the Controller that loads this page is triggered (the one with @RequestMapping(value="/testDt.jsp"))
2. the Controller loads the testDt.jsp page
3. inside testDt.jsp, datatables initializes and it triggers an ajax call to a different url where it will get its data (like from a database). So it will trigger another Controller call (with different url like @RequestMapping(value="/getData.jsp") but this will not really return a jsp page!).
4. Controller will generate the data in a form of json and returns it as string - no need to reload or redirect back to the testDt.jsp because it just needs to return the data to the already loaded testDt.jsp
Thanks anderson for the reply. That did make sense and it worked for me.
Well, I was trying to look everywhere in the internet, do we have any built in java components, to handle the server side processing/formatting of datatables data ?
If you see in the controller class, we have to customize the way we send data based on a specific table. I have to do this individually for each and every table having different contents.
Are you aware of any java utility available, which will handle this for any kind of table?
Here's a solution (http://java-juice.tumblr.com/post/13102234732/datatables-spring-mvc-integration) that will let you deal with Spring-MVC using semantic objects. So, you could write your controller such as:
[code]
@Controller
@RequestMapping(value="/api")
public class DataController {
@RequestMapping(value="/data", method= RequestMethod.POST)
public @ResponseBody
DataTablesResponse getData(@RequestBody DataTablesRequest dtReq, HttpServletResponse response) {
return new DataTablesResponse();
}
}
[/code]
Replies
http://datatables.net/usage/#prerequisites
http://datatables.net/examples/basic_init/zero_config.html
In what way beyond this would you like to have it integrated into Spring MVC? At the moment, DataTables will work regardless of framework - it should be fairly easy to have the table initialised, as long as Spring allows a little but of custom Javascript.
Allan
jQuery - Spring 3 MVC
So, the AJAX call for Datatables should be something like this:
[code]
//Somewhere in a jsp file: var contextPath = "<%= request.getContextPath() %>";
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": contextPath + "/doajax.html",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
[/code]
And the Spring 3 @Controller should be something like...
[code]
@RequestMapping(value = "/doajax.html", method = RequestMethod.GET)
public @ResponseBody String doAjax( @RequestParam int iDisplayStart,
@RequestParam int iDisplayLength,
@RequestParam int iColumns,
...,
@RequestParam String sEcho) {
//Create the response, a well formed JSON including Datatables required vars.
//e.g.
return
"{ \"sEcho\": 2," +
" \"iTotalRecords\": 2," +
" \"iTotalDisplayRecords\": 2," +
" \"aaData\": [" +
" [" +
" \"Gecko\"," +
" \"Firefox 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"Gecko\"," +
" \"Firefox 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";
}
[/code]
So, in Spring controller we get all the @RequestParam-s we need to understand what is datatables calling for. We just take this info and prepare de JSON response according to the call needs.
Hope this helps.
Allan
I'm testing DataTables with spring. I use the same code as above, but with the difference that I want use only the Ajaxe source (http://datatables.net/examples/data_sources/ajax.html)
My code is following:
The page:
[code]
@import "../utils/dataTables/css/demo_table.css";
$('#table_id').dataTable({
"bProcessing": true,
"sAjaxSource": "/doajax.do"
});
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
[/code]
The controller:
[code]
@Controller
public class ApplicationCotnroller {
@RequestMapping(value="/doajax.do", method = RequestMethod.GET)
public @ResponseBody String doAjax(
@RequestParam int iDisplayStart,
@RequestParam int iDisplayLength,
@RequestParam int iColumns,
@RequestParam String sSearch,
@RequestParam boolean bEscapeRegex,
@RequestParam boolean bSortable_,
@RequestParam boolean bSearchable_,
@RequestParam String sSearch_,
@RequestParam boolean bEscapeRegex_,
@RequestParam int iSortingCols,
@RequestParam int iSortCol_,
@RequestParam String sSortDir_,
@RequestParam String sEcho) {
//Create the response, a well formed JSON including Datatables required vars.
//e.g.
String str = "{ \"sEcho\":" + sEcho +"," +
" \"iTotalRecords\": 2," +
" \"iTotalDisplayRecords\": 2," +
" \"aaData\": [" +
" [" +
" \"Gecko\"," +
" \"Firefox 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"Gecko\"," +
" \"Firefox 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";
return str;
}
}
[/code]
My observation is, that doAjax() function is never called. I d'ont see why, Can you help me please ? (It worked well with the 0_config example, so the path tho te css and js files are correct).
I found a solution who works:
The wep-page (mine is under [i]IP[/i]/myroot/application/page.jsp):
[code]
@import "../utils/dataTables/css/demo_table.css";
var contextPath = "<%= request.getContextPath() %>";
$(document).ready(function() {
$('#table_id').dataTable( {
"bProcessing": true,
"sAjaxSource": "/myroot/application/doajax.do",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
[/code]
The controller:
[code]
@Controller
public class ApplicationCotnroller {
@RequestMapping(value="/application/doajax.do", method = RequestMethod.GET)
public @ResponseBody String doAjax() {
//Create the response, a well formed JSON including Datatables required vars.
//e.g.
String str = "{ \"sEcho\": 2 ," +
" \"iTotalRecords\": 2," +
" \"iTotalDisplayRecords\": 2," +
" \"aaData\": [" +
" [" +
" \"Gecko\"," +
" \"Firefox 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"Gecko\"," +
" \"Firefox 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";
return str;
}
}
[/code]
I not sure, if I have done every thing correct, but I hope this example will help somebody.
Greeting Festner
I am trying to use this code, but on return, the response i get back is just the return string.
Where and how I am going to reference the the jsp where i have the datatables defined.
Like yours page.jsp I have it in my testDT.jsp.
How the control is going to go back to the jsp.
Any help would be appriciated.
Thanks.
let me try to help you. I'm using Spring 3 MVC as well and it worked well on my end so I hope I can give inputs.
When you said "the response i get back is just the return string", this is correct behavior.
Basically, the sequence of events should be:
1. user goes to the page that has the datatables (testDt.jsp) - the Controller that loads this page is triggered (the one with @RequestMapping(value="/testDt.jsp"))
2. the Controller loads the testDt.jsp page
3. inside testDt.jsp, datatables initializes and it triggers an ajax call to a different url where it will get its data (like from a database). So it will trigger another Controller call (with different url like @RequestMapping(value="/getData.jsp") but this will not really return a jsp page!).
4. Controller will generate the data in a form of json and returns it as string - no need to reload or redirect back to the testDt.jsp because it just needs to return the data to the already loaded testDt.jsp
I hope that made sense. Ü
Well, I was trying to look everywhere in the internet, do we have any built in java components, to handle the server side processing/formatting of datatables data ?
If you see in the controller class, we have to customize the way we send data based on a specific table. I have to do this individually for each and every table having different contents.
Are you aware of any java utility available, which will handle this for any kind of table?
[code]
@Controller
@RequestMapping(value="/api")
public class DataController {
@RequestMapping(value="/data", method= RequestMethod.POST)
public @ResponseBody
DataTablesResponse getData(@RequestBody DataTablesRequest dtReq, HttpServletResponse response) {
return new DataTablesResponse();
}
}
[/code]
good luck!
Here is working code with JQuery
$(document).ready(function($) {
grid = $("#list")
grid.jqGrid({
url: 'products/data',
datatype: "json",
colNames: ['Product Id','Product Name'],
colModel: [
{name: 'id', index: 'id', width: 100},
{name: 'name', index: 'name', width: 120}
],
jsonReader: {repeatitems: false, id: "0"},
pager: jQuery('#pager'),
sortname: 'id',
viewrecords: true
});
grid.jqGrid('navGrid','#pager', {edit: false, add: false, del: false, search: false});
});
DataTable
$(document).ready(function () {
$("#companies").dataTable({
"bProcessing": true,
"bServerSide": true,
"url":'products/data',
"bJQueryUI": true
});
});
Much appreciated your help and comments.
Regards
acnu