CODEWITHSUNDEEP
javascriptjqueryhtml-table
Rama Rao M
Rama Rao M

Reputation: 3051

Table column re-sizing using jQuery

I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <style>
  table{
   border-collapse:collapse;
  }
  table td{
    border:1px solid red;
  }
  .vUiDtColResize{
   width:2px;
   height:20px;
   border:1px solid blue;
   float:right;
   display:block;
   cursor:w-resize;
   position:relative;
   right:-3px;
   float:top;
  }
  </style>
 </head>

 <body>
  <table>
   <thead>
    <tr>
     <td>S.No   <div class="vUiDtColResize"></div></td>
     <td>Name   <div class="vUiDtColResize"></div></td>
     <td>Qualif <div class="vUiDtColResize"></div></td>
    </tr>
   </thead>
   <tbody>
      <tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
      <tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
      <tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
      <tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
   </tbody>
  </table>
  <div id="helper"></div>
 </body>
 <script>
  $('.vUiDtColResize').each(function(){

     var _rsTd = $(this).parent('td');
     var _rsTr = _rsTd.parent('tr');
     var _rsTdRight,_thisLeft,_rsTdWidth;

     $(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
         create:function(event,ui){
         },
         start:function(event,ui){
         _rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
         },
         drag:function(event,ui){
           var _sizeDiff = $(this).offset().left - _rsTdRight;
           _rsTdRight = $(this).offset().left;
          _rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
          _rsTd.outerWidth(_rsTdWidth);
         },
         stop:function(event,ui){
         }
     });
  });

 </script>
</html>

Upvotes: 4

Views: 3808

Answers (2)

Rama Rao M
Rama Rao M

Reputation: 3051

After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style

 <link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>

table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid black;   
}
tr.last td {
    border-bottom: 1px solid black;
}

td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
    white-space:nowrap;
    padding: 2px 5px;
    text-align: left;
    overflow:hidden;
}

td.last {
    border-right: none;
}
thead td div:first-child{
  text-overflow:ellipsis;
  overflow:hidden;
}
tbody td div:first-child{
  overflow:hidden;
}

.scrollContainer {
    overflow:auto;
    width:700px;
    height:auto;
    display:inline-block;
    border:1px solid red;
}
@-moz-document url-prefix() {
  .resizeHelper,.ui-resizable-e {
        position: relative;
        float: right;       
    }
}
</style>

Script

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
 /**
 * Enables resizable data table columns.
 **/

(function($) {
   $.widget("ih.resizableColumns", {
       _create: function() {
            this._initResizable();
        },

        _initResizable: function() {

            var colElement, colWidth, originalSize;
            var table = this.element;

            this.element.find("thead td").resizable({
                handles: {"e": ".resizeHelper"},
                minWidth: 2, // default min width in case there is no label
                // set correct COL element and original size
                start:function(event, ui) {
                    var colIndex = ui.helper.index() + 1;
                    colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
                    colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
                    originalSize = ui.size.width;
                },                

                // set COL width
                resize: function(event, ui) {
                    var resizeDelta = ui.size.width - originalSize;                    
                    var newColWidth = colWidth + resizeDelta;
                    colElement.width(newColWidth);

                    // height must be set in order to prevent IE9 to set wrong height
                    $(this).css("height", "auto");
                }
            });
        }

    });

    // init resizable
    $("#MyTable").resizableColumns();
})(jQuery);
</script>

Your html is to be like:*

<div class="scrollContainer">
    <table class="resizable" id="MyTable" width="100%">
         <thead>
            <tr>
                <td class="ui-resizable" style="width:100px;">
                <div>
                    <span >Column 1</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 2</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:300px;">
                <div>
                    <span >Column 3</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>

                <td class="ui-resizable" style="width:150px;">
                <div>
                    <span >Column 4</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 5</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable last" style="width:100px;">
                <div>
                    <span >Column 6</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>

            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

maxwell
maxwell

Reputation: 855

I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/

IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.

Hope this helps.

Upvotes: 2

Related Questions