Question

我正在创建客户订单列表，该列表是从DB获取并显示JQuery Datatable。它正在显示eclipse浏览器和Internet Explorer，但是当我在Chrome或Firefox上运行时，它的行没有显示在每一列上。下面是图像。

ProductInventory.jsp如下： -

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ include file="/WEB-INF/views/template/header.jsp" %> <script>
    $(document).ready(function(){

        $('.table').DataTable({
            "lengthMenu": [[10,20,30,50, -1], [10,20,30,50, "All"]]
        });
    }); </script>

<div class="container-wrapper">
    <div class="container">
        <div class="page-header">
            <h1>Product Inventory Page</h1>


            <p class="lead">This is the product inventory page:</p>

        <table class="table table-striped table-hover">
            <thead>
            <tr class="bg-success">
                <th>Proto Thumb</th>
                <th>Product Name</th>
                <th>Category</th>
                <th>Condition</th>
                <th>Price</th>
                <th></th>
            </tr>
            </thead>
            <c:forEach items="${products}" var="product">
                <tr>
                    <td><img src="<c:url value="/resources/images/${product.productId}.png" />" alt="image" style="width:100%"/></td>
                    <td>${product.productName}</td>
                    <td>${product.productCategory}</td>
                    <td>${product.productCondition}</td>
                    <td>${product.productPrice} USD </td>
                    <td>
                        <a href="${viewProduct}/${product.productId}"><span class="glyphicon glyphicon-info-sign"></span></a>
                        <a href="${deleteProduct}/${product.productId}"><span class="glyphicon glyphicon-remove"></span></a>
                        <a href="${editProduct}/${product.productId}"><span class="glyphicon glyphicon-pencil"></span></a>

                    </td>
                </tr>
            </c:forEach>
        </table>

        <a href="${addProduct}" class="btn btn-primary">Add Product</a>


<%@ include file="/WEB-INF/views/template/footer.jsp" %>

header.jsp如下所示，其中包括JQuerydatatable脚本链接： -

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">  

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

    <!-- Angular.JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
    <link href="<c:url value="/resources/css/bootstrap-theme.min.css" />" rel="stylesheet">
    <!-- MaCarouselin CSS -->
    <link href="<c:url value="/resources/css/carousel.css" />" rel="stylesheet">

    <!-- Main CSS -->
    <link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">

    <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet">

    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> -->


<script type="text/javascript">

function getSubCategory(){
     $.getJSON(
                "/MusicStore/prodList.json", 
                function(j) {
                     var html = '';
                     html+='<ul class="dropdown-menu">';
                     html+='<li><a href="<c:url value="/product/productList/all" />" >All Products</a></li>';
                     html+='<li class="divider"></li>';
                     for(var i=0; i<j.length; i++){
                         html+='<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">'+j[i].categoryName+'</a>';
                         html+='<ul class="dropdown-menu">';
                         for(var k=0; k<j[i].subCategory.length; k++){
                         html+='<li><a href="<c:url value="/product/productList/'+j[i].categoryId+'/'+j[i].subCategory[k].subCategoryName+'" />">'+j[i].subCategory[k].subCategoryName+'</a></li>';     
                      }
                         html+='</ul></li>';
                     }
                     html+='</ul>';
                     $('li.dropdown').find('ul').remove().end().append(html);
                });

}

$(document).ready(function() {
    $('li.dropdown [data-toggle=dropdown]').on('click', function(event) {
        event.preventDefault(); 
        event.stopPropagation(); 
        $(this).parent().siblings().removeClass('open');
        $(this).parent().toggleClass('open');
    });


});

window.onload = function() {
     getSubCategory();
    };
</script>

</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
    <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header" >
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<c:url value="/" />"><img class="logo" src="${pageContext.request.contextPath}/resources/images/logo-home.png" width="100px"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" >
                    <ul class="nav navbar-nav">
                        <li><a href="<c:url value="/" />">Home</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>  
                    </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>

</body>

请帮我解决这个问题。谢谢。

JQuery DataTable无法在浏览器中正确呈现

0 个答案: