jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqx grid sorting not working
Tagged: jqxgrid sorting
This topic contains 1 reply, has 1 voice, and was last updated by sahu.sonalcs@gmail.com 5 years, 11 months ago.
-
Author
-
Hi,
I have a grid who is loaded via JSON. I have implemented paging which is working fine.But when i implemented sorting, its not working locally and remote both.
I wanted to apply remote sorting to it which is not reflecting.Even when i try to sort on client side it doesnt work.I tried by applying to one column for eg-name ,its not getting sorted.And when i remove
sortcolumn: ‘name’,
sortdirection: ‘asc’,my data doesn’t appear in grid.
For backend i am using spring mvc and hibernate,mysql to integrate.
Please let me know where i am missing.
Please find my code for fileUpload.jsp-
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<%@ taglib prefix = “c” uri = “http://java.sun.com/jsp/jstl/core” %>
<!DOCTYPE html>
<html>
<head>
<meta charset=”ISO-8859-1″>
<title>Titanic Passengers Detail</title>
<link rel=”stylesheet” href=”<c:url value=”/resources/css/jqx.base.css”/>”>
<script src=”<c:url value=”/resources/js/jquery-1.11.1.min.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxcore.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxdata.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxbuttons.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxscrollbar.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxmenu.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.selection.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxlistbox.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxdropdownlist.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.columnsresize.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.filter.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.filter.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.sort.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.pager.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.grouping.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.columnsreorder.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.edit.js”/>”></script></head>
<body>
<h1> File Upload </h1><form id=”uploadFile” method=”post” onsubmit=”return false;” enctype=”multipart/form-data” >
<input type=”file” name=”csvfile” id=”csvfile” required><br/>
<button value=”Submit” onclick=”onUploadClick()”>Upload</button>
</form>
<br/>
<br/><div class=”form-search”>
<form id=”searchForm” method=”post” onsubmit=”return false;” >
Search By Gender: <input type=”text” name=”searchField” placeholder=”Search” class=”form-control” id=”searchByGender”><br/>
<button type=”button” id=”searchButton” value=”Submit” onclick=”onSearchByGenderClick()”>Search</button>
</form>
</div><br/>
<br/><div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div><script type=”text/javascript”>
myList=””;
function onUploadClick() {
var data = new FormData();
data.append(“file”, csvfile.files[0]);
console.log(‘data’,data.values.length);$.ajax({
url:’uploadFile’,
data: data,
cache: false,
contentType: false,
processData: false,
type:’POST’,
success: function(response){
if(response.status == “200”){
alert(response.filename+” “+response.message);}else{
alert(‘File Not Uploaded.Please try again’);
}}
});
}function onSearchByGenderClick() {
var genderValue=$(“#searchByGender”).val();
if(genderValue.length==0)
{
alert(‘Please enter Gender value’);
}
else{
$.ajax({
url : “search”,
type : “GET”,
data : {“searchByGender” : genderValue
},
success : function(data) {
console.log(data);
var source =
{
datatype: “json”,
datafields: [
{ name: ‘passenger_id’,type: ‘int’},
{ name: ‘passenger_class’ , type: ‘string’},
{ name: ‘name’, type: ‘string’ },
{ name: ‘sex’ , type: ‘string’},
{ name: ‘age’, type: ‘string’ },
{ name: ‘sib_sp’ , type: ‘string’},
{ name: ‘parch’, type: ‘string’ },
{ name: ‘ticket’ , type: ‘string’},
{ name: ‘fare’ , type: ‘string’},
{ name: ‘cabin’ , type: ‘string’},
{ name: ’embarked’, type: ‘string’ }],
cache: false,
url: ‘getPassengers?searchByGender=’+genderValue,
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
sortcolumn: ‘name’,
sortdirection: ‘asc’,beforeprocessing: function (data) {
if (data != null)
{
source.totalrecords = data.TotalRows;
}
}};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
$(“#jqxgrid”).jqxGrid(
{
width: 900,
source: dataAdapter,
sortable: true,
autoheight: true,
pageable: true,
columnsresize: true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns: [
{ text: ‘Passenger ID’, datafield: ‘passenger_id’, width: 120 },
{ text: ‘Class’, datafield: ‘passenger_class’, width: 120 },
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Gender’, datafield: ‘sex’, width: 120,sortable: false },
{ text: ‘Age’, datafield: ‘age’, minwidth: 120 },
{ text: ‘Sib_sp’, datafield: ‘sib_sp’, minwidth: 120 },
{ text: ‘Parch’, datafield: ‘parch’, minwidth: 120 },
{ text: ‘Ticket’, datafield: ‘ticket’, minwidth: 120 },
{ text: ‘Fare’, datafield: ‘fare’, minwidth: 120 },
{ text: ‘Cabin’, datafield: ‘cabin’, minwidth: 120 },
{ text: ‘Embarked’, datafield: ’embarked’, minwidth: 120 }
]
});
} ,
error : function() {
console.log(“There was an error”);
}});
}
}</script>
</body>
</html>Please let me know if i am missing any information from my side.
Looking forward for your reply
Thanks
Hi,
Can anyone help me in this issue.
Thanks,
Sonal -
AuthorPosts
You must be logged in to reply to this topic.