Fixed header problem

premkumar

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 );

allan

http://datatables.net/forums/discussion/9719/how-to-ask-for-help - Give us a link to a test case please.

Allan

premkumar

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 );

});
//]]>