We are using the popular JQuery Datatables plugin as well as its corresponding Row Reordering plugin.
Our datatable contains a scroll bar.
A problem arises in IE8, whereby the scrollbar does not move when you attempt to drag a row from the bottom to the top. This works fine in Chrome and Firefox, and does not produce any JS console error in IE.
I am at a bit of a loss on how to troubleshoot this, so would appreciate any advice on how to get started?
The following is my datatable setup:
<%@ 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">
<html>
<head>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.blockUI.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.core.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.widget.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.position.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.dataTables.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.custom.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.dataTables.rowReordering.js"></script>
<title>Test reordering</title>
</head>
<body>
<body onload="setupTables() ;">
<div id="myDiv" style="height:250px; border:1px; color: blue">
<table id="myTable">
<thead>
<tr>
<th>Element Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1</td>
</tr>
<tr>
<td>Element 2</td>
</tr>
<tr>
<td>Element 3</td>
</tr>
<tr>
<td>Element 4</td>
</tr>
<tr>
<td>Element 5</td>
</tr>
<tr>
<td>Element 6</td>
</tr>
<tr>
<td>Element 7</td>
</tr>
<tr>
<td>Element 8</td>
</tr>
<tr>
<td>Element 9</td>
</tr>
<tr>
<td>Element 10</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function setupTables() {
/* $('#myTable').dataTable({
"sScrollY":"10px",
"sScrollX":"10px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true,
"aoColumns":[
null,
null,
null,
null,
null,
null,
null,
null ]
});*/
$('#myTable').dataTable({
"sScrollY":"200px",
"sScrollX":"1050px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true
}).rowReordering();
}
</script>
</body>
</html>
The only “solution” I could find for this issue was to include the scroller plugin and following this, the scrolling worked correctly in IE. Will open an issue on the bug tracker