Created
August 28, 2025 11:00
-
-
Save annuman97/dabfbbc536197209aa791e1f8f6a135f to your computer and use it in GitHub Desktop.
Ninja Tables: JS code for RowSpan. Add the code to the table's custom CSS section and add the class 'combine' to the column advanced setting where you want to add rowspan
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * jQuery Rowspanizer Plugin (Modified) v0.2 | |
| * https://github.com/marcosesperon/jquery.rowspanizer.js | |
| * | |
| * Copyright 2011, 2015 Marcos Esperón | |
| * Released under the MIT license | |
| * | |
| * https://github.com/jquery-boilerplate/boilerplate/ | |
| */ | |
| ;( function( $, window, document, undefined ) { | |
| "use strict"; | |
| var rowspanizer = "rowspanizer", | |
| defaults = { | |
| vertical_align: "top", | |
| columns: [] | |
| }; | |
| function f ( element, options ) { | |
| this.element = element; | |
| this.settings = $.extend( {}, defaults, options ); | |
| this._defaults = defaults; | |
| this._name = rowspanizer; | |
| this.init(); | |
| } | |
| $.extend( f.prototype, { | |
| init: function() { | |
| var _this = this; | |
| var $table = $(this.element); | |
| var arr = []; | |
| // Clear existing rowspan data | |
| $table.find('tr td.combine').removeClass('rowspan-remove').removeClass('rowspan-combine').removeAttr('rowspan').removeData('rowspan').show(); | |
| $table.find('tr').each(function (r, tr) { | |
| $(this).find('td.combine').each(function (d, td) { | |
| if (_this.settings.columns.length === 0 || _this.settings.columns.indexOf(d) !== -1) { | |
| var $td = $(td); | |
| var v_dato = $td.html(); | |
| if(typeof arr[d] != 'undefined' && 'dato' in arr[d] && arr[d].dato == v_dato) { | |
| var rs = arr[d].elem.data('rowspan'); | |
| if(rs == 'undefined' || isNaN(rs)) rs = 1; | |
| arr[d].elem.data('rowspan', parseInt(rs) + 1).addClass('rowspan-combine'); | |
| $td.addClass('rowspan-remove').hide(); | |
| } else { | |
| arr[d] = {dato: v_dato, elem: $td}; | |
| }; | |
| } | |
| }); | |
| }); | |
| $('.rowspan-combine').each(function (r, tr) { | |
| var $this = $(this); | |
| $this.attr('rowspan', $this.data('rowspan')).css({'vertical-align': _this.settings.vertical_align}); | |
| }); | |
| }, | |
| // Add a method to refresh the rowspan | |
| refresh: function() { | |
| this.init(); | |
| } | |
| } ); | |
| $.fn[ rowspanizer ] = function( options ) { | |
| return this.each( function() { | |
| if ( !$.data( this, "plugin_" + rowspanizer ) ) { | |
| $.data( this, "plugin_" + | |
| rowspanizer, new f( this, options ) ); | |
| } | |
| } ); | |
| }; | |
| } )( jQuery, window, document ); | |
| // Initialize the plugin | |
| $table.rowspanizer({vertical_align: 'middle'}); | |
| // Debounce function to limit resize event frequency | |
| function debounce(func, wait) { | |
| let timeout; | |
| return function executedFunction(...args) { | |
| const later = () => { | |
| clearTimeout(timeout); | |
| func(...args); | |
| }; | |
| clearTimeout(timeout); | |
| timeout = setTimeout(later, wait); | |
| }; | |
| } | |
| // Handle window resize events | |
| $(window).on('resize', debounce(function() { | |
| // Refresh the rowspanizer on resize | |
| $table.removeData('plugin_rowspanizer'); | |
| $table.rowspanizer({vertical_align: 'middle'}); | |
| }, 250)); // 250ms delay to avoid excessive calls | |
| // Add the following lines if you have custom filters enabled | |
| // No need to add if you don't have custom filters. | |
| $table.on('after_ft_filtering', function() { | |
| $table.removeData('plugin_rowspanizer'); | |
| $table.rowspanizer({vertical_align: 'middle'}); | |
| }); | |
| // Add the following lines if you have paginated data. | |
| jQuery($table).on('after.ft.paging', function () { | |
| jQuery($table).removeData('plugin_rowspanizer'); | |
| jQuery($table).rowspanizer({vertical_align: 'middle'}); | |
| }); | |
| // Optional: Handle orientation change for mobile devices | |
| $(window).on('orientationchange', debounce(function() { | |
| setTimeout(function() { | |
| $table.removeData('plugin_rowspanizer'); | |
| $table.rowspanizer({vertical_align: 'middle'}); | |
| }, 100); // Small delay to allow orientation change to complete | |
| }, 250)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment