Controlling table width in Editor 1.2.1

agustin_garciaromero

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

allan

DataTables will always show all columns, unless you tell it otherwise ( bVisible / fnSetColumnVis ) - it won't dynamically add and remove columns based on screen size. If you want horizontal scrolling, that can be enabled using sScrollX .

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

agustin_garciaromero

Hi 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

I'd need to see a test page showing that issue I'm afraid. I've not seen that issue before.

Allan

agustin_garciaromero

Test page is found at: http://royalelandscaping.com/pfm/index.php?option=com_pfm

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...

allan

Thanks for the link. When I load the page up, I get 2 syntax error warnings from two different Javascript files. For example:

[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

agustin_garciaromero

Hello,
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

allan

I was using Webkit's Inspector and it took me straight to the error.

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

agustin_garciaromero

Yes, that's the error I'm seeing as well.
I changed the minified version as suggested and upgraded to v1.9.4.
The error is still the same.

Regards

allan

Ah - you are using an outdated version of jQuery UI and jQuery 1.8. There is a bug in jQuery UI which is now fixed in their latest versions which causes this issue. Update your jQuery UI and it should go away.

Allan

agustin_garciaromero

Yes, that fixed the issue and allowed me to enable the scrolling, thanks so much for your close follow up