CODEWITHSUNDEEP
javascriptjquerysalesforceapex-codedatatables
Black Mamba
Black Mamba

Reputation: 205

Multiple Fixed Headers in Datatables

recently my boss asked me to implement the fixed header plug-in for datatables plug-in in salesforce.

The way my code is designed is that every time search button is clicked i have a callback function to the db as well as an oncomplete function re-initializing the data tables.

Looking at the sample code for fixed headers i put the call to the function new FixedHeader(oTable); inside the initialization block. Instead of getting re-initialized every time, the header is getting created again and again. So with each call i have a new floating header plus the old one in some misplaced corner as well, how do i change this?

function Kudos()
{
    oTable = $('.datatable').dataTable({
                "iDisplayLength": 100,
                "sDom": '<C><"H"T><"clear"><"H">t<"F"ip>',
                 "bRetrieve": true,
                 "aoColumnDefs": [ {
                 "aTargets": [3,4,5,6,7,8,9,10],
                 "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if ( sData < "0" ) {
                      $(nTd).css('color', 'red')
                      $(nTd).css('font-weight', 'bold')
                    }
                    }
                    } ],
                "oTableTools": 
                {
                    "sSwfPath": "{!$Resource.SWF_File}",
                    "aButtons": [ 
                    {
                        "sExtends": "csv",
                        "sFileName": "PortFolio.csv",
                        "sButtonText":"Export"

                    }, "print" ]
                },
                "oColVis": 
                {
                    "activate": "mouseover"
                },
                "bAutoWidth": false,
                "bJQueryUI": true, 
                "sPaginationType": "full_numbers",
                "aaSorting": [[ 2, "asc" ]] ,
                "bLengthChange": false, 
                "bFilter": true,
                 "aoColumns": [
                  { "sWidth": "6%" },
                   {"sWidth": "6%"},
                  {"sWidth": "6%"},
              { "sWidth": "6%" },
             {"sWidth": "6%"},
              {"sWidth": "6%"},
                     { "sWidth": "6%" },
                     {"sWidth": "6%"},
                     {"sWidth": "6%"},
                       { "sWidth": "6%" },
                   {"sWidth": "6%"},
                  {"sWidth": "6%"},
                 { "sWidth": "6%" },
                   {"sWidth": "6%"},
                  {"sWidth": "6%"}
                           ]
                      });


               new FixedHeader( oTable );

  }

Upvotes: 1

Views: 1535

Answers (1)

Black Mamba
Black Mamba

Reputation: 205

k, it seems this in a known bug. the unavailability of something like a destroy function for fixed headers is looking to be included in the next release of FixedHeader plug-in for datatables. basically there is no fix atm

As i am working on Salesforce, it is very easy to re-render parts of the VF page, without reloading the entire page, so i ended up rebuilding the DataTable upon each render. That fixed the issue.

Upvotes: 1

Related Questions