I am working with struts2 and ajax . I am using jboss as application server, I am calling jsp page and there from i am calling action. Can i able to call action from my ajax source directly, without calling jsp page instead of.I am loading data in table My ajax code follows
oTable=$('#tblDisplay').dataTable( {
"bAutoWidth": false,
"oLanguage": {"sSearch": "Search all columns:"},
"bJQueryUI": true,
"aLengthMenu": [[-1,10, 25, 50, 100,250],["All",10, 25, 50, 100,250]],
"sPaginationType": "full_numbers",
"iCookieDuration": 60*60*24*10,
"sCookiePrefix": "SQLFly_admin_datatable_",
"aaSorting": [],
"aaSortingFixed": [],
"asStripClasses": [ "odd", "even"],
"sScrollY": "",
"bScrollCollapse": true,
"bSortCellsTop": false,
"bDeferRender": true,
"sScrollX": "",
"sScrollXInner": "",
"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [0] }],
"bProcessing": true,
"bServerSide": false,
"iDisplayStart": iStart,
"iDisplayLength": iDisplayLength,
"bStateSave": false,
"sAjaxSource": "sPermissonData.jsp",
"fnServerData": function ( sSource, aoData, fnCallback )
{
$.ajax({"dataType": 'json', "cache":false, "type": "GET", "url": sSource, "data": aoData , "success": fnCallback } );
},
Thank You
return JSON: http://struts.apache.org/2.2.3.1/docs/json-plugin.html
return String: http://struts.apache.org/2.0.11.1/docs/how-can-we-return-a-text-string-as-the-response.html
Related
I have below code
With this I see data gets loaded first time and scroll is displayed. But when i hit scroll bar ajax call does not go to server ?
Also once ajax call goes, how to display the json data retuned from server ? I did not get any good example on google related to scrolling with
server side processing ?
function(){
oTable= $('#customerTable').dataTable({
"bJQueryUI": true,
"iDisplayStart":0,
"iDisplayLength": 10,
"bRetrieve": true,
"bServerSide": true,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [[1,'desc']],
"sScrollY": "600px",
"iScrollLoadGap": 50,
"sAjaxSource": "custom_url",
"ajax" : {
"url" : "custom_url"
"type" : "GET",
"data" : function(d) {
}
},
"aoColumns": [
{"aTargets": [0],"sName":"customer.fullName", "mData": function(response){
return response.customer.fullName;
}, "bSortable": false},
{"aTargets": [1],"sName":"updatedDate", "mData": function(response){
var updateDate = response.updatedDt;
return updateDate;
}, "bSortable": true},
]
"fnDrawCallback": function(oSettings) {
}
});
}
I want to filter 3rd column field as per write in text field. But its not work. And i also want to column filter textfield after table head.
JS
<script type="text/javascript" src="assets/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.datatables.columnfilter.js"></script>
JS
<script>
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bFilter" : true,
//"bServerSide": true,
"aaSorting": [[0,'desc']],
"aoColumns":[{ "bVisible":false, "bSearchable": false, "bSortable": false},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": rendercheckbox},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": renderucwords},
{ "bVisible":true,"bSearchable": true, "bSortable": false , "mRender": renderattachment, "sClass": "center"},
{ "bVisible":true, "bSearchable": false, "bSortable": false ,"mRender": renderaction , "sClass": "center"}],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"sAjaxSource":"<?php echo site_url('admins/promotion/getdata');?>"
} ).
columnFilter({
sPlaceHolder: "head:before",
bFilter: false,
aoColumns: [ null,
null,
{ type: "text",
},
null,
null
]
});
});
</script>
Use
$('#example').DataTable( {});
Instead of
$('#example').dataTable( {});
Also check for any javascript error in console
When Web Essentials minifies css files, it does not generate the map files.
Do I miss any special settings?
Here's my WebEssentials-Settings.json:
{
"BrowserLink": {
"CssIgnorePatterns": "bootstrap*; reset.css; normalize.css; jquery*; toastr*; foundation*; animate*; inuit*; elements*; ratchet*; hint*; flat-ui*; 960*; skeleton*",
"EnableMenu": true,
"EnablePixelPushing": true,
"ShowMenu": true
},
"CodeGen": {
"CamelCasePropertyNames": true,
"CamelCaseTypeNames": false
},
"CoffeeScript": {
"CompileOnBuild": false,
"CompileOnSave": true,
"GenerateSourceMaps": true,
"LintOnBuild": false,
"LintOnSave": true,
"LintResultLocation": "Message",
"MinifyInPlace": false,
"OutputDirectory": null,
"ShowPreviewPane": true,
"WrapClosure": true
},
"Css": {
"AdjustRelativePaths": true,
"AutoMinify": true,
"GzipMinifiedFiles": false,
"ShowBrowserTooltip": true,
"ShowInitialInherit": false,
"ShowUnsupported": true,
"SyncVendorValues": true,
"ValidateEmbedImages": true,
"ValidateOverQualifiedSelector": true,
"ValidateStarSelector": true,
"ValidateVendorSpecifics": true,
"ValidateZeroUnit": true,
"ValidationLocation": "Messages"
},
"General": {
"AllMessagesToOutputWindow": false,
"KeepImportantComments": true,
"SvgPreviewPane": true
},
"Html": {
"AutoMinify": false,
"EnableAngularValidation": true,
"EnableEnterFormat": true,
"GzipMinifiedFiles": false,
"ImageDropFormats": [
{
"HtmlFormat": "<img src=\"{0}\" alt=\"\" />",
"Name": "Simple Image Tag"
},
{
"HtmlFormat": "<div><img src=\"{0}\" alt=\"\" /></div>",
"Name": "Enclosed in Div"
},
{
"HtmlFormat": "<li id=\"item_{1}\"><img src=\"{0}\" alt=\"\" /></li>",
"Name": "Enclosed as List Item"
},
{
"HtmlFormat": "<div style=\"background-image=url('{0}')\"></div>",
"Name": "Inline CSS"
}
]
},
"JavaScript": {
"AutoMinify": true,
"BlockCommentCompletion": true,
"GenerateSourceMaps": true,
"GzipMinifiedFiles": false,
"LintOnBuild": false,
"LintOnSave": true,
"LintResultLocation": "Message"
},
"Less": {
"CompileOnBuild": false,
"CompileOnSave": true,
"EnableChainCompilation": true,
"GenerateSourceMaps": true,
"MinifyInPlace": false,
"OutputDirectory": null,
"ShowPreviewPane": true
},
"Markdown": {
"AutoHyperlink": false,
"AutoNewLines": false,
"CompileOnBuild": false,
"CompileOnSave": true,
"EncodeProblemUrlCharacters": false,
"GenerateXHTML": true,
"LinkEmails": false,
"MinifyInPlace": false,
"OutputDirectory": null,
"ShowPreviewPane": true,
"StrictBoldItalic": false
},
"Scss": {
"CompileOnBuild": false,
"CompileOnSave": true,
"EnableChainCompilation": true,
"GenerateSourceMaps": true,
"MinifyInPlace": false,
"OutputDirectory": null,
"ShowPreviewPane": true
},
"SweetJs": {
"CompileOnBuild": false,
"CompileOnSave": true,
"GenerateSourceMaps": true,
"MinifyInPlace": false,
"OutputDirectory": null,
"ShowPreviewPane": true
},
"TypeScript": {
"LintOnBuild": false,
"LintOnSave": true,
"LintResultLocation": "Message",
"ShowPreviewPane": true
}
}
When i use date_format, it returns invalid sql query
$this->load->library('Datatables');
$this->datatables->from('events');
$this->datatables-select('id,event_name,event_location,DATE_FORMAT(event_start_date,"%b %d %Y, %h:%i %p") as evs,event_type_id,event_status'); echo
$this->datatables->generate();
It returns
SELECT `id`, `event_name`, `event_location`, DATE_FORMAT(event_start_date, `"%b` %d %Y, `%h:%i` %p") as evs, `event_type_id`, `event_status` FROM (`events`) ORDER BY `event_name` asc LIMIT 10
$this->datatables-select('id,event_name,event_location,DATE_FORMAT(event_start_date,"%b %d %Y, %h:%i %p") as evs,event_type_id,event_status',FALSE);
Looking ate the github Library, he added a second parameter
The second parameter are optional whether to add backticks or not. Set it to false so that backticks ` are disabled.
There is another problem in this,
var oTable = $('#dTableEvents').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/" + PROJECT_NAME + "events/get_all_events",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ": 20,
"bAutoWidth": false,
"oLanguage": {
"sProcessing": "<img src='/" + PROJECT_NAME + "public/images/ajax-loader.gif'>",
"sLengthMenu": "Show _MENU_ Entries per Page",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ Entries per Page",
"sInfoEmpty": "Showing 0 to 0 of 0 Entries per Page",
"sInfoFiltered": "(filterred from _MAX_ total Entries per Page)"
},
"aoColumns": [
{
"mDataProp": "name",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "start_date",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "location",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "type",
"bSearchable": true,
"bSortable": true,
},
{
"fnRender": function (oObj) {
return '<img alt="" src="/' + PROJECT_NAME + 'public/images/seven-rating.png">';
},
"mDataProp": "status",
"bSearchable": false,
"bSortable": true,
},
{
"fnRender": function (oObj) {
return '<input type="button" value="Edit" class="edit-btn" onclick="location=\'/'+PROJECT_NAME+'events/edit/' + oObj.aData['id'] + '\'"> <input type="button" value="View" class="edit-btn" onclick="location=\'/'+PROJECT_NAME+'events/view/' + oObj.aData['id'] + '\'">';
},
"mDataProp": "__action",
"bSearchable": false,
"bSortable": false,
}
],
"fnInitComplete": function () {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
},
"fnDrawCallback": function()
{
$('#dTableEvents tbody td:not(:nth-last-child(-n+1))').addClass('cont-grid bdr-rt-white');
$('#dTableEvents tbody td:nth-last-child(-n+1)').addClass('cont-grid');
}
});
When i use aoColumns in this, then searching and sorting gets disabled, when i remove aaColumns, then it again starts working.
Update:
I finally found the solution for this problem. If you face the same
problem as mine, you can try visit this link
I am having problem when want to integrate Jquery DataTables with CodeIgniter Ignited-Datatables library
When I use the default DataTables sServerMethod property which is "GET", I got the json response with data from my php. However since CodeIgniter use post, I stuck at loading server data although the function return me correct json output.
So I follow this guide to change the sServerMethod to "POST". Now I dont stuck at loading server data, but I dont get the data that I need.
JSON response using sServerMethod GET (get correct json, but stuck at loading server data as in the image)
{
"sEcho": 0,
"iTotalRecords": 10,
"iTotalDisplayRecords": 10,
"aaData": [
[
"Munauwar",
"Syed",
"Mr",
"6012345678",
"0000-00-00",
"basikal"
],
[
"Mak",
"Je Wei",
"Mr",
"6012345678",
"0000-00-00",
"motor"
]
],
"sColumns": "first_name,last_name,salutation,number,birthday,group_name"}
JSON response using sServerMethod POST
{
"sEcho": 1,
"iTotalRecords": 10,
"iTotalDisplayRecords": 0,
"aaData": [],
"sColumns": "first_name,last_name,salutation,number,birthday,group_name"}
This is my javascript code
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "bootstrap",
"sAjaxSource": config.base_url + "contact/popup_contact",
"sServerMethod": "POST"
});
My function in contact controller
function popup_contact()
{
$this->datatables
->select('first_name,last_name,salutation,number,birthday,group_name')
->from('tb_contact')
->join('tb_contact_group', 'tb_contact.contact_group_id = tb_contact_group.contact_group_id');
echo $this->datatables->generate();
}
If the method above still doesn't work, then its because you have set: $config['csrf_protection'] = true; // in your config of Codeigniter
Simply add the aoData.push line first thing in your fnServerData call:
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push({name: '<?php echo $this->security->get_csrf_token_name(); ?>', value: '<?php echo $this->security->get_csrf_hash(); ?>'});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}
$('#smstable').dataTable({
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 20,
//"bPaginate": true,
"bAutoWidth": false,
"iDisplayStart": 0,
"bLengthChange": false,//for sorting 10,20,30,50 ....
"sAjaxSource": "././myadmin/ajaxadmin/dt_sms",
"aaSorting": [[ 1, "desc" ]],
"sPaginationType": "full_numbers",
"aoColumns":[
{"bSearchable": false,"bSortable": false,"bVisible": false},
{"bSearchable": true,"bSortable": true},
{"bSearchable": false,"bSortable": false},
{"bSearchable": true,"bSortable": true},
{"bSearchable": false,"bSortable": true},
{"bSearchable": false,"bSortable": false}
],
"fnServerData": function(sSource, aoData, fnCallback){
$.ajax(
{
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}
);//end ajx
// console.log(fnCallback);
}
});//end datable
Just check my code and check if you missed something. That code works very fine with me.
Anytime you got stuck on loading data from server.....it's basically cause by column set.
Just count the "aoColumns" array and make sure is exactly equal to the table head set in your view file.
It's has happened to me time and again.....and the only solution has always been the column array set.