如何使用scrolly选项在DataTable中设置行高?

时间:2016-11-30 12:02:22

标签: jquery datatables

我希望我的数据表中的行具有相同的固定高度,但rowHeight选项似乎没有效果。

我创建了一个这样的数据表:

HTML:

<table id="PositionsTable" class="display" cellspacing="0" style="width:100%;height:70%;font-size:90%">
    <thead>
        <tr>
            <th>Symbol</th>
            <th>ActualPosition</th>
            <th>AccountIdent</th>
        </tr>
    </thead>
    <tbody id="PositionsBody">

使用Javascript:

   function CreatePositionsBodt(arr) {
        var existingbody = document.getElementById('PositionsBody');
        var table1 = document.getElementById('PositionsTable');
        var newBody = document.createElement('tbody');
        newBody.id = 'PositionsBody';
        var asArr = eval(arr);
        asArr.forEach(function (rowData) {
            var row = document.createElement('tr');

            rowData.forEach(function (cellData) {
                var cell = document.createElement('td');
                cell.appendChild(document.createTextNode(cellData));
                row.appendChild(cell);
            });

            newBody.appendChild(row);
        });
        table1.replaceChild(newBody, existingbody);
        existingbody.innerHTML = newBody.innerHTML;
    }

然后我使用bootstrap:

$(document).ready(function () {
        $('#PositionsTable').DataTable({
            scrollY: 500px,
            scroller: {
                rowHeight: 30
            },
            paging: false,
            "bFilter": false,
            "columns": [ { "width": "100px"},null,null]
        })
    });

其他:

如果我设置了scrollY:true,那么rowHeight会起作用但是我的表格不是我想要的尺寸......

这是一个JSFIDDLE:

https://jsfiddle.net/dh6sqesk/

1 个答案:

答案 0 :(得分:0)

您尝试在表标记的样式属性中设置静态的高度,根据我的分析影响。

你可以删除

width:100%;height:70%;font-size:90% 

将其设为

width:100%;font-size:90%