数据表修复 header 不适用于可滚动表
[英]DataTable fixed header not working for scrollable table
问题描述
I've been working with dataTables for a short period of time and I have a DataTable with two columns:
我一直在使用 dataTables 很短的时间，我有一个包含两列的 DataTable：
TableVehUsage = $("#TableVehUsage ").DataTable({
data: [],
ordering: true,
paginate: false,
"info": false,
fixedHeader: {header: true},
columns: [
{ data: "Vehicle", title: "Vehicle" },
{ data: "Serial", title: "Serial" }
],
"columnDefs": [
{
"targets": 0,
"render": function (data, type, full, meta) {
// If it is rendering the cell contents
if (type === 'display') {
switch (data) {
case "-":
return "-";
default:
if (full.IsOnSale == true)
return '<span style="color:red" onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
else
return '<span onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
}
}
return (isNaN(data)) ? -1 : +data;
}
} }]
});
I have some situation when all the data don't fit in the page and the user needs to scroll down to see all the info.当所有数据都不适合页面并且用户需要向下滚动以查看所有信息时，我遇到了一些情况。 I've tried to use Fixed Header by adding to my javascript the line fixedHeader: {header: true} and in the html:我尝试使用Fixed Header通过添加到我的 javascript 行fixedHeader: {header: true}和 html ：
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
But is not working for me:(但对我不起作用:(
What am I doing wrong?我究竟做错了什么？
3 个解决方案
解决方案1
2 2017-01-22 06:21:43
I found a DataTable plugin that may be of help. 我发现一个DataTable插件可能会有所帮助。 Information on it is located at https://datatables.net/extensions/scroller/ 关于它的信息位于https://datatables.net/extensions/scroller/
Using this, my definition looks like this: 使用此定义，我的定义如下所示：
var table1 = $('#example').DataTable({ paging: true,
scrollY: 200,
deferRender: true,
scroller: true });
I made a jsFiddle at https://jsfiddle.net/bindrid/oywvh1ek/6/ 我在https://jsfiddle.net/bindrid/oywvh1ek/6/上做了一个jsFiddle
解决方案2
0 2017-12-21 09:01:34
Try adding your data in a different variable with only the 'value' part of the key-value pair in it. 尝试将数据添加到仅包含键值对的“值”部分的其他变量中。 For example, in the case of {"vehicle":"Audi"}, your 'data' variable should have only ["Audi"] in it. 例如，对于{“ vehicle”：“ Audi”}，您的'data'变量中应仅包含[“ Audi”]。
The below code worked perfectly for me. 下面的代码对我来说非常合适。
$("<your_table_name>").DataTable({
data:data,
fixedHeader:true,
"scrollX": true,
"scrollY": "200px",
"scrollCollapse": true,
columns: [
{ title: 'Vehicle' },
{ title: 'Serial' }
]
});
解决方案3
0 2022-08-23 20:08:47
I had a problem where my fixedHeader was working until I got about halfway down the page, then it disappeared.我遇到了一个问题，我的 fixedHeader 一直在工作，直到我到达页面的一半左右，然后它就消失了。 Here is what I did to get it working:这是我为使其正常工作所做的工作：
At the top of my JS file:在我的 JS 文件的顶部：
$(document).ready(function () {
DrawDataTable();
//This enables the table header to stick to the top of the page when the user is scrolling
var employeeData = $('#employee-table').DataTable();
employeeData.fixedHeader.adjust();
});
Then in the same JS file, in my jQuery ajax call, I had to add the line of code that says "fixedHeader": true然后在同一个 JS 文件中，在我的 jQuery ajax 调用中，我必须添加显示"fixedHeader": true
Finally, in my HTML file, I had to include the following in my <head> section:最后，在我的 HTML 文件中，我必须在<head>部分中包含以下内容：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.js"></script>
Do not forget that you will also need to include whatever Bootstrap, JavaScript or jQuery scripts or style sheets in the head as well.不要忘记，您还需要在头部包含任何 Bootstrap、JavaScript 或 jQuery 脚本或样式表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.