如何使用datatables.js创建水平滚动数据表

发布于 2025-02-14 02:03:14 字数 2591 浏览 4 评论 0原文

我正在尝试使用DataTables格式化表格，但是我似乎无法使其正常工作。我搜索了堆栈溢出，YouTube和DataTables网站以获取解决方案，并且尝试了我发现的所有内容，但仍然没有得到我想要的结果，尤其是水平滚动栏。我是HTML和JavaScript的新手，因此对任何帮助都将不胜感激。

这是我尝试过的一些更改，但是还有更多我不记得的。

使用scrollx：true而不是“ sscrollx”：“ 100％
将表格标签设置为style =” overflow-x：auto;“
在表之前删除divs，

这是我的代码当前的样子：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#recon-table').DataTable({
                "sScrollX": "100%",
                "sScrollXInner": "110%"
            });
        });
    </script>

<html>
<head>
    <title>Recon Table</title>
</head>
<body>
    <div class="box-transparent">
        <div class="box-content table-scroll-box">
            <table class="display nowrap" id="recon-table" style="width:100%">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Username</th>
                        <th>Date of Birth</th>
                        <th>Language</th>
                        <th>Gender</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>[email protected]</td>
                        <td>1234567890</td>
                        <td>uname</td>
                        <td>English</td>
                        <td>Male</td>                            
                    </tr>                    
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

原文

I am attempting to format my table using DataTables, however I can't seem to get it working properly. I searched stack overflow, youtube, and the DataTables website for solutions and I have tried everything that I have found but still haven't gotten the result I'm looking for, particularly a horizontal scroll bar. I am very new to html and javascript so any help would be much appreciated.

Here are some of the changes I have tried, but there are many more I cannot remember.

using scrollX: true instead of "sScrollX" : "100%
setting the style tag of the table to style="overflow-x:auto;"
Removing the divs before the table

Here is what my code currently looks like:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#recon-table').DataTable({
                "sScrollX": "100%",
                "sScrollXInner": "110%"
            });
        });
    </script>

<html>
<head>
    <title>Recon Table</title>
</head>
<body>
    <div class="box-transparent">
        <div class="box-content table-scroll-box">
            <table class="display nowrap" id="recon-table" style="width:100%">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Username</th>
                        <th>Date of Birth</th>
                        <th>Language</th>
                        <th>Gender</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>[email protected]</td>
                        <td>1234567890</td>
                        <td>uname</td>
                        <td>English</td>
                        <td>Male</td>                            
                    </tr>                    
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪眸﹌ 2025-02-21 02:03:14

您的HTML是问题，您缺少DOB列的TD标签行，只需添加它，它应该如此工作：

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true,
  });
});

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Username</th>
      <th>Date of Birth</th>
      <th>Language</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>1234567890</td>
      <td>uname</td>
      <td>01-June-1982</td>
      <td>English</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

我希望这会有所帮助

Your HTML is the issues, your missing a td tag line for the DOB column, just add that and it should work like so:

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true,
  });
});

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Username</th>
      <th>Date of Birth</th>
      <th>Language</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>1234567890</td>
      <td>uname</td>
      <td>01-June-1982</td>
      <td>English</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

I hope this helps

回复收藏 0 原文

~没有更多了~