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

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

netametanetameta Posts: 39Questions: 0Answers: 0
edited December 2013 in Plug-ins
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 ?

Replies

  • allanallan Posts: 57,730Questions: 1Answers: 9,203 Site admin
    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
  • netametanetameta Posts: 39Questions: 0Answers: 0
    edited December 2013
    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.
  • allanallan Posts: 57,730Questions: 1Answers: 9,203 Site admin
    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
  • netametanetameta Posts: 39Questions: 0Answers: 0
    so should i not work with sWidth at all ?
This discussion has been closed.