个人中心
gpt4 book ai didi

javascript - 固定列不工作

转载 作者：行者123 更新时间：2023-12-02 17:24:46 28 4
gpt4 key购买 nike

数据表固定列不起作用

滚动体宽度和表格宽度相等。 所以我没有得到固定列的水平滚动条。

我们正在使用“jquery.dataTables.min-1.9.4.js”和Fixedcolumns (3.0.1).js。

html 和 JavaScript:

<html>
<head>
<script src="datatables/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="datatables/jquery.dataTables.min-1.9.4.js" type="text/javascript"></script>
<script src="datatables/extras/FixedColumns.js" type="text/javascript"></script>

<link href="datatables/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/jquery.dataTables-1.9.4.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/dataTables.fixedHeader.min.css" rel="stylesheet" type="text/css" />
</head>


<body>

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th rowspan="2">Name</th>
                        <th colspan="2">HR Information</th>
                        <th colspan="3">Contact</th>
                    </tr>
                    <tr>
                        <th>Position</th>
                        <th>Salary</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Salary</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </tfoot>

                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>$320,800</td>
                        <td>Edinburgh</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>$170,750</td>
                        <td>Tokyo</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>$86,000</td>
                        <td>San Francisco</td>
                        <td>1562</td>
                        <td>a.cox@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>$433,060</td>
                        <td>Edinburgh</td>
                        <td>6224</td>
                        <td>c.kelly@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>$162,700</td>
                        <td>Tokyo</td>
                        <td>5407</td>
                        <td>a.satou@datatables.net</td>
                    </tr>                    
                </tbody>
            </table>
                                                <script type="text/javascript">
     $(document).ready(function () {
        var datatables_options =
                                {
                                    "bAutoWidth": true,
                                    "sDom": '<"top"i>rt<"bottom"flp><"clear">', //determine render order for datatables.net items, http://datatables.net/ref#sDom
                                    "bPaginate": false, // paging
                                    "sPaginationType": "full_numbers", // http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
                                    "iDisplayLength": 10, // page row size
                                    "bSort": true, //sorting
                                    "bFilter": false, // "search" box
                                    "aaSorting": [], // default sort
                                    "bInfo": false, // "Showing x to y of z entries" message
                                    "bStateSave": false, // save state into a cookie
                                    "iCookieDuration": 0, // save state cookie duration
                                    "bScrollAutoCss": true, // datatables.net auto styling of scrolling styles, http://datatables.net/forums/discussion/comment/15072
                                    "bProcessing": true, // "processing" message while sorting .. doesn't appear to be doing anything
                                    "bJQueryUI": false // css classes for jQueryUI themes?
                                    //"asStripeClasses": [], // remove odd/even row css classes (they will be assigned elsewhere)

                                };

        datatables_options["sScrollY"] = "450px";
        datatables_options["sScrollX"] = "100%";
        datatables_options["bScrollCollapse"] = true;
        var $datatable = $(".example").dataTable(datatables_options);
        new $.fn.dataTable.FixedColumns($datatable,
                                                {
                                                    "iLeftColumns": 1,

                                                    //"sLeftWidth": 'relative',
                                                    //"iLeftWidth": 20,
                                                    "sHeightMatch": "none", /* if there aren't any rows that have wrapping text this would be best because it is much faster in IE8 */
                                                    //"sHeightMatch": "semiauto",
                                                    //"sHeightMatch": "auto",
                                                });
    });
</script>
</body>
<style type="text/css">    
    th, td {
        white-space: nowrap;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
</style>
</html>

截图:

enter image description here

最佳答案

您只需将表格宽度设置为 100%，并将 sScrollX 设置为 100%。您缺乏定义 sScrollXInner :

This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. (...)

添加

datatables_options["sScrollXInner"] = '150%';

或您希望表格具有的任何宽度，到您的选项对象。您的示例如上面的演示 -> http://jsfiddle.net/PEN7T/

关于javascript - 固定列不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23581502/

28 4 0
文章推荐： javascript - 什么会导致 onSubmit ="return checkTheForm()"不被执行？
文章推荐： javascript - 使用 HTML5、JS 和 Node js 进行多人绘图
文章推荐： javascript - 如何定义多个相似的指令？
文章推荐： javascript - Javascript 的 switch() 案例自动编号？
行者123
个人简介

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

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