trying to create a plugin that would let you re-size columns and carousel horizontal scrolling

netameta

I have been using dataTables for some times now and lately i am in a position where i need column resizing and horizontal scrolling.
I dont mean with sScrollx i mean with buttons.

I have managed doing alot of it but it was coded not in a good way and not in a dataTable way (drawcallbacks and so on.)

So I've decided i want to make it a plugin - never done a dataTable plugin before.

Several questions:
Any advices where to start ?
maybe a small demonstration plugin ?
how can i add stuff to DOM, on table initialization ? how can i use it ?

allan

My feature plug-ins tutorial is the best place to get started I'd think: http://datatables.net/blog/Creating_feature_plug-ins . Followed by looking at how the existing plug-ins work.

For column resizing, table-layout:fixed is probably the way to go.

Allan

netameta

Thanks for the fast response.

to begin with what i am trying to do is:
i have variable that holds the original" aoColumns,
I've added aoDrawCallback function. that function take the original aoColumns[index].nTh object save it's outerWidth(true) , then take aoColumns[index].sWidth , deduct outerWith with sWidth, that how i get the padding. i then go over aoColumns and enter the value back in.

Now when i will re-size i will change the "original"aoColumn and call draw.

example:
[code]
oTable.fnSettings().aoDrawCallback.push({"sName":"fnResizeColumns", "fn": function(oSettings){fnResizeColumns(oSettings)}});
oTable.fnDraw();

function fnResizeColumns(oSettings){
$.each(m.aoColumns, function(IColIndex, oColumn){
var iOrigWidth = oColumn.sWidth;
var iOuterWidth = $(oColumn.nTh).outerWidth(true);
var iExtraWidth = iOuterWidth - iOrigWidth;
var iColWidth = oColumn.sWidth + iExtraWidth;
oTable.fnSettings().aoColumns[IColIndex].sWidth = oColumn.sWidth;

$(oTable.fnSettings().aoColumns[IColIndex].nTh).css({"width" : iColWidth, "maxWidth" : iColWidth, "minWidth" : iColWidth});
$.each(oTable.fnSettings().aoData, function(iRowIndex, oRow){
$($(oRow.nTr).find("td")[0]).css({"width" : iColWidth, "maxWidth" : iColWidth});
});
});
}
[/code]



However its seems the width is set each time by its self.

allan

Column width in a table is an absolute pita. I've been working on it in DataTables for 6 years now and still haven't fully got it right. That's why I suggested table-layout: fixed. Then at least you know what is going to happen.

Allan

netameta

so should i not work with sWidth at all ?