Fixed header problem

Fixed header problem

premkumarpremkumar Posts: 9Questions: 0Answers: 0
edited March 2013 in FixedHeader
Hi Allan,

I am using datatables to list the data's in table. Now, i want to integrate fixed header for the table head. I have already change the design of table head. When using fixed header code in my older code, new header is showing along with the older table header. I used following code.

new FixedHeader( oTable );

Replies

  • allanallan Posts: 61,438Questions: 1Answers: 10,051 Site admin
    http://datatables.net/forums/discussion/9719/how-to-ask-for-help - Give us a link to a test case please.

    Allan
  • premkumarpremkumar Posts: 9Questions: 0Answers: 0
    Hi Allan,

    Here i have showed my code for displaying records using datatables with several filter option. Now i want to integrate fixed header option to the existing code. Please guide me to integrate. To visit our live url: http://jetbus.in and type source,destination,date will show the search result page. In search result page, i want to integrate. We also changed the design of table display.


    //<![CDATA[
    var minVal = '';
    var maxVal = '';
    var jetBus = jQuery.noConflict();

    jetBus(document).ready(function(){

    var oTable = jetBus('#searchTableOneWay').dataTable({
    "oLanguage": {
    "sZeroRecords": "Sorry

    No buses available for this route right now. Please try again"
    },

    'sAjaxSource':'<?php echo $url; ?>/onewaySearchBusQuery.php',
    "aoColumns":[null,null,null,null,null,null,{"iDataSort":7},null,{"iDataSort":9},null,null,{"iDataSort":10},null,null],
    "aaSorting": [ [10,'desc'] ],
    "bPaginate": false,
    'sProcessing': true,
    "bAutoWidth": true,
    "bScrollCollapse": true,
    "sScrollY": "400px",
    "sDom": '<"top"i>W<"clear">lfrtip',
    "oColumnFilterWidgets": {
    "aiExclude": [0,1,2,3,4,5,6,7,8,9,10,11,12,13]
    },"fnInitComplete": function(oSettings, json)

    {

    jetBus('#tallContent').hide();
    jetBus('#header_line').fadeIn();
    jetBus('#container_hide').fadeIn();
    jetBus('#content_search_result.box_1_onewaysearchtable').fadeIn();
    jetBus('#footer_div').fadeIn();
    colVal = _fnGetColumnValues1(oTable.fnSettings(),12, true, true, true);
    Array.prototype.max = function () {
    return Math.max.apply(Math, this);
    };
    Array.prototype.min = function () {
    return Math.min.apply(Math, this);
    };
    maxVal = colVal.max();
    minVal = colVal.min();
    if(maxVal != '')
    {
    document.getElementById('maxValue').innerHTML = maxVal;
    }
    if(minVal != '')
    {
    document.getElementById('minValue').innerHTML = minVal;
    }
    jetBus( ".selector" ).slider({ animate: true });

    var amount1 = jetBus("#amount");
    var slider = jetBus('#price').slider({

    range: true, // necessary for creating a range slider
    min: minVal, // minimum range of slider
    max: maxVal, //maximimum range of slider
    values: [minVal, maxVal], //initial range of slider step: 1,
    slide: function(event, ui) { // This event is triggered on every mouse move during slide.
    amount1.html('Rs ' + ui.values[0] + ' - Rs ' + ui.values[1]);//set value of amount span to current slider values
    },
    stop: function(event, ui)
    {//This event is triggered when the user stops sliding.
    oTable.fnDraw();
    }
    });

    jetBus.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {

    if(jetBus("#price").slider('values', 0) > 0) {
    {
    return aData[12] >= jetBus("#price").slider('values', 0) && aData[12] <= jetBus("#price").slider('values', 1)
    }
    }
    });
    aData = _fnGetColumnValues(oTable.fnSettings(),0, true, true, true);
    //aData1 = _fnGetColumnValues(oTable.fnSettings(),2, true, true, true);
    //aData2 = _fnGetColumnValues(oTable.fnSettings(),3, true, true, true);
    loadCheck(aData);
    }

    });

    function loadCheck(aData)
    {
    oTable.columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [ null,{ type: "checkbox",values:aData},null,null,null,null,null,null,null,null,null,null,null,null]

    });

    }
    function _fnGetColumnValues1(oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {


    // check that we have a column id
    if (typeof iColumn == "undefined") return new Array();

    // by default we only wany unique data
    if (typeof bUnique == "undefined") bUnique = true;

    // by default we do want to only look at filtered data
    if (typeof bFiltered == "undefined") bFiltered = true;

    // by default we do not wany to include empty values
    if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;

    // list of rows which we're going to loop through
    var aiRows;

    // use only filtered rows
    if (bFiltered == true) aiRows = oSettings.aiDisplay;
    // use all rows
    else aiRows = oSettings.aiDisplayMaster; // all row numbers

    // set up data array
    var asResultData = new Array();

    for (var i = 0, c = aiRows.length; i < c; i++) {
    iRow = aiRows[i];
    var aData = oTable.fnGetData(iRow);
    var sValue = aData[iColumn];

    // ignore empty values?
    if (bIgnoreEmpty == true && sValue.length == 0) continue;

    // ignore unique values?
    else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

    // else push the value onto the result data array
    else asResultData.push(sValue);
    }
    //alert(asResultData);
    return asResultData.sort();
    }

    function _fnGetColumnValues(oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {

    // check that we have a column id
    if (typeof iColumn == "undefined") return new Array();

    // by default we only wany unique data
    if (typeof bUnique == "undefined") bUnique = true;

    // by default we do want to only look at filtered data
    if (typeof bFiltered == "undefined") bFiltered = true;

    // by default we do not wany to include empty values
    if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;

    // list of rows which we're going to loop through
    var aiRows;

    // use only filtered rows
    if (bFiltered == true) aiRows = oSettings.aiDisplay;
    // use all rows
    else aiRows = oSettings.aiDisplayMaster; // all row numbers

    // set up data array
    var asResultData = new Array();

    for (var i = 0, c = aiRows.length; i < c; i++) {
    iRow = aiRows[i];
    var aData = oTable.fnGetData(iRow);
    var sValue = aData[iColumn];

    // ignore empty values?
    if (bIgnoreEmpty == true && sValue.length == 0) continue;

    // ignore unique values?
    else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

    // else push the value onto the result data array
    else asResultData.push(sValue);
    }
    //alert(asResultData);
    return asResultData.sort();
    }

    oTable.fnSetColumnVis( 0, false );
    oTable.fnSetColumnVis( 2, false );

    oTable.fnSetColumnVis( 3, false );
    oTable.fnSetColumnVis( 7, false );
    oTable.fnSetColumnVis( 9, false );
    oTable.fnSetColumnVis( 10, false );
    oTable.fnSetColumnVis( 12, false );

    });
    //]]>
This discussion has been closed.