Problem while changing html table property align="left", It affects the search and pagination

amitmehta

Hi,
I am using datatable for rendering data for Dashboard Utility in my application. I am facing one problem while using dataTable. The column width is fixed with corresponding width in the code. But this width is not reflecting in the page. When I am changing the table property align= "left" the width is changed according to the assigned width, but the pagination and search text box moved to out of table to the left side. Also when I am changing the table property align="right" the bottom pagination part appears on the table exactly at the center location.
With align="left", I am getting the column width appears the same according the width I assigned, but the search box and pagination is not rendering properly in this case.

I don't get any work around for the problem.

My main purpose here is to increase the column width which is having longer data, becoz by default it wraps the text and increases the column height.


The datatable script is as below :



jQuery.fn.dataTableExt.oSort['parsesort-asc'] = function(x,y) {
x = parseInt(x.substring(x.lastIndexOf(",")+2,x.lastIndexOf("'")));
y = parseInt(y.substring(y.lastIndexOf(",")+2,y.lastIndexOf("'")));
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['parsesort-desc'] = function(x,y) {
x = parseInt(x.substring(x.lastIndexOf(",")+2,x.lastIndexOf("'")));
y = parseInt(y.substring(y.lastIndexOf(",")+2,y.lastIndexOf("'")));
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {

$('#dashboardTable').dataTable( {
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'20'+
'25'+
'50'+
'100'+
'All'+
' records'
},
"sPaginationType": "full_numbers",
"sDom": 'lfptip',
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "12%"},
{ "sWidth": "18%"},
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false},
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false },
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "6%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "9%", "bSearchable": false, "sType": "parsesort" },
{ "sWidth": "8%", "bSearchable": false }
]
} );

} );



And the Table is as below :

amitmehta

Functional Group
Reconciliation
FrontOffice
Back Office
Links
Discrepancies
Batch Status



All
Included   
Unmatched   
All
Included   
Unmatched   
All
New
All
New  




<!--s:iterator value="dashboardData" status="stat"-->

Functional Group 1
Reconciliation Name
7755
7413
11
7481
7438
36
7402
621
279
43




...
...

....