我使用jquery插件fixedheadertable.js使用以下代码修复标题和最左边的列 在表格渲染后,使用ajax调用动态附加表格,我们应用fixedheadertable函数,如下所示
$.ajax({
url: "randomname.ashx?operationType=getrandomname",
data: { "personId": $("#hdnPersonId").val() },
success: function (outputData) {
if (outputData == "" || outputData == []) {
$("#li_Lab").append("<li> <a id='' href='javascript:void(0);' class='')'>No Data to Show</a></li>").trigger('create');
return false;
}
var data = JSON.parse(outputData);
for (var key in data) {
$("#li_Lab").append("<li> <a id='liLab_" + key + "' href='javascript:void(0);' onclick=appendLabTable(" + key + ");><input type='checkbox' id='chk_LiLab_" + key + "' checked /><label for='chk_LiLab_" + key + "'>" + data[key].ID + "</label></a></li>").trigger('create');
labtestreport(data[key].ID, key);// function to append table
labDataArrName.push({ 'name': data[key].ID, 'id': key })
}
}
});
setTimeout(function () {
callFixedHearderTable();
}, 6000);
}
function callFixedHearderTable() {
$("#tbl_Lab").fixedHeaderTable(
{
altClass: 'odd',footer: true,fixedColumns: 1,
});
}
文件导入序列
<script src="js/jquery-migrate-3.0.1.js" type="text/javascript"></script>
<link href="css/960.css" rel="stylesheet" media="screen" />
<link href="css/defaultTheme.css" rel="stylesheet" media="screen" />
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.fixedheadertable.min.js" type="text/javascript"></script>
<link href="css/960.css" rel="stylesheet" media="screen" />
<link href="css/defaultTheme.css" rel="stylesheet" media="screen" />
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
<script src="js/jquery.fixedheadertable.min.js" type="text/javascript"></script>
<!--End of html -->
<script src="js/dashboard.js" type="text/javascript"></script> <!-- Script which has the ajax function-->