Controlling table width in Editor 1.2.1
Controlling table width in Editor 1.2.1
agustin_garciaromero
Posts: 42Questions: 0Answers: 0
Hello,
Where can I find a reference for guidelines on how to control how much a DataTable extends on the screen?
I'm trying to control parent's DIV width, but no matter what I do, the DataTable columns expand to show all the columns without limiting to the screen's size.
I can try to hide some columns but that's no the idea, maybe a horizontal scroll on the displayed table may help.
Thanks
Where can I find a reference for guidelines on how to control how much a DataTable extends on the screen?
I'm trying to control parent's DIV width, but no matter what I do, the DataTable columns expand to show all the columns without limiting to the screen's size.
I can try to hide some columns but that's no the idea, maybe a horizontal scroll on the displayed table may help.
Thanks
This discussion has been closed.
Replies
I notice your Editor trial expired a couple of weeks ago. How did you find it while you were using it? Did it do everything you need, or are there any features you'd like to see added?
Allan
I looked into the sScrollX function and if I do a direct implementation of the example code, it works just fine.
[code]
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
[/code]
However, if I try to use it inside the Editor's generated JS file, it breaks the generation of the page with errors like shown below from the FireBug console:
...
TypeError: a.charCodeAt is not a function
document.id('wrapper').setStyle('width', width);
...
By Editor's file I mean:
[code]
...
var editor = new $.fn.dataTable.Editor( {
...
}
$('#test').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"sDom": "Tfrtip",
"sAjaxSource": ...
}
...
[/code]
Regarding your other comment, please find the question I sent trough the Contact form.
Regards
Allan
If I just comment the line ""sScrollX": "100%"," on the .js datatable file, everything works fine, otherwise all datatable related calls are broken on their functionality.
(At this moment, that line is enabled in the test site, that's why everything seems broken)
It doesn't make difference whether I put it at the beginning ("sDom": "Tfrtip") or at the end of the .dataTable{ code.
I also noticed that if I leave both "sScrollXInner" and "bScrollCollapse" enabled, nothing is broken.
[code]
$('#inc_gross_income_items').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": ...
...
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
} );
[/code]
I believe it's a conflict with mootols, due to the type of errors shown in the FireBug console:
SyntaxError: missing } after property list
[Break On This Error]
} );
mootools-core.js (line 182, col 2)
SyntaxError: missing } after property list
[Break On This Error]
} );
table....ords.js (line 263, col 2)
TypeError: a.charCodeAt is not a function
[Break On This Error]
...==null)return"0px";if(typeof a=="number"){if(a<0)return"0px";return a+"px"}var b...
[code]
$('#goals_jars').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": strUrlDT + "php/table.goals_jars.php",
"aoColumns": [
{
"mDataProp": "master_id"
},
{
"mDataProp": "user_id"
},
{
"mDataProp": "user_name"
},
{
"mDataProp": "description"
},
{
"mDataProp": "goal_type"
},
{
"mDataProp": "linked_account"
},
{
"mDataProp": "current_balance"
},
{
"mDataProp": "goal_amount"
},
{
"mDataProp": "due_date"
},
{
"mDataProp": "memo"
}
],
"events": {
"onSetData": function (json, setData, action) {
if ( action === "create" || action === "edit" ) {
setData['master_id'] = json.data['master_id'];
setData['user_id'] = json.data['user_id'];
setData['user_name'] = json.data['user_name'];
setData['description'] = json.data['description'];
setData['goal_type'] = json.data['goal_type'];
setData['current_balance'] = json.data['current_balance'];
setData['goal_amount'] = json.data['goal_amount'];
setData['due_date'] = json.data['due_date'];
setData['memo'] = json.data['memo'];
}
}
},
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}, "fnServerData": function ( sSource, aoData, fnCallback ) { sSource = strUrlDT + 'php/table.goals_jars.php'; $.getJSON( sSource, aoData, function (json) { // Do whatever additional processing you want on the callback, then tell DataTables var type = "Gross Income"; $.each(json.aaData, function(intIndex, objRow){ //insertSummaryRecord(incomeHash, objRow.user_id, objRow.recipient, type, objRow.category, objRow.payment_amount, objRow.periodicity); }); fnCallback(json); } ); }
} );
[/code]
which right enough is not valid Javascript (the comment in the middle of the line, without line breaks, comments out the rest of the function...!).
Allan
I fixed those issues, they were introduced when transferring from local to on-line server. I don't really know why.
How did you identify the exact code? I tried with Firebug, but it wasn't telling me much, I ended going file by file to find the other one with the issue.
Now, as you can see, there is only one remaining issue, and it's related with enabling/disabling the "'sScrollX': '100%'" statement.
(At least that's the symptom)
Regards
Now I'm getting:
> TypeError: 'undefined' is not a function (evaluating 'a.charCodeAt(a.length-1)')
Its difficult to say exactly what the error is since you are using the minified version of DataTables> Can you use the unminified version please? Also, I'd suggest updating to v1.9.4 just incase it is a bug that has been fixed.
Allan
I changed the minified version as suggested and upgraded to v1.9.4.
The error is still the same.
Regards
Allan