Related
I post a query to elasticsearch with http request via datatable. and get json data as response. I need to bind this data in jquery datatable.
var query="";
var tableObjects = $("#logTable").DataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "http://localhost:9200/webproxylog/_search?source=",
"aoColumns": [
{"mDataProp": "clientname" ,"sortable": false },
{"mDataProp": "clientip"},
{"mDataProp": "url"},
{"mDataProp": "category"},
{"mDataProp": "respsize","sortable": true},
{"mDataProp": "loggingdate"},
{"mDataProp": "reqmethod"},
{"mDataProp": "resultcode"},
{"mDataProp": "duration"}
],
"fnServerData": function (sSource, aoData, fnCallback){
var sEcho=aoData[0].value
query = '{"from":"'+aoData[3].value+'","size":"'+aoData[4].value+'","query":{"match_all":{}},"sort": [{"loggingdate": {"order": "desc"}}]}';
$.ajax({
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": query,
"success": function(response){
debugger
var result_ = new Object();
result["sEcho"]=sEcho;
result["iTotalRecords"]=response.hits.total
result["iTotalDisplayRecords"]=response.hits.total
result["aaData"]=response['hits']['hits'].map(functio(i){return i['_source']; })});
fnCallback(result);
},
error: function (xhr, textStatus, error){
}
}});
},
"oLanguage": {
"sLengthMenu": '<select>' +
'<option value="5">5</option>' +
'<option value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'</select> Show'
},
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
},
"fnDrawCallback": function(){
},
"aaSorting": [
[2, 'asc']
],
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"iDisplayLength": 5
})
I wonder if its the way is true for this purpose.? anyway There is an error I couldn't get, in success; response is fine and I prepare result data for fncallback, but problem is when I click next pages shown data in page not changing I checked the query its fine but the problem is datatable inside here..
In normally I use same dt with php datasource everything works fine.. I create custom callback data for dt but something wrong..What should I do?
EDITED: the problem is display size.. but even it looks 5,10 or 50 it always 10 row in page and data not change with pagination
Spec: JqGrid 1.11.2
Browser : Firefox 36.0.4
I have successfully be able to load json data on to a jQGrid via Ajax technique on click of a button.
Problem : I need some extra data "userdata" to be fetched along with the json-data to be loaded on to the page other then the jQGrid.
Grid Data:-
{
"total":"1",
"page":"1",
"records":"10",
"userdata":{"selZd":"23","selYd":"22","selXd":"21"},
"rows":[
{"id":"1","cell":["PDF","J2EEHandbook.pdf","/PDF Handbook.pdf"]}
]
}
Ajax-function : -
$(document).ready(function() {
$('#buttSerch').click(function() {
var newurl = 'Data.jsp?srchword='+
$('#srchTxt').val() +'&srchType='+gdsrctp;
$('#'+ gdivid).jqGrid().setGridParam(
{url : newurl }).trigger("reloadGrid");
//?? fetch userdata
});
});
Question : I need to fetch the data "userdata" in the Ajax function
How can this be achieved.
with regards
Karthik
The userdata can be accessed by usage getGridParam method with parameter "userData" (!! the case is important it should be userdata in the JSON data and "userData" in getGridParam method):
var userdata = $('#'+ gdivid).jqGrid("getGridParam", "userData");
Code for the Grid
colNames:['CATEGORY','PAGENO','CONTENTFILENAME','DATEOFCRTE','DATEOFINDEX','SIZEOF','UCODEDTLS','CONTENTEXTN','PATHOFCONTENT','CONTENT','DOCNUM','DOCWIGHT'],
colModel:[
{name:'CATEGORY',index:'true',width:'5',sortable:'true',align:'left',editable: true,formatter:iconColumnFormat },
{name:'PAGENO',index:'true',width:'3',sortable:'true',align:'left',editable: true, },
{name:'CONTENTFILENAME',index:'true',width:'25',sortable:'true',align:'left',editable: true, },
{name:'DATEOFCRTE',index:'true',width:'10',sortable:'true',align:'left',editable: true, },
{name:'DATEOFINDEX',index:'true',width:'10',sortable:'true',align:'left',editable: true, },
{name:'SIZEOF',index:'true',width:'8',sortable:'true',align:'left',editable: true, },
{name:'UCODEDTLS',index:'true',width:'8',sortable:'true',align:'left',editable: true, },
{name:'CONTENTEXTN',index:'true',width:'5',sortable:'true',align:'left',editable: true, },
{name:'PATHOFCONTENT',index:'true',width:'40',sortable:'true',align:'left',editable: true, },
{name:'CONTENT',index:'true',width:'15',sortable:'true',align:'left',editable: true,formatter:linkdialogColumnFormat },
{name:'DOCNUM',index:'true',width:'5',sortable:'true',align:'left',editable: true, },
{name:'DOCWIGHT',index:'true',width:'8',sortable:'true',align:'left',editable: true, }
],
url:'dummyData.jsp',
datatype:"json",
jsonReader:{root:'rows',page:'page',total:'total',records:'records', userdata:'userdata',cell:'cell',id:'id'},
loadComplete:'urlxdatafetch',
mtype:'GET',
hidegrid:false,
loadonce:true,
caption:"'Grid from Database -jsonstring'",
width:1200,
height:200,
rowNum:"10",
rowList:[10,50,100],
sortable:true,
sortorder:"desc",
shrinkToFit:true,
autowidth:true,
rownumbers:true,
footerrow:false,
viewsortcols:true,
viewrecords:true,
gridview:true,
autoencode:"true",
multiselect:true,
loadtext:"Data-Organized",
pager : "#pgerId",
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.
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