diff --git a/index-rtl.html b/index-rtl.html new file mode 100644 index 0000000..8d61bea --- /dev/null +++ b/index-rtl.html @@ -0,0 +1,532 @@ + + + + jquery.dataTables colResize test + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 4f2587a..862a6bf 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,19 @@ - jquery.dataTables colResize test - - - - - - - - - - - - + + + + + + + }); + }); + diff --git a/jquery.dataTables.colResize.css b/jquery.dataTables.colResize.css index 16c253b..2a1b4b7 100644 --- a/jquery.dataTables.colResize.css +++ b/jquery.dataTables.colResize.css @@ -1,11 +1,11 @@ table.dataTable thead th[data-is-resizable=true] { - border-left: 1px solid transparent; - border-right: 1px dashed #bfbfbf; + border-inline-start: 1px solid transparent; + border-inline-end: 1px dashed #bfbfbf; } table.dataTable thead th.dt-colresizable-hover { - cursor: col-resize; + cursor: col-resize !important; background-color: #eaeaea; - border-left: 1px solid #bfbfbf; + border-inline-start: 1px solid #bfbfbf; } table.dataTable thead th.dt-colresizable-bound-min, table.dataTable thead th.dt-colresizable-bound-max { diff --git a/jquery.dataTables.colResize.js b/jquery.dataTables.colResize.js index efbabb9..9aca75a 100644 --- a/jquery.dataTables.colResize.js +++ b/jquery.dataTables.colResize.js @@ -125,7 +125,7 @@ oldWidth = widthResult != null ? parseInt(widthResult[0]) : 0, newWidthResult = column._sResizableWidth.match(/(\d+)/i), newWidth = newWidthResult != null ? parseInt(newWidthResult[0]) : 0, - $node = $(column.nTh); + $node = self._fnGetColumnHeader$(column); self.s.state.originalWidth[$node.index()] = oldWidth; column.width = column._sResizableWidth; @@ -156,7 +156,7 @@ let widthResult = column.sWidth.match(/(\d+)/i), oldWidth = widthResult != null ? parseInt(widthResult[0]) : 0, newWidth = sizeMap[column.idx], - $node = $(column.nTh); + $node = self._fnGetColumnHeader$(column); self.s.state.originalWidth[$node.index()] = oldWidth; column.width = newWidth + 'px'; @@ -167,8 +167,9 @@ }, fnSaveState: function () { let sizeMap = []; + let self = this; this._fnGetAllColumns().forEach(function (column) { - let oldWidth = column.nTh.offsetWidth; + let oldWidth = self._fnGetColumnHeader(column).offsetWidth; sizeMap[column.idx] = oldWidth; }); this.s.opts.stateSaveCallback(this.s.opts, sizeMap); @@ -180,8 +181,9 @@ } $(document).off('.ColResize'); + let self = this; this._fnGetAllColumns().forEach(function (column) { - let $columnNode = $(column.nTh); + let $columnNode = self._fnGetColumnHeader$(column); $columnNode.off('.ColResize'); $columnNode.removeAttr('data-is-resizable'); }); @@ -199,7 +201,8 @@ // register document events $(document).on('mousemove.ColResize touchmove.ColResize', function (e) { if (self.s.state.isDragging) { - let changedWidth = self._fnGetXCoords(e) - self.s.state.startX; + let changedWidth = (self._fnGetXCoords(e) - self.s.state.startX) + * (self._isRtl() ? -1: 1); self._fnApplyWidth(changedWidth, self.s.state.$element, self.s.state.column); self.s.opts.onResize(self._fnMapColumn(self.s.state.column)); @@ -239,7 +242,7 @@ } } self._fnGetAllColumns().forEach(function (column) { - $(column.nTh).removeClass(self.s.opts.hoverClass); + self._fnGetColumnHeader$(column).removeClass(self.s.opts.hoverClass); }); self.s.state.isDragging = false; }); @@ -247,7 +250,7 @@ //register column events this._fnGetAllColumns().forEach(function (column) { - let $columnNode = $(column.nTh); + let $columnNode = self._fnGetColumnHeader$(column); let isResizable = self._fnIsColumnResizable(column); $columnNode.attr('data-is-resizable', isResizable.toString()); //save the original value (server) somewhere, we want the size of all of them. @@ -276,7 +279,7 @@ self._fnGetAllColumns().forEach(function (column) { column._bSortableTempHolder = column.bSortable; column.bSortable = false; - self._fnRemovePercentWidths(column, $(column.nTh)); + self._fnRemovePercentWidths(column, self._fnGetColumnHeader$(column)); }); self.s.state.isDragging = true; @@ -305,6 +308,12 @@ _fnGetAllColumns: function () { return this.s.dt.aoColumns; }, + _fnGetColumnHeader: function (column) { + return this.s.dt.nTHead.querySelectorAll('th')[column.idx]; + }, + _fnGetColumnHeader$: function (column) { + return $(this._fnGetColumnHeader(column)); + }, _fnGetBodyScroll: function () { return $(this.s.dt.nScrollBody); }, @@ -324,9 +333,14 @@ } }, _fnIsInDragArea: function ($th, e) { - let rightSide = $th.offset().left + $th.outerWidth(); + let inlineEndSide = $th.offset().left; + + if (!this._isRtl()) { + inlineEndSide += $th.outerWidth(); + } + let xCoord = this._fnGetXCoords(e); - return (rightSide + 10) > xCoord && (rightSide - 10) < xCoord; + return (inlineEndSide + 10) > xCoord && (inlineEndSide - 10) < xCoord; }, _fnGetXCoords: function (e) { return e.type.indexOf('touch') !== -1 ? e.originalEvent.touches[0].pageX : e.pageX; @@ -364,7 +378,7 @@ if (element.closest('.dataTables_scroll').length > 0) { let additionalStylesForHiddenThRows = ';padding-top: 0px;padding-bottom: 0px;border-top-width: 0px;border-bottom-width: 0px;height: 0px;'; this._fnGetAllColumns().forEach(function (column) { - let $hbTh = $(column.nTh); + let $hbTh = self._fnGetColumnHeader$(column); let currentIndex = $hbTh.index(); let currentStyles = $hbTh.attr('style') + additionalStylesForHiddenThRows; @@ -378,7 +392,7 @@ } }, _fnApplyWidthColumn: function (column, width) { - $(column.nTh).outerWidth(width + 'px'); + $(this._fnGetColumnHeader(column)).outerWidth(width + 'px'); column.sWidth = width + 'px'; }, _fnGetCurrentWidth: function ($node) { @@ -489,8 +503,10 @@ return { idx: column.idx, width: column.sWidth }; }, _fnIsLastResizableColumnDragging: function (draggingColumn) { + let self = this; + let visibleColumns = this._fnGetAllColumns().filter(function (column) { - return $(column.nTh).is(':visible'); + return self._fnGetColumnHeader$(column).is(':visible'); }); let indexOfColumn = visibleColumns.indexOf(draggingColumn); if (indexOfColumn === visibleColumns.length - 1) { @@ -506,6 +522,9 @@ }, _fnIsColumnResizable: function (column) { return this.s.opts.isResizable(column); + }, + _isRtl: function () { + return $(this.s.dt.nTable).css('direction') === 'rtl'; } }); @@ -573,8 +592,8 @@ // Register a new feature with DataTables if (typeof $.fn.dataTable == "function" && - typeof $.fn.dataTableExt.fnVersionCheck == "function" && - $.fn.dataTableExt.fnVersionCheck('1.10.8')) { + typeof $.fn.dataTable.versionCheck == "function" && + $.fn.dataTable.versionCheck('2.0.0')) { $.fn.dataTableExt.aoFeatures.push({ "fnInit": function (settings) { let table = settings.oInstance; @@ -594,7 +613,7 @@ }); } else { - alert("Warning: ColResize requires DataTables 1.10.8 or greater - www.datatables.net/download"); + alert("Warning: ColResize requires DataTables 2.0.0 or greater - www.datatables.net/download"); }