Column widths will not change and the table is spilling out of the wrapper container
Column widths will not change and the table is spilling out of the wrapper container
MoiD101
Posts: 8Questions: 0Answers: 0
I have been trying all sorts here and cannot seem to get the columns to change size despite turning off bautowidth to false etc (that seems to have no effect on or off), i have tried forcing the with with the aocolumns also with no success. Im not a strong coder by any means, so cannot rule myself out as the problems ;)
I think it has something to do with the prepend section as when i remove it, it shows as expected and i can control the overall width etc.
Here is the code im using to apply datatables (its the last javascript on that aspx page):
[code] //Apply JQuery Datatables to the Gridview.
var oTable = $("#MainContent_gvPSTNResults").dataTable({
"fnInitComplete": function () {
//Adds a table just above the main table which is used for the filtering of the columns indiviually
$("#MainContent_gvPSTNResults thead").prepend(
""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
//+ ""
);
var oSettings = $('#MainContent_gvPSTNResults').dataTable().fnSettings();
for (var i = 0; i < oSettings.aoPreSearchCols.length; i++) {
if (oSettings.aoPreSearchCols[i].sSearch.length > 0) {
$("thead input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("thead input")[i].className = "";
}
}
},
"bStateSave": true, //Remember the changes to the datatables IE the text sort criteria.
"bPaginate": false, //Turn off paging, the team will want to see all of the records in one page.
"bAutoWidth": false, //Dont need autowidth ASP.net GridView handles this.
"sDom": '<"top"if>t<"bottom"i><"clear">',//places the table info and text filtering above the table.
"aaSorting": [], //Remove all initial sorting (prevents the edit column being sorted initially).
"aoColumns": [
{ "bSortable": "false" },//remove column sorting for each column (aoColumnDefs did not work in compatability mode)
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false", "width": "175px" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" }
]
});
/*filtering*/
$("thead input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("thead input").index(this));
});
var asInitVals = new Array();
$("thead input").each(function (i) {
asInitVals[i] = this.value;
});
$("thead input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("thead input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
});
[/code]
I think it has something to do with the prepend section as when i remove it, it shows as expected and i can control the overall width etc.
Here is the code im using to apply datatables (its the last javascript on that aspx page):
[code] //Apply JQuery Datatables to the Gridview.
var oTable = $("#MainContent_gvPSTNResults").dataTable({
"fnInitComplete": function () {
//Adds a table just above the main table which is used for the filtering of the columns indiviually
$("#MainContent_gvPSTNResults thead").prepend(
""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
//+ ""
);
var oSettings = $('#MainContent_gvPSTNResults').dataTable().fnSettings();
for (var i = 0; i < oSettings.aoPreSearchCols.length; i++) {
if (oSettings.aoPreSearchCols[i].sSearch.length > 0) {
$("thead input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("thead input")[i].className = "";
}
}
},
"bStateSave": true, //Remember the changes to the datatables IE the text sort criteria.
"bPaginate": false, //Turn off paging, the team will want to see all of the records in one page.
"bAutoWidth": false, //Dont need autowidth ASP.net GridView handles this.
"sDom": '<"top"if>t<"bottom"i><"clear">',//places the table info and text filtering above the table.
"aaSorting": [], //Remove all initial sorting (prevents the edit column being sorted initially).
"aoColumns": [
{ "bSortable": "false" },//remove column sorting for each column (aoColumnDefs did not work in compatability mode)
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false", "width": "175px" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" },
{ "bSortable": "false" }
]
});
/*filtering*/
$("thead input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("thead input").index(this));
});
var asInitVals = new Array();
$("thead input").each(function (i) {
asInitVals[i] = this.value;
});
$("thead input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("thead input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
});
[/code]
This discussion has been closed.