Datatbles Integration with Ace Admin Theme

Datatbles Integration with Ace Admin Theme

arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
edited January 2014 in DataTables 1.9
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

Replies

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    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..:)
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    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
  • lowrymellowrymel Posts: 20Questions: 4Answers: 0
    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
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    Thanks lowrymel,Are you using Scroller plugin with datatables and it is worrking fine??
    This does not solve my problem...:(
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    edited January 2014
    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 ???
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    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?
  • arti6genesisarti6genesis Posts: 9Questions: 0Answers: 0
    Thanks Allan,Its working Now..Thanks for the css fix.
  • zh1chengzh1cheng Posts: 1Questions: 0Answers: 0

    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.

This discussion has been closed.