Question

我试图将jquery数据表添加到一个简单的aspx页面。在几次之前做过这个，但我现在添加它的这个网站有一些继承的CSS。所以我采用了生成的HTML并删除了添加到其中的CSS。我的页面仍然没有正确的样式！

这是我的HTML。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
    <div>

        <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
        <link href="CSS/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
        <link href="CSS/demo_page.css" rel="stylesheet" />
        <link href="CSS/demo_table.css" rel="stylesheet" />
        <link href="CSS/demo_table_jui.css" rel="stylesheet" />
        <link href="CSS/jquery.dataTables.css" rel="stylesheet" />
        <link href="CSS/jquery.dataTables_themeroller.css" rel="stylesheet" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("#gvMain").prepend($("<thead></thead>").append($(this).find("tr:first"))).
                    dataTable({
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers"
                    });
            });
        </script>
        <div>
            <form>
                <table id="gvMain">
                    <tr>
                        <th scope="col">Some Id</th>
                    </tr>
                    <tr class="gridItem">
                        <td>297</td>
                    </tr>
                    <tr class="gridAlternatingItem">
                        <td>296</td>
                    </tr>
                    <tr class="gridItem">
                        <td>295</td>
                    </tr>
                    <tr class="gridAlternatingItem">
                        <td>295</td>
                    </tr>
                    <tr class="gridItem">
                        <td>294</td>
                    </tr>
                    <tr class="gridAlternatingItem">
                        <td>294</td>
                    </tr>
                    <tr class="gridItem">
                        <td>293</td>
                    </tr>
                    <tr class="gridAlternatingItem">
                        <td>293</td>
                    </tr>
                </table>
        </div>
        </form>
    </div>

</body>
</html>

看起来像下面

bad looking

我花了好几个小时试图让它上班但没有运气。它位于现有站点的主目录中。但这并不重要，因为HTML中没有包含任何内容。

这是上面屏幕截图中显示的四个错误的屏幕截图。它只是一些丢失的图像/ CSS文件。 error image

Answer 1

您必须添加<thead>和<tbody>代码

以下是表格的示例：

  <table id="gvMain">
    <thead>
      <tr>
          <th scope="col">Some Id</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gridItem">
          <td>297</td>
      </tr>
      <tr class="gridAlternatingItem">
          <td>296</td>
      </tr>
          <tr class="gridItem">
      <td>295</td>
      </tr>
      <tr class="gridAlternatingItem">
        <td>295</td>
      </tr>
      <tr class="gridItem">
        <td>294</td>
      </tr>
      <tr class="gridAlternatingItem">
        <td>294</td>
      </tr>
      <tr class="gridItem">
        <td>293</td>
      </tr>
      <tr class="gridAlternatingItem">
        <td>293</td>
      </tr>
    </tbody>
  </table>

JQuery DataTable样式无法正常工作

1 个答案: