Quote:
here i have used jqgrid plugin for displayig the data from database. the data which will be filled is come througn ajax call. i have got the data on console. but it does not filled into grid plugin.
here what i have tried is
What I have tried:
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<table id="grid-table"></table>
<div id="grid-pager"></div>
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
<script type="text/javascript">
// var grid_data =[];
$.ajax({
url: 'getdata.php',
type: 'POST',
async: false,
dataType: 'json',
cache: 'false',
success: function(data){
grid_data = JSON.stringify(data)
}
});
var grid_data = grid_data;
console.log(grid_data);
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
}
})
jQuery(grid_selector).jqGrid({
//direction: "rtl",
//subgrid options
//subGrid : true,
//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
//datatype: "xml",
subGridOptions : {
plusicon : "ace-icon fa fa-plus center bigger-110 blue",
minusicon : "ace-icon fa fa-minus center bigger-110 blue",
openicon : "ace-icon fa fa-chevron-right center orange"
},
data: grid_data,
datatype: "json",
height: 250,
colNames:[' ', 'ID','Title','Date', 'Status'],
//colNames:[' ', 'ID','Name'],
colModel:[
{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
formatter:'actions',
formatoptions:{
keys:true,
//delbutton: false,//disable delete button
delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
}
},
{name:'id',index:'id', width:60, sorttype:"int", editable: true},
{name:'name',index:'name',width:90, editable:true, sorttype:"date",unformat: pickDate},
{name:'date',index:'date', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'status',index:'status', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
],
viewrecords : true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,
//toppager: true,
multiselect: true,
//multikey: "ctrlKey",
multiboxonly: true,
loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: "./dummy.php",//nothing is saved
caption: "jqGrid with inline editing"
//,autowidth: true,
});