Recently, i came across a Reqirement where i need to populate datatable(i used jQuery-DataTable) by passing JSON array as input parameter.
For example , i had a JSON ajax call which returns me a JSON array data,i would like to populate datatable with this JSON array,
i know i can do AJAX call from datatable itself, but i would like to explore this option of getting data first
and then building table using this data..
[download link -- http://datatables.net/download/]
use the following link to download the all the required JS libs/files (probably you will get a complete JQuery Datatable project ..
and you need to extract the following files from the /js folder in there..)
-
dataTables.js
-
dataTables.min.js
Alongwith these you will be needing -
-
jquery.js
-
jquery-1.10.2.min.js as well(download and include ,incase you haven't uptill now..)
Ok, so here the input Text in my 'jsp' which will invoke the ajax-call onKeyUp -
<input id="organizationName" name="organizationName" onkeyup="doSearchAjaxCall();" type="text" value="" />
here's the JavaScript function which is responsible for making the ajax call.....
----------------------------------------------------------------------------------------------
Also, before jumping to script keep note of the Portlet-URL(required for the ajax call) ,
i created a resourceURL (given below) which will hit the serveResource in my PortletClass ..(you may create as per your requirement)
-- -- -- -- -- -- -- -- -- -- -- -- -- --
<
portlet:resourceURL var="searchRequestURL">
</portlet:resourceURL>
-- -- -- -- -- -- -- -- -- -- -- -- -- --
<script>
function
doSearchAjaxCall() {
// fetching various field params from the jsp..
var acbno = jQuery("#acbno").val();
var orgName = jQuery("#organizationName").val();
var field = jQuery("#field").val();
//dataType:'json',
Note: mentioning dataType in the ajax-call is note required ...only 'setContentType("application/json")' is enough [set in portlet class --see complete code below]
jQuery.ajax({
type: "POST",
url: "<%= searchRequestURL.toString() %>",
data:"acbno="+acbno+"&orgName="+orgName+"&field="+field,
error: function(data) {
alert(" inside error >>> "+data);
},
success: function(
data) {
//var stringResponse = JSON.stringify(data);
Note: Dont make the Mistake of converting the data-array into string before passing into datatable - as it requires data-array in json form only..
//alert("data stringify = >>>> "+stringResponse);
// console.log("success data>> "+data);
// pass the data-array obtained in success-fn to another js fn created -'loadDataTable()' which will futher //populate the Datatable..
loadDataTable(
data);
// custom -function Call
}
});
}
function
loadDataTable(
data){
// console.log("loadDataTable >> "+data);
$("#tableId1").dataTable().fnDestroy();
var oTable = $('#tableId1').
dataTable({
"
aaData" : data,
"
aoColumns" : [
{"sTitle" : "SammNo" },
{ "sTitle" : "OrganizationName"
},
{ "sTitle" : "Field" },
{"sTitle" : "Scope" }
]
});
}
// Also, you may add the ajax call on jQuery ready as well here...see explanation below >>>
</script>
Note:
aaData -
Note:
aoColumns -
Note : $("#tableId1").dataTable().fnDestroy(); ---bcz
Datatables cannot be reinitialised hence, need to destroy the existing datatable before poputaing again for consecutive ajax call for same datatable..
----------------------------------------------------------------------------------------------
Also, you may add the ajax call on jQuery ready as well Incase you want the datatable to be populated on page load as well...
bcz above code will populate the datatable as & when the 'onkeyup()' function is called for the input-text -'organizationName'.
----------------------------------------------------------------------------------------------------
jQuery().ready(function(){
var acbno = jQuery("#acbno").val();
var orgName = jQuery("#organizationName").val();
var field = jQuery("#field").val();
jQuery.ajax({
type: "POST",
url: "<%= searchRequestURL.toString() %>",
data:"acbno="+acbno+"&orgName="+orgName+"&field="+field,
error: function(data) {
alert(" inside error >>> "+data);
},
success: function(data) {
//console.log(" jQuery-ready >> success data>> "+data);
loadDataTable(data);
}
});
});
------------------------------------------------------------------------------------------------------------
NOTE : STRICTLY AVOID USING '
console.log();' - This gives an error saying 'console is unDefined' in most of the IE version browsers. This error often breaks the complete JavaScript used ..In my case i wasn't able to display jQuery DataTables in IE whereas it was working F9 in FF && Chrome..!!!
Though could use the same for debugging purpose OR incase the target browser for your application duznt includes IE (which is often not the case ) ;-)
