Question

我们正在使用流行的JQuery Datatables插件及其相应的Row Reordering插件。

我们的数据表包含一个滚动条。

IE8中出现问题，当您尝试将行从底部拖到顶部时，滚动条不会移动。这在Chrome和Firefox中运行良好，并且在IE中不会产生任何JS控制台错误。我对如何解决这个问题感到有些失望，所以对于如何开始使用会有什么建议吗？

以下是我的数据表设置：

    <%@ 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>

Answer 1

如果您提供了一些代码示例或样式表，这将有所帮助。也许它不是javascript而是你的CSS。

div元素上的滚动条需要定义宽度和高度。

Answer 2

我能为这个问题找到的唯一“解决方案”是包含scroller plugin，并且在此之后，滚动在IE中正常工作。将在错误跟踪器上打开一个问题

行重新排序数据表时，在IE中滚动条问题

2 个答案: