Jquery DataTable with Ignited-Datatables CodeIgniter - codeigniter

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.

Related

Datatable scroll with server side processing?

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) {
}
});
}

fnServerParams is not a function

I'm using jQuery DataTables and I want to add parameter to Ajax call in my table definition.
But it gives error when I attempt to use fnServerParams. Here is my table and method that I use to add parameter:
var tableObjects = $("#logTable").DataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "../../Controller/DashboardController.php5",
"aoColumns": [
{"mDataProp": "clientname" ,"sortable": false },
{"mDataProp": "clientip"},
{"mDataProp": "url","sortable": false },
{"mDataProp": "respsize"},
{"mDataProp": "loggingdate"},
{"mDataProp": "reqmethod"},
{"mDataProp": "resultcode"},
{"mDataProp": "duration"},
{"mDataProp": "hierarchycode"}
],
"fnServerParams": function (val1,val2 ) {
if((val1)&&(val2))
aoData.push({"name":val1,value:val2})
},
"fnServerData": function (sSource, aoData, fnCallback){
aoData.push({"name":"tablename","value":"dashboard"});
$.ajax({
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(result){
fnCallback(result);
},
error: function (xhr, textStatus, error){
}
}
});
}
})
And I add parameters with this function call:
$("#slcFilter").on("change",function(){
tableObjects.fnServerParams("paramname","value");
//"tableObjects.fnServerParams is not a function" but why ?
});
In DataTables 1.10 naming convention has changed, see API for more information.
You need to initialize your table as $("#logTable").dataTable() with lower case d to get access to previous version API or with $("#logTable").DataTable() with upper case D to get access to newer API.
Also there is no fnServerParams() function, it's an option fnServerParams that should be defined as follows:
"fnServerParams": function (aoData) {
aoData.push( { "name": "select", "value": $("#slcFilter").val() } );
},
See my answer to your other similar question.

dataTable custom loading contents

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

jqGrid LoadOncomplete

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",

How to call action from ajax

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

Resources