Datatbles Integration with Ace Admin Theme
Datatbles Integration with Ace Admin Theme
arti6genesis
Posts: 9Questions: 0Answers: 0
Hi Allan,
Great Plugin..Thanks For this awesome tool.
One problem is driving me nuts and I have searched entire web but couldn't find any solution.Kindly help.I have integrated vertical scrollable datatables(server side using sAjaxSource) with Ace Admin theme for reponsiveness(bootstrap,ace.min.css/js) files etc.
The moment I integrated it with Ace theme for responsiveness it displays 2 theads.The 2nd thead is static one which displays only sorting icons that do not work but the 2nd header is properly aligned.
The first thead which is formed as a result of aocolumns attribute of datatbles is not at all properly aligned and is not at all responsive.
I have tried all solutions to remove that header like 1)using fnColumnAdjustSizing 2)a div outside table 3)border property set to seperate and all 4)using callbacks all possible solutions but of no help.
Please Help.You are the last hope.
Here's the video url of datatbles.You can see a blank line below the main header.I have hidden it using visibility:hidden as of now
http://screencast.com/t/48bP7ypIkzJ
Great Plugin..Thanks For this awesome tool.
One problem is driving me nuts and I have searched entire web but couldn't find any solution.Kindly help.I have integrated vertical scrollable datatables(server side using sAjaxSource) with Ace Admin theme for reponsiveness(bootstrap,ace.min.css/js) files etc.
The moment I integrated it with Ace theme for responsiveness it displays 2 theads.The 2nd thead is static one which displays only sorting icons that do not work but the 2nd header is properly aligned.
The first thead which is formed as a result of aocolumns attribute of datatbles is not at all properly aligned and is not at all responsive.
I have tried all solutions to remove that header like 1)using fnColumnAdjustSizing 2)a div outside table 3)border property set to seperate and all 4)using callbacks all possible solutions but of no help.
Please Help.You are the last hope.
Here's the video url of datatbles.You can see a blank line below the main header.I have hidden it using visibility:hidden as of now
http://screencast.com/t/48bP7ypIkzJ
This discussion has been closed.
Replies
Allan
Meanwhile if you have any clue as to what could cause that you can provide me hints.
Thanks Again..:)
Kindly find the url for the datatatable issue I am facing...
It is basically a static json file the datatable is reading that is Why the numbering is not accurate.
http://qait.qaitdevlabs.com/acedemo/tables.html
Hoping for your quick response.
Thanks in advance
At the table , this works well for me
[code]
<!-- Client Table -->
<!-- .col-xs-12-->
<!-- /.row -->
[/code]
also I commented out the dataTables references in 'assets/css/uncompressed/ace.css' choosing to stay with Alan's version of the CSS
HTH
This does not solve my problem...:(
I have achieved a bit of progress using callbacks..Still one issue persists
I used
fnDrawCallback: function(oSettings) {
$(".dataTables_scroll .dataTables_scrollBody table thead").html($(".dataTables_scrollHead table thead tr:first-child"));
}
Now the second header is replaced by 1st header on page load but on sorting or filtering the header gets lost....Please Suggest
> .dataTable th[class*="sort"]::after
That is what is causing the problem. Try:
[code]
div.dataTables_scrollHead .dataTable th[class*="sort"]::after
[/code]
instead.
Allan
Thanks for your response.I tried this..This does not solve my problem
Lets forget this solution..I am doing it through jquery and I am around 60% successful..Just need a small help
fnDrawCallback: function(oSettings) {
var thead = oSettings.nTHead;
console.log($(thead).children());
$(".dataTables_scroll .dataTables_scrollBody table thead").html($(thead).children());
// $(".dataTables_scroll .dataTables_scrollBody table thead").html($(".dataTables_scrollHead table thead tr:first-child"));
}
Whe i use this callback,every thing goes fine but when I sort the headers disappear because it resets the thead value to blank ???
The CSS fix should work...
Allan
You are right ,your css fix works but its of no use because my aim is not to remove the 2 nd header because it is responsive header.
That's why I assigned the html of 1st header to 2nd header in fnDrawcallback and its working good except for sorting when the header turns blank?
I encountered similar issue with ACE theme. How did your guys fixed the issue?
Could you let me know how to remove the second header when sScrollX enabled for datatables?
thank you.