那些遇到过的问题

DataTables隐藏行详细信息示例 - 表头放错位置(连接测试用例)

Ale*_*ber 7 html css html-table datatables

我正在尝试创建一个表,在单击加号图像时可以看到更多细节 - 类似于DataTables隐藏行详细信息示例

不幸的是,有一个警告被打印为JavaScript警报,并且表头也被错放了 - 就好像其中有太多或不足的表格单元格:

在此输入图像描述

我准备了一个简单的测试用例,当你将它保存到文件并在浏览器中打开时,它会立即生效:

<!DOCTYPE HTML>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
    <link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript">

        var data = [
            {"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
            {"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
        ];

        $(function() {

            function fnFormatDetails(oTable, nTr) {
                var aData = oTable.fnGetData(nTr);
                var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
                sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
                sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
                sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
                sOut += '</table>';

                return sOut;
            }

            var fails = $('#fails').dataTable({
                bJQueryUI: true,
                sPaginationType: 'full_numbers',
                aaData: data,
                aaSorting: [[2, 'desc']],
                aoColumns: [
                    { mDataProp: 'Test',        bSearchable: true,  bSortable: true },
                    { mDataProp: 'Measurement', bSearchable: true,  bSortable: true },
                    { mDataProp: 'Total',       bSearchable: false, bSortable: true },
                    { mDataProp: 'A',           bSearchable: false, bSortable: true },
                    { mDataProp: 'B',           bSearchable: false, bSortable: true },
                    { mDataProp: 'C',           bSearchable: false, bSortable: true },
                    { mDataProp: 'D',           bSearchable: false, bSortable: true },
                ]
            });

            var th = document.createElement('th');
            var td = document.createElement('td');
            td.innerHTML = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" class="details">';

            $('#fails tbody th').each(function() {
                this.insertBefore(th, this.childNodes[0]);
            });

            $('#fails tbody tr').each(function() {
                this.insertBefore(td.cloneNode(true), this.childNodes[0]);
            });

            $('#fails tbody').on('click', 'td img.details', function() {
                var nTr = $(this).parents('tr')[0];
                if (fails.fnIsOpen(nTr)) {
                    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
                    fails.fnClose(nTr);
                } else {
                    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
                    fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
                }
            });
        });

    </script>
</head>
<body>

<table id="fails" cellspacing="0" cellpadding="4" width="100%">
    <thead>
    <tr>
        <th>Test</th>
        <th>Measurement</th>
        <th>Total</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

请问有什么想法,如何解决这个问题？

我已经尝试<th>Details</th>在HTML正文中添加/删除,但它没有帮助.

我也在DataTables论坛上问了这个问题.

更新:

我收到了DataTables作者的有用评论,并决定将加号图像添加到每行中第一个单元格的内容中 - 而不是向每一行添加新单元格.

不幸的是我遇到了一个新问题:显示了加号图像,但是orinigal文本(测试名称)消失了:

在此输入图像描述

这是我的新代码(加号图像前置propTest):

<!DOCTYPE HTML>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
    <link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript">

        var data = [
            {"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
            {"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
        ];

        function propTest(data, type, val) {
            if (type === 'set') {
                console.log(val); // for some reason prints "null"
                data.name = val;
                data.display = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" width="20" height="20" class="details"> ' + val;
                return;
            }

            if (type === 'display') {
                return data.display;
            }

            // 'sort', 'type', 'filter' and undefined
            return data.name;
        }

        $(function() {

            function fnFormatDetails(oTable, nTr) {
                var aData = oTable.fnGetData(nTr);
                var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
                sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
                sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
                sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
                sOut += '</table>';

                return sOut;
            }

            var fails = $('#fails').dataTable({
                bJQueryUI: true,
                sPaginationType: 'full_numbers',
                aaData: data,
                aaSorting: [[2, 'desc']],
                aoColumns: [
                    { mData: propTest,      bSearchable: true,  bSortable: true },
                    { mData: 'Measurement', bSearchable: true,  bSortable: true },
                    { mData: 'Total',       bSearchable: false, bSortable: true },
                    { mData: 'A',           bSearchable: false, bSortable: true },
                    { mData: 'B',           bSearchable: false, bSortable: true },
                    { mData: 'C',           bSearchable: false, bSortable: true },
                    { mData: 'D',           bSearchable: false, bSortable: true }
                ]
            });

            $('#fails tbody').on('click', 'td img.details', function() {
                var nTr = $(this).parents('tr')[0];
                if (fails.fnIsOpen(nTr)) {
                    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
                    fails.fnClose(nTr);
                } else {
                    this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
                    fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
                }
            });
        });

    </script>
</head>
<body>

<table id="fails" cellspacing="0" cellpadding="4" width="100%">
    <thead>
    <tr>
        <th>Test</th>
        <th>Measurement</th>
        <th>Total</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Mas*_*rAM 9

使用DataTables(DT)有几种方法可以实现这种行为.您可以实现原始目标,也可以使用相同的列作为扩展器和Test数据.

我正在花时间展示几种选择,因为我希望这可以作为其他人要求做类似事情的参考.

对于以下所有情况,您的表应包含DT创建之前的所有所需列(静态或动态).

扩展器在一个单独的列中

使用默认内容属性:

这个选项需要对现有示例进行最少量的修改,这可能是最简单的.只需sDefaultContent为您的额外列添加一个选项:

{
    mData: null,
    bSearchable: false,
    bSortable: false,
    sDefaultContent: '<div class="expand /">',
    sWidth: "30px"
},
Run Code Online (Sandbox Code Playgroud)

该mData属性设置为null,因为它的内容与行的数据数组无关.这使DT使用中的值sDefaultContent.

我冒昧地使用CSS作为扩展器按钮,因为这使得示例更简单,并且还解除了行为和表示.

我使用的CSS:

tr div.expand {
  width: 20px;
  height: 20px;
  background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_open.png');
}

tr div.open {
  background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_close.png');  
}
Run Code Online (Sandbox Code Playgroud)

和扩展器功能:

$('#fails tbody').on('click', 'td div.expand', function () {
    var nTr = $(this).parents('tr')[0];
    if (fails.fnIsOpen(nTr)) {
        $(this).removeClass('open');
        fails.fnClose(nTr);
    } else {$.fn.dataTableExt.sErrMode = 'throw' ;
        $(this).addClass('open');
        fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
    }
});
Run Code Online (Sandbox Code Playgroud)

我们div使用expand类来定位a ,并open根据需要切换其类.

单独的扩展列

JSBin的例子.

扩展器包含在第一列中

使用格式化程序:

您可以指定一个aoColumnDefs配置数组,它比aoColumns配置更强大,更灵活.

为该列指定渲染器函数是通过mRenderconfig属性完成的.

相关列的设置:

aoColumnDefs: [{
    aTargets: [0],
    mData: 'Test',
    bSearchable: true,
    bSortable: true,
    mRender: expandRenderer
},
 ...
]
Run Code Online (Sandbox Code Playgroud)

该函数在不同的上下文中被多次调用,并且应该告诉DT如何在表本身中显示数据,以及帮助确定用于排序和过滤目的的数据类型.

渲染:

function expandRenderer(data, type, full) {
    switch (type) {
        case 'display':
          return '<div class="expand-wrapper">'+
            '<span class="expand"></span>'+
            '<span class="data">'+
              data+
            '</span></div>';
        case 'type':
        case 'filter':
        case 'sort':
            return data;
    }
}
Run Code Online (Sandbox Code Playgroud)

它需要3个参数:

  • data:行数组中的数据,在本例中为存储的字符串Test.
  • type:请求的类型.它表示DT期望得到的回报:
    • 'display':将在单元格中显示的内容.
    • 'type':从函数返回的内容将用于确定行的数据类型.
    • 'filter','sort':用于过滤(搜索)和排序表的数据.
  • full:此行的完整数据.

这一次,我决定用span一个包裹的s div.为了使图标垂直居中并让表格将所有内容保存在一行中,我使用了以下CSS:

tr span.expand {
    width: 20px;
    height: 20px;
    background-image: url('http://.../details_open.png');
    display:inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

div.expand-wrapper {
    white-space:nowrap;
}
Run Code Online (Sandbox Code Playgroud)

vertical-align: middle这里按预期工作,因为这是一个inline显示(inline-block具体而言).

如果没有这个CSS,DT将无法优雅地处理列宽,因为第一列并不真正意识到扩展器占用的额外空间.

没有这个CSS: 扩展器在同一列中

有了这个CSS:

扩展器在同一列和同一行中

和相应的JSBin示例.

小费:

我不喜欢使用alert()显示错误.对于DT,您可以通过更改其错误模式设置来更改此行为:

$.fn.dataTableExt.sErrMode = 'throw' ;
Run Code Online (Sandbox Code Playgroud)

这将引发异常,因此您可以使用控制台捕获它,或者如果未捕获则记录它.

资源:

DataTable列选项.

DataTable选项快速参考.

PS,

可以通过将函数作为mData配置参数传递来进行进一步的自定义,但这超出了本答案的范围.

归档时间：

查看次数：

15040 次

最近记录：

9 年 前
相关归档
什么是"X-Content-Type-Options = nosniff"？ 256
悬停时如何在图像上显示文字？ 58
如果数据表中只有一个页面,则禁用分页 55
如何使用Jquery/Javascript将我的一个文件夹中的所有图像加载到我的网页中 46
Google字体违反了内容安全政策 40
Javascript未捕获引用错误函数未定义 27
在rails中定义锚标记的正确方法是什么？ 17
使用IE10中的工作:活动css规则使整个div可单击 17
相当于在Outlook中浮动 12
Javascript,如何访问一行中的特定子项？ 7
难疑归档
如何在JavaScript中清空数组？ 2198
以像素为单位获取屏幕尺寸 1798
用JavaScript比较两个日期 1791
如何创建一个像链接一样的HTML按钮？ 1769
如何按字典值对字典列表进行排序？ 1722
我怎样才能存储特定文件？ 1422
如何将字节数组转换为十六进制字符串,反之亦然？ 1313
你如何在YAML中阻止评论？ 1272
如何重置MySQL中的AUTO_INCREMENT？ 1174
为什么使用Redux而不是Facebook Flux？ 1126