我一直在使用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;
}
} }]
});
我遇到一些情况,当所有数据都不适合页面时,用户需要向下滚动才能看到所有信息。我尝试使用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">
但不适合我:(
我做错了什么?
答案 0 :(得分:2)
我找到了一个可能有帮助的DataTable插件。有关它的信息位于https://datatables.net/extensions/scroller/
使用这个,我的定义如下:
var table1 = $('#example').DataTable({ paging: true,
scrollY: 200,
deferRender: true,
scroller: true });
做了一个jsFiddle
答案 1 :(得分:0)
尝试将您的数据添加到另一个仅包含“&#39;值”的变量中。它中键值对的一部分。例如,在的情况下 {&#34;车辆&#34;:&#34;奥迪&#34;}, 您的数据&#39;变量应该只有[&#34;奥迪&#34;]。
以下代码对我来说非常合适。
$("<your_table_name>").DataTable({
data:data,
fixedHeader:true,
"scrollX": true,
"scrollY": "200px",
"scrollCollapse": true,
columns: [
{ title: 'Vehicle' },
{ title: 'Serial' }
]
});