Datatbles Integration with Ace Admin Theme

arti6genesis

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

allan

I'm afraid I'm not sure what would cause that. We'd need a link to a test page showing the problem so I can debug it.

Allan

arti6genesis

Thanks Allan for your quick response.I will probably send you the link to the test page on Monday morning.

Meanwhile if you have any clue as to what could cause that you can provide me hints.

Thanks Again..:)

arti6genesis

Hi Allan,

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

lowrymel

I am using ACE and it is preforming real well with dataTables. Looking at your screen shot your ace-settings-container is on top of the Search. It is possible that your HTML is off.

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

arti6genesis

Thanks lowrymel,Are you using Scroller plugin with datatables and it is worrking fine??
This does not solve my problem...:(

arti6genesis

Hi Allan,

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

allan

In the ace.min.css file there is:

> .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

arti6genesis

Hi 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 ???

allan

Not sure what you mean by resets the thead value - nTHead is always present - but it will point to the header above the scrolling region.

The CSS fix should work...

Allan

arti6genesis

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?

arti6genesis

Thanks Allan,Its working Now..Thanks for the css fix.

zh1cheng

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.