个人中心
gpt4 book ai didi

jquery - Bootstrap 无法在 Internet Explorer 中呈现

转载 作者：行者123 更新时间：2023-12-01 05:43:19 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 和 DataTables/Editor .

在 Google Chrome 中，表格可以在普通 Bootstrap 容器中正常呈现，并且具有 Bootstrap 样式，但在 Internet Explorer 中，表格呈现为全宽并且没有 Bootstrap 样式。

我已经使用 Bootstrap 一段时间了，在使用它时我从未在浏览器中看到过这些不一致的情况，因此我的代码中一定有某些东西破坏了 Internet Explorer - 但我不知道是什么。

这是代码:

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Editor</title>

  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
  <link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">

  <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
  <script type="text/javascript" language="javascript" src="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>

  <script type="text/javascript" class="init">
  var editor; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
      editor = new $.fn.dataTable.Editor( {
          ajax: "php/table.php",
          table: "#table",
          fields: [
          {
           "label": "column1",
           "name": "column1",
           "type": "text"
          },
          {
           "label": "column2",
           "name": "column2",
           "type": "text"
          },
          {
           "label": "column3",
           "name": "column3",
           "type": "text"
          },
          {
           "label": "column4",
           "name": "column4",
           "type": "text"
          },
          {
           "label": "column5",
           "name": "column5",
           "type": "text"
          },
          {
           "label": "column6",
           "name": "column6",
           "type": "column6"
          },
          {
           "label": "column7",
           "name": "column7",
           "type": "text"
          },
          {
           "label": "column8",
           "name": "column8",
           "type": "text"
          }
          ]
      } );

      var table = $('#table').DataTable( {
          lengthChange: false,
          ajax: "php/table.php",
          columns: [
          {
           "data": "column1"
          },
          {
           "data": "column2"
          },
          {
           "data": "column3"
          },
          {
           "data": "column4"
          },
          {
           "data": "column5"
          },
          {
           "data": "column6"
          },
          {
           "data": "column7"
          },
          {
           "data": "column8"
          },
          {
           "data": "column9"
          }
          ]
      } );

      var tableTools = new $.fn.dataTable.TableTools( table, {
          sRowSelect: "os",
          aButtons: [
              { sExtends: "editor_create", editor: editor },
              { sExtends: "editor_edit",   editor: editor },
              { sExtends: "editor_remove", editor: editor }
          ]
      } );
      $( tableTools.fnContainer() ).appendTo( '#table_wrapper .col-sm-6:eq(0)' );
  } );
  </script>
    </head>
    <body>
        <div class="container">
            <h1>
                Editor
            </h1>

            <table class="table table-bordered" id="table">
                <thead>
                    <tr>
      <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                        <th>Column 5</th>
                        <th>Column 6</th>
                        <th>Column 7</th>
                        <th>Column 8</th>
      <th>Column 9</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

最佳答案

我认为问题不在于 Bootstrap 本身，而是在于某些版本的 IE 不支持的数据表。

您可以使用 Bootstrap 中的 class = "table table-stripped" 来设计您的表格，并添加一些 javascript/JQuery 来执行您需要的操作。

关于jquery - Bootstrap 无法在 Internet Explorer 中呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29533033/

25 4 0
文章推荐： java - Apache Pivot 和自定义 ListView ItemRenderer
文章推荐： jquery.dotdotdot 部分未显示
文章推荐： jquery - 用jQuery动画显示ckeditor
文章推荐： java - 在Android应用程序中，我将所有px更改为dp和sp。现在不开放了。怎么了？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com