How to clear up Fixedheader on Ajax loaded Pages?
How to clear up Fixedheader on Ajax loaded Pages?
dev1test
Posts: 1Questions: 1Answers: 0
I am trying to use Fixheader property, on a table obtained from an ajax request. This part works fine and a fixed header gets applied to the top of the page.
But if I load another page, using ajax (e.g Add Form may be) the fixed header still remains and does not get cleared up. I would like to know if this is supported or not. As I was looking a solution that was easy to implement across multiple ajax pages..
I have tried solving this issue using datatables 1.10.9 and FixedHeader 3.0.0 but was not able to fix it. The example provided by me refers to DataTables 1.10.4
Here is the sample code for your reference:
<head>
<link rel="stylesheet" type="text/css" href="assets/DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables-1.10.4/extensions/FixedHeader/css/dataTables.fixedHeader.css">
<script type="text/javascript" src="assets/DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/DataTables-1.10.4/extensions/FixedHeader/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript">
var table;
var table2;
$(document).ready(function() {
callFun();
});
//this function loads the table and applies the fixed header
function callFun(){
$.ajax({url: "demo1.php", success: function(result){
$("#div1").html(result);
table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader(table);
}});
}
//a new page.. e.g and add form -- but the fixed header shows up
function callFun2(){
$.ajax({url: "demo3.php", success: function(result){
$("#div1").html(result);
}});
}
</script>
</head>
<body>
<div id="maindiv" style="border:1px solid;"><span onclick="callFun()" style="cursor:pointer;">Table1</span> <span onclick="callFun2()" style="cursor:pointer;">Form3</span>
</div>
<div id="div1"></div>
</body>
This discussion has been closed.
Answers
Have you found a solution?