Jquery 制表器:在同一页中冻结多个制表器的表头,不固定高度

Jquery 制表器:在同一页中冻结多个制表器的表头,不固定高度,jquery,css,tabulator,Jquery,Css,Tabulator,我的网页有3个以上的制表器,表之间也有一些图表 根据要求,我们不固定桌子的尺寸。因此,根据数据,工作台的高度会有所不同 我想修复UI中表的标题。这样,在垂直滚动的最后,标题将保持固定,只有数据被滚动 var tabledata=[ {id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1}, {id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车

我的网页有3个以上的制表器,表之间也有一些图表

根据要求,我们不固定桌子的尺寸。因此,根据数据,工作台的高度会有所不同

我想修复UI中表的标题。这样,在垂直滚动的最后,标题将保持固定,只有数据被滚动

var tabledata=[
{id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1},
{id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车:真},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,等级:0,上校:“绿色”,国防部:“1982年5月22日”,汽车:“真实”},
{id:4,姓名:“Brendon Philips”,进步:100,性别:“男性”,等级:1,col:“橙色”,dob:“01/08/1980”},
{id:5,姓名:“Margret Marmajuke”,进步:16,性别:“女性”,评级:5,col:“黄色”,dob:“31/01/1999”},
{id:6,姓名:“Frank Harbours”,进步:38,性别:“男性”,等级:4,上校:“红色”,dob:“12/05/1966”,汽车:1},
{id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1},
{id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车:真},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,等级:0,上校:“绿色”,国防部:“1982年5月22日”,汽车:“真实”},
{id:4,姓名:“Brendon Philips”,进步:100,性别:“男性”,等级:1,col:“橙色”,dob:“01/08/1980”},
{id:5,姓名:“Margret Marmajuke”,进步:16,性别:“女性”,评级:5,col:“黄色”,dob:“31/01/1999”},
{id:6,姓名:“Frank Harbours”,进步:38,性别:“男性”,等级:4,上校:“红色”,dob:“12/05/1966”,汽车:1},
{id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1},
{id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车:真},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,等级:0,上校:“绿色”,国防部:“1982年5月22日”,汽车:“真实”},
{id:4,姓名:“Brendon Philips”,进步:100,性别:“男性”,等级:1,col:“橙色”,dob:“01/08/1980”},
{id:5,姓名:“Margret Marmajuke”,进步:16,性别:“女性”,评级:5,col:“黄色”,dob:“31/01/1999”},
{id:6,姓名:“Frank Harbours”,进步:38,性别:“男性”,等级:4,上校:“红色”,dob:“12/05/1966”,汽车:1},
{id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1},
{id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车:真},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,等级:0,上校:“绿色”,国防部:“1982年5月22日”,汽车:“真实”},
{id:4,姓名:“Brendon Philips”,进步:100,性别:“男性”,等级:1,col:“橙色”,dob:“01/08/1980”},
{id:5,姓名:“Margret Marmajuke”,进步:16,性别:“女性”,评级:5,col:“黄色”,dob:“31/01/1999”},
{id:6,姓名:“Frank Harbours”,进步:38,性别:“男性”,等级:4,上校:“红色”,dob:“12/05/1966”,汽车:1},
{id:1,姓名:“奥利·鲍勃”,进步:12,性别:“男性”,等级:1,上校:“红色”,dob:“1984年2月19日”,汽车:1},
{id:2,姓名:“Mary May”,进步:1,性别:“女性”,等级:2,上校:“蓝色”,dob:“14/05/1982”,汽车:真},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,等级:0,上校:“绿色”,国防部:“1982年5月22日”,汽车:“真实”},
];
//初始化表
var table=新制表器(“tblData1”{
data:tabledata,//将数据分配给表
autoColumns:false,//从数据字段名称创建列
是的,
列:[//定义表列
{标题:“名称”,字段:“名称”,编辑器:“输入”,宽度:“15%”,
{标题:“性别”,字段:“性别”,宽度:95,编辑:“选择”,编辑参数:{值:[“男性”,“女性”]},宽度:“15%”,
{title:“Color”,field:“col”,headerFilter:true,width:130,editor:“input”,width:“15%”,
{标题:“出生日期”,字段:“dob”,宽度:130,分类器:“日期”,hozAlign:“中心”,宽度:“15%”,
{标题:“驾驶员”,字段:“汽车”,宽度:90,hozAlign:“中心”,格式化程序:“滴答声”,分类器:“布尔”,编辑器:真,宽度:“16%”,
{标题:“测试”,宽度:“24%”,
栏目:[
{标题:“Test1”,宽度:“12%”,
{标题:“Test2”,宽度:“12%”,
]},
],
});
var table=新制表器(“#tblData2”{
data:tabledata,//将数据分配给表
autoColumns:false,//从数据字段名称创建列
是的,
列:[//定义表列
{标题:“名称”,字段:“名称”,编辑器:“输入”,宽度:“15%”,
{标题:“性别”,字段:“性别”,宽度:95,编辑:“选择”,编辑参数:{值:[“男性”,“女性”]},宽度:“15%”,
{title:“Color”,field:“col”,headerFilter:true,width:130,editor:“input”,width:“15%”,
{标题:“出生日期”,字段:“dob”,宽度:130,分类器:“日期”,hozAlign:“中心”,宽度:“15%”,
{标题:“驾驶员”,字段:“汽车”,宽度:90,hozAlign:“中心”,格式化程序:“滴答声”,分类器:“布尔”,编辑器:真,宽度:“16%”,
{标题:“测试”,宽度:“24%”,
栏目:[
{标题:“Test1”,宽度:“12%”,
{标题:“Test2”,宽度:“12%”,
]},
],
});






如果要这样做,则必须在表格上指定最大高度,否则它将不知道何时显示滚动条

如果不设置
height
maxHeight
设置,则表格将假定您希望显示表格中的所有数据,此时表格将占据其最大高度,因此任何滚动都将发生在其父元素或页眉与表格一起滚动的页面正文上

height
maHeight
可以在任何有效的CSS height值中设置

var table=新制表器(“示例表”{
maxHeight:“100%”,//不要让表的高度大于其父元素的高度