Skip to content

Commit

Permalink
-Major bug fixs
Browse files Browse the repository at this point in the history 
--Fixed issue with col resize not working after a column made invisible
--Reworked fixedTableWidth code to work with fixed columns plugin.
-Added Example for Col Resize working alongside Col Vis
  • Loading branch information
@dykstrad
dykstrad committed Mar 18, 2015
1 parent c814d2d commit b6cab76
Show file tree
Hide file tree
Showing 4 changed files with 1,951 additions and 35 deletions.
185 changes: 185 additions & 0 deletions examples/css/dataTables.colVis.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* ColVis styles
*/
div.ColVis {
float: right;
margin-bottom: 1em;
}

button.ColVis_Button,
ul.ColVis_collection li {
position: relative;
float: left;
margin-right: 3px;
padding: 5px 8px;
border: 1px solid #999;
cursor: pointer;
*cursor: hand;
font-size: 0.88em;
color: black !important;
white-space: nowrap;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;

-webkit-box-shadow: 1px 1px 3px #ccc;
-moz-box-shadow: 1px 1px 3px #ccc;
-ms-box-shadow: 1px 1px 3px #ccc;
-o-box-shadow: 1px 1px 3px #ccc;
box-shadow: 1px 1px 3px #ccc;

/* Generated by http://www.colorzilla.com/gradient-editor/ */
background: #ffffff; /* Old browsers */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

.ColVis_Button:hover,
ul.ColVis_collection li:hover {
border: 1px solid #666;
text-decoration: none !important;

-webkit-box-shadow: 1px 1px 3px #999;
-moz-box-shadow: 1px 1px 3px #999;
-ms-box-shadow: 1px 1px 3px #999;
-o-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;

background: #f3f3f3; /* Old browsers */
background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */
background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */
background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}

button.ColVis_Button {
height: 30px;
padding: 3px 8px;
}

button.ColVis_Button::-moz-focus-inner {
border: none !important;
padding: 0;
}

button.ColVis_Button:active {
outline: none;
}


div.ColVis_collectionBackground {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
z-index: 1100;
}

ul.ColVis_collection {
list-style: none;
width: 150px;
padding: 8px 8px 4px 8px;
margin: 0;
border: 1px solid #ccc;
border: 1px solid rgba( 0, 0, 0, 0.4 );
background-color: #f3f3f3;
background-color: rgba( 255, 255, 255, 0.3 );
overflow: hidden;
z-index: 2002;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

ul.ColVis_collection li {
position: relative;
height: auto;
left: 0;
right: 0;
padding: 0.5em;

display: block;
float: none;
margin-bottom: 4px;

-webkit-box-shadow: 1px 1px 3px #999;
-moz-box-shadow: 1px 1px 3px #999;
-ms-box-shadow: 1px 1px 3px #999;
-o-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;
}

ul.ColVis_collection li {
text-align: left;
}

ul.ColVis_collection li.ColVis_Button:hover {
border: 1px solid #999;
background-color: #f0f0f0;
}

ul.ColVis_collection li span {
display: inline-block;
padding-left: 0.5em;
cursor: pointer;
}


ul.ColVis_collection li.ColVis_Special {
border-color: #555;
background: rgb(237,237,237); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(214,214,214,1) 77%, rgba(232,232,232,1) 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* IE10+ */
background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}

ul.ColVis_collection li.ColVis_Special:hover {
background: #e2e2e2; /* Old browsers */
background: -webkit-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* IE10+ */
background: -o-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Opera 11.10+ */
background: linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
}


span.ColVis_radio {
display: inline-block;
width: 20px;
}

div.ColVis_catcher {
position: absolute;
z-index: 1101;
}

.disabled {
color: #999;
}


69 changes: 34 additions & 35 deletions examples/js/dataTables.colResize.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/*! ColResize 0.0.5
/*! ColResize 0.0.6
*/

/**
* @summary ColResize
* @description Provide the ability to resize columns in a DataTable
* @version 0.0.5
* @version 0.0.6
* @file dataTables.colResize.js
* @author Silvacom Ltd.
*
Expand Down Expand Up @@ -431,8 +431,8 @@
this.s.mouse.startY = e.pageY;

//Store the indexes of the columns the mouse is down on
var idx = that.dom.resizeCol.index();
var idxNeighbour = that.dom.resizeColNeighbour.index();
var idx = that.dom.resizeCol.data("column-index");
var idxNeighbour = that.dom.resizeColNeighbour.data("column-index");

if (idx === undefined) {
return;
Expand Down Expand Up @@ -487,6 +487,7 @@
that.s.mouse.targetColumn.sWidthOrig = that.s.mouse.targetColumn.sWidth = that.s.mouse.targetColumn.width = newColWidth + "px";
var domCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='"+colResizeIdx+"']");
//For each table expand the width by the same amount as the column
//This accounts for other datatable plugins like FixedColumns
domCols.parents("table").each(function() {
if(!$(this).parent().hasClass("DTFC_LeftBodyLiner")) {
var newWidth = $(this).width() + widthDiff;
Expand All @@ -498,41 +499,39 @@
$(this).width(newWidth);
}
});
//Expand the table width as well as the column width if the table is not fixed width
//that.dom.resizeCol.parents("table").width(that.dom.resizeCol.parents("table").width() + widthDiff);
//Get all table rows for the column (covers all datatables plugins like fixed columns etc...)
//Apply the new width to the columns after the table has been resized
domCols.width(that.s.mouse.targetColumn.width);

// that.dom.resizeCol.parents('.dataTables_scrollHead').next().children("table").width(that.dom.resizeCol.parents("table").width());
} else {
//A neighbour column must exist in order to resize a column in a table with a fixed width
if (that.s.mouse.neighbourColumn) {
//Subtract the width from the neighbour column if it exists if it is a fixed width table
var neighbourMinColumnWidth = Math.max(parseInt($(that.s.mouse.neighbourColumn.nTh).css('min-width')), 10);
//Store the previous width of the column
var neighbourPrevWidth = $(that.s.mouse.neighbourColumn.nTh).width();

//In a fixed table width situation the width must be shared between the columns
var combinedWidthMaximum = prevWidth + neighbourPrevWidth;
//As long as the width is larger than the minimum and is not larger then the combined width
var newColWidth = Math.min(Math.max(minColumnWidth, prevWidth + dx), combinedWidthMaximum - neighbourMinColumnWidth);
//As long as the width is larger than the minimum and is not larger then the combined width
var neighbourNewColWidth = Math.min(Math.max(neighbourMinColumnWidth, neighbourPrevWidth - dx), combinedWidthMaximum - minColumnWidth);

var tableContainer = $(that.s.dt.nTableWrapper);

//Get the minimum width of the neighbor column (default minimum 10px)
var minColumnNeighbourWidth = Math.max(parseInt($(that.s.mouse.neighbourColumn.nTh).css('min-width')), 10);
//Store the previous width of the neighbour column
var prevNeighbourWidth = $(that.s.mouse.neighbourColumn.nTh).width();
//As long as the width is larger than the minimum
var newColWidth = Math.max(minColumnWidth, prevWidth + dx);
var newColNeighbourWidth = Math.max(minColumnNeighbourWidth, prevNeighbourWidth - dx);
//Get the width difference (take into account the columns minimum width)
var widthDiff = newColWidth - prevWidth;
var widthDiffNeighbour = newColNeighbourWidth - prevNeighbourWidth;
//Get the column index for the column being changed
var colResizeIdx = parseInt(that.dom.resizeCol.attr("data-column-index"));
var neighbourColResizeIdx = parseInt(that.dom.resizeColNeighbour.attr("data-column-index"));
//Set datatable column widths
that.s.mouse.neighbourColumn.sWidthOrig = that.s.mouse.neighbourColumn.sWidth = that.s.mouse.neighbourColumn.width = newColNeighbourWidth + "px";
that.s.mouse.targetColumn.sWidthOrig = that.s.mouse.targetColumn.sWidth = that.s.mouse.targetColumn.width = newColWidth + "px";
var resizeColIndex = parseInt(that.dom.resizeCol.attr("data-column-index")) + 1;
var elementsToResize = tableContainer.find('table.dataTable thead tr th:nth-child(' + resizeColIndex + '), ' +
'table.dataTable tfoot tr th:nth-child(' + resizeColIndex + ')');
elementsToResize.width(that.s.mouse.targetColumn.width);

//Set datatable column widths
that.s.mouse.neighbourColumn.sWidthOrig = that.s.mouse.neighbourColumn.sWidth = that.s.mouse.neighbourColumn.width = neighbourNewColWidth + "px";
var resizeColNeighborIndex = parseInt(that.dom.resizeColNeighbour.attr("data-column-index")) + 1;
elementsToResize = tableContainer.find('table.dataTable thead tr th:nth-child(' + resizeColNeighborIndex + '), ' +
'table.dataTable tfoot tr th:nth-child(' + resizeColNeighborIndex + ')');
elementsToResize.width(that.s.mouse.neighbourColumn.width);
//Get list of columns based on column index in all affected tables tables. This accounts for other plugins like FixedColumns
var domNeighbourCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='" + neighbourColResizeIdx + "']");
var domCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='" + colResizeIdx + "']");
//If dx if positive (the width is getting larger) shrink the neighbour columns first
if(dx>0) {
domNeighbourCols.width(that.s.mouse.neighbourColumn.width);
domCols.width(that.s.mouse.targetColumn.width);
} else {
//Apply the new width to the columns then to the neighbour columns
domCols.width(that.s.mouse.targetColumn.width);
domNeighbourCols.width(that.s.mouse.neighbourColumn.width);
}
}
}
}
Expand Down Expand Up @@ -766,7 +765,7 @@
* @type String
* @default As code
*/
ColResize.version = "0.0.2";
ColResize.version = "0.0.6";


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Expand Down
Loading

0 comments on commit b6cab76

Please sign in to comment.