Column width not matched with header width
Column width not matched with header width
pranaysoni
Posts: 23Questions: 2Answers: 0
Hi,
i am facing problem of column and header width are not matching. we have used fixed header function. so is there any problem of that.
Below is my code in that
var oTable = $('#example').dataTable({
"sDom": 'R<"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": parseInt(PerPageCount),
"bFilter": true,
"bAutoWidth": false,
"aLengthMenu": [[10, 20, 50, 100, 250], [10, 20, 50, 100, 250]],
});
i am facing problem of column and header width are not matching. we have used fixed header function. so is there any problem of that.
Below is my code in that
var oTable = $('#example').dataTable({
"sDom": 'R<"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": parseInt(PerPageCount),
"bFilter": true,
"bAutoWidth": false,
"aLengthMenu": [[10, 20, 50, 100, 250], [10, 20, 50, 100, 250]],
});
This discussion has been closed.
Replies
Allan
Below is my code
i use FixedHeader.js and
hide a column in "fnRowCallback":
and
formate row like
$('td:eq(' + labno + ')', nRow).html('' + aData[labno] + '');
var oTable = $('#example').dataTable({
"sDom": 'R<"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": parseInt(PerPageCount),
"bFilter": true,
"bAutoWidth": false,
"aLengthMenu": [[10, 20, 50, 100, 250], [10, 20, 50, 100, 250]],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
var oTable;
var oTable = $('#example').dataTable();
var oSettings = oTable.fnSettings(); // you can find all sorts of goodies in the Settings
var TotalColumns = aData.length;
var labno;
var PacketNo;
var STONE_STATUS;
var IS_NEW;
var ColumnCount = $('#Table1 >thead >tr >th').length; //Get Number Of Column in Grid
//original table #example
$('#Table1 >thead >tr >th').each(function (index) {
if ($(this).text() == "Lab") {
labno = index;
}
if ($(this).text() == "Packet No") {
PacketNo = index;
}
if ($(this).text() == "STONE_STATUS") {
STONE_STATUS = index;
}
if ($(this).text() == "IS_NEW") {
IS_NEW = index;
}
if ($(this).text() == "CERTI_LINK") {
CERTI_LINK = index;
}
if ($(this).text() == "Cart") {
CHK_CART = index;
}
if ($(this).text() == "Watch") {
CHK_WATCH = index;
}
if ($(this).text() == "Office") {
CHK_OFFICE = index;
}
if ($(this).text() == "Order") {
CHK_ORDER = index;
}
if ($(this).text() == "Select") {
CHK_SELECT = index;
}
if ($(this).text() == "Diamond DNA") {
REAL_IMAGE = index;
// alert("index" + REAL_IMAGE);
// alert("with data" + aData[REAL_IMAGE]);
}
if ($(this).text() == "DIAGRAM_IMAGE") {
DIAGRAM_IMAGE = index;
}
if ($(this).text() == "HEART_IMAGE") {
HEART_IMAGE = index;
}
if ($(this).text() == "ARROW_IMAGE") {
ARROW_IMAGE = index;
}
if ($(this).text() == "ASST_SCOPE_IMAGE") {
ASST_SCOPE_IMAGE = index;
}
if ($(this).text() == "CERTI_IMAGE") {
CERTI_IMAGE = index;
}
if ($(this).text() == "VIDEO_PATH") {
VIDEO_PATH = index;
}
});
oTable.fnSetColumnVis(STONE_STATUS, false);
oTable.fnSetColumnVis(IS_NEW, false);
oTable.fnSetColumnVis(CERTI_LINK, false);
oTable.fnSetColumnVis(DIAGRAM_IMAGE, false);
oTable.fnSetColumnVis(HEART_IMAGE, false);
oTable.fnSetColumnVis(ARROW_IMAGE, false);
oTable.fnSetColumnVis(ASST_SCOPE_IMAGE, false);
oTable.fnSetColumnVis(CERTI_IMAGE, false);
oTable.fnSetColumnVis(VIDEO_PATH, false);
if (aData[1] == "select") {
// alert("check");
$('td:eq(1)', nRow).html('');
$('td:eq(1)', nRow).removeClass("Expand");
//
}
$('td:eq(' + labno + ')', nRow).html('' + aData[labno] + '');
$('td:eq(' + labno + ')', nRow).removeClass("Expand");
return nRow;
}
});
$('input[type=checkbox]').click(function (event) { event.stopPropagation() });
var oFH = new FixedHeader(oTable);