Following is my code. I want to sort the data by clicking on the table header. But it is not working.
$("#list_records").jqGrid({
url: 'ajaxFetchTableInfo.php?table=GET_TRAINING_TYPE',
editurl: 'ajaxSaveTrainingType.php',
datatype: "json",
colNames: ["TRAINING TYPE ID", "TRAINING TYPE NAME", "REMARKS"],
colModel: [
{
label: 'TRAINING_TYPE_ID',
name: 'TRAINING_TYPE_ID',
index: 'TRAINING_TYPE_ID',
editable:true,
sortable:true,
sorttype: "text",
editoptions:{readonly:"readonly"},
width: 75
},
{
label : 'TRAINING_TYPE_NAME',
name: 'TRAINING_TYPE_NAME',
index: 'TRAINING_TYPE_NAME',
width: 140,
editable: true, // must set editable to true if you want to make the field editable
editoptions: {size:50, maxlength: 80},
editrules:{required: true, maxlength: 80},
sortable:true,
sorttype: "text",
// set options related to the layout of the Edit and Add Forms
formoptions: {
colpos: 1, // the position of the column
rowpos: 2, // the position of the row
label: "Training Type Name:", // the label to show for each input control
elmsuffix: "(*)"
}
},
{
label : 'Remarks',
name: 'REMARKS',
width: 100,
editable: true,
edittype: 'textarea',
editoptions:{rows:3, cols:45},
formoptions: {
colpos: 1,
rowpos: 3
}
}
],
loadOnce : true,
viewrecords: true,
altRows: true,
width: 780,
height: 200,
rowNum: 10,
rowList:[10, 20, 30],
caption:"Training Type Information",
sortname: 'TRAINING_TYPE_ID',
sortorder: "asc",
emptyrecords: "No Records to Display.",
//footerrow: true,
pager: "#perpage"
});
