javascript - 数据库 Jquery - 使用 ScrollY 时列标题未对齐-6ren

javascript - 数据库 Jquery - 使用 ScrollY 时列标题未对齐

转载作者：太空宇宙更新时间：2023-11-04 15:29:50

我正在使用 jQuery 的 DataTables 和 Bootstrap。所以我遇到的问题是，当我在“已完成”和“死亡”选项卡之间切换时，“死亡”选项卡的列标题会在左侧堆积起来，直到我单击它们，然后它们才能正确对齐。每当我刷新时就会发生这种情况。我尝试使用CSS与overflow:auto，但这使我的整个面板可滚动，这是我不想要的。我希望当我滚动表格时标题保持固定。

  <div class = 'row'>
  <div class='col-lg-11'>

  <div id="pane3" > 
  <ul class="nav nav-tabs">
    <li class="active">
      <a  href="#4a" data-toggle="tab">My Completed</a>
    </li>
    <li>
      <a  href="#4b" id="deadTab"  data-toggle="tab">Dead Requests</a>
    </li>

  </ul>
  <div class="tab-content">
      <div class='tab-pane active' id ="4a">
        <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> -->
          <table id='completed' class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Req. #</th>
              <th>Project #</th>
              <th>Client Name</th>
              <th>Program</th>
              <th>Request Type</th>
              <th>Assignee</th>
              <th>Completed Date</th>
              <th>Clone</th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
        </table>
      <!--   </div> -->
        </div>
          <div class='tab-pane' id ="4b">
         <!--  <div id="" style=" overflow:auto; position:relative; "> -->
            <table id='dead' class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Req. #</th>
                <th>Project #</th>
                <th>Client Name</th>
                <th>Program</th>
                <th>Request Type</th>
                <th>Assignee</th>
                <th>Dead Date</th>
                <th>Restart</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>john@e</td>
              <td>july@example.com</td>
              <td>6/12/2017</td>
              <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
            </tr>
          </tbody>
          </table>
         <!--  </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

$(document).ready(function() {



   $('#completed').DataTable( {
    "paging":false,
    // "fixedHeader": true,
    "scrollY": "140px",
    "table-layout":"fixed",
    "columnDefs":[
    {"width":60, "targets":0},
    {"width":60, "targets":1},
    {"width":60, "targets":2},
    {"width":60, "targets":3},
    {"width":90, "targets":4},
    {"width":90, "targets":5},
    {"width":90, "targets":6},
    {"width":90, "targets":7},
    ]

  });


  $('#dead').DataTable( {
    "paging":false,
    "fixedHeader": true,
    "scrollY": "140px",
    "table-layout":"fixed",
     "columnDefs":[
    {"width":60, "targets":0},
    {"width":60, "targets":1},
    {"width":60, "targets":2},
    {"width":60, "targets":3},
    {"width":90, "targets":4},
    {"width":90, "targets":5},
    {"width":90, "targets":6},
    {"width":90, "targets":7},
    ]

    // "table-layout":"fixed"



  });





});



</script>

最佳答案

问题是您的其他选项卡已隐藏(display: none)。您可以在 dead 选项卡显示后初始化数据表，如下所示:

$('#completed').DataTable({
  "paging": false,
  // "fixedHeader": true,
  "scrollY": "140px",
  "table-layout": "fixed",
  "columnDefs": [{
      "width": 60,
      "targets": 0
    },
    {
      "width": 60,
      "targets": 1
    },
    {
      "width": 60,
      "targets": 2
    },
    {
      "width": 60,
      "targets": 3
    },
    {
      "width": 90,
      "targets": 4
    },
    {
      "width": 90,
      "targets": 5
    },
    {
      "width": 90,
      "targets": 6
    },
    {
      "width": 90,
      "targets": 7
    },
  ]

});






$('#deadTab').one('shown.bs.tab', function(e) {
  $('#dead').DataTable({
    "paging": false,
    "fixedHeader": true,
    "scrollY": "140px",
    "table-layout": "fixed",
    "columnDefs": [{
        "width": 60,
        "targets": 0
      },
      {
        "width": 60,
        "targets": 1
      },
      {
        "width": 60,
        "targets": 2
      },
      {
        "width": 60,
        "targets": 3
      },
      {
        "width": 90,
        "targets": 4
      },
      {
        "width": 90,
        "targets": 5
      },
      {
        "width": 90,
        "targets": 6
      },
      {
        "width": 90,
        "targets": 7
      },
    ]

    // "table-layout":"fixed"

  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<div class="container">
  <div class='row'>
    <div class='col-lg-11'>
      <div id="pane3">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#4a" data-toggle="tab">My Completed</a>
          </li>
          <li>
            <a href="#4b" id="deadTab" data-toggle="tab">Dead Requests</a>
          </li>

        </ul>
        <div class="tab-content">
          <div class='tab-pane active' id="4a">
            <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> -->
            <table id='completed' class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Req. #</th>
                  <th>Project #</th>
                  <th>Client Name</th>
                  <th>Program</th>
                  <th>Request Type</th>
                  <th>Assignee</th>
                  <th>Completed Date</th>
                  <th>Clone</th>

                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
              </tbody>
            </table>
            <!--   </div> -->
          </div>
          <div class='tab-pane' id="4b">
            <!--  <div id="" style=" overflow:auto; position:relative; "> -->
            <table id='dead' class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Req. #</th>
                  <th>Project #</th>
                  <th>Client Name</th>
                  <th>Program</th>
                  <th>Request Type</th>
                  <th>Assignee</th>
                  <th>Dead Date</th>
                  <th>Restart</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>john@e</td>
                  <td>july@example.com</td>
                  <td>6/12/2017</td>
                  <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td>
                </tr>
              </tbody>
            </table>
            <!--  </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 数据库 Jquery - 使用 ScrollY 时列标题未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44890753/

文章推荐： javascript根据2个不同的选择下拉值显示结果

文章推荐： html - 从wordpress站点删除右侧的空白

文章推荐： javascript - jQuery 矢量 map 中的切换功能

文章推荐： javascript - 使用此关键字在自定义指令中绑定(bind)模型

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 数据库 Jquery - 使用 ScrollY 时列标题未对齐