I want to implement ordering but it is not working.
Can you tell me the reason why? What do I need to change to make it work so that my data is displayed in order?
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring pagination using data tables</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Plug-in to fetch page data
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
$(document).ready(function() {
var table=$("#table").DataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"scrollY":"120px",
"scrollCollapse": true,
"order": [[ 3, "desc" ]],
"oLanguage": {
"oPaginate": {
"sNext": '>',
"sLast": '»',
"sFirst": '«',
"sPrevious": '<'
}
},
"sort": "position",
//bStateSave variable you can use to save state on client cookies: set value "true"
"bStateSave": false,
//Default: Page display length
"iDisplayLength": 10,
//We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
"iDisplayStart": 0,
"fnDrawCallback": function () {
$('table #table td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatable');}); });
$('table #table td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatable');}); });
//Get page numer on client. Please note: number start from 0 So
//for the first page you will see 0 second page 1 third page 2...
//alert("Current page number: "+((this.fnPagingInfo().iPage)+1));
},
"sAjaxSource": "${pageContext.request.contextPath}/EmployeeData",
"aoColumns": [
{ "mData": "firstName" },
{ "mData": "lastName" },
{ "mData": "emp_Id" },
{ "mData": "email_ID" },
{ "mData": "phone_No" },
{ "mData": "city" },
{ "mData": "Edit",
render:function(data ,type,row){
return '<a href="${pageContext.request.contextPath}/editEmp?emp_Id='+row.emp_Id+' &isEdit=true">Edit</a>';
},
},
{ "mData": "View",
render:function(data ,type,row){
return '<a href="${pageContext.request.contextPath}/viewEmp?emp_Id='+row.emp_Id+'&isView=true">View</a>';
},
},
{ "mData": "Delete",
render:function(data ,type,row){
/* return '<button><a id="btn" href="${pageContext.request.contextPath}/delete?emp_Id='+row.emp_Id+'">Delete</a></button>'; */
/* return <a href="#" class="delete_Id">Delete</a> */
return '<a href="#" onclick="return deleteEmp('+row.emp_Id+')">Delete</a>';
/* return '<button id="delete_Id" empId='+row.emp_Id+'>Delete</button>'; */
/* return '<a href="#" id="delete_Id">Delete</a>'; */
},
},
]
}
);
} );
function deleteEmp(emp_Id){
if(confirm("are you sure want to delete this ID : "+emp_Id)){
window.location = "${pageContext.request.contextPath}/deleteEmp?emp_Id="+emp_Id;
}
else{
return false;
}
}
</script>
<style>
#table{
align:center;
}
#btn{
text-decoration:none;
}
#h{
text-align:center;
color:blue;
}
#link3{
float:right;
margin-right:5px;
}
#link4{
float:right;
}
#brk{
height: 10px;
}
.datatable{
background-color: #ddd !important;
}
</style>
</head>
<body>
<form:form action="" method="GET">
<h2 id="h" >Employee Details<br><br></h2>
<div>
<a href="${pageContext.request.contextPath}/createEmp">Add New Employee</a>
<a id="link4" href="${pageContext.request.contextPath}/bulkExport">EmployeeBulkExport</a>
<a id="link3" href="${pageContext.request.contextPath}/fileUploadForm">EmployeeImport </a>
</div>
<div id = "brk"></div>
<table width="100%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>emp_Id</th>
<th>email_Id</th>
<th>phone_No</th>
<th>City</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
</table>
</td></tr></table>
</form:form>
</body>
</html>
