Enhance tables with sortable columns using list.js

Enable automatic creation of sortable columns in tables using list.js Fixes: #25378
mantisbt · Mar 3, 2019 · 4db1722 · 4db1722
1 parent f37dffa
commit 4db1722
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/js/common.js b/js/common.js
@@ -402,6 +402,46 @@ $(document).ready( function() {
 		);
 		$('.visible-on-hover').addClass('invisible');
 	}
+
+	/**
+	 * Enhance tables with sortable columns using list.js
+	 */
+	$('.table-responsive.sortable').each(function(){
+		var jtable = $(this).find('table').first();
+		var ths = jtable.find('thead th');
+		if( !ths.length ) {
+			// exit if there is no headers
+			return;
+		}
+		var th_count = ths.length
+		var options_valuenames = [];
+		ths.each(function(index){
+			// wrap the contents into a crafted div
+			var new_div = $('<div />').addClass('sort')
+					.attr('data-sort','sortkey_'+index)
+					.attr('role','button')
+					.html($(this).html());
+			$(this).html(new_div);
+
+			options_valuenames.push( { name:'sortkey_'+index, attr:'data-sortval' } );
+		});
+		var trs = jtable.find('tbody tr');
+		trs.each(function(){
+			var tds = $(this).find('td');
+			if( tds.length != th_count ) {
+				// exit if different number of cells than headers, possibly colspan, etc
+				return;
+			}
+			tds.each(function(index){
+				$(this).addClass( 'sortkey_'+index ).attr( 'data-sortval', $(this).text() );
+			});
+		});
+		jtable.find('tbody').addClass('list');
+
+		var listoptions = { valueNames: options_valuenames };
+		var listobject =  new List( this, listoptions );
+		$(this).data('listobject',listobject).data('listoptions',listoptions).addClass('listjs-table');
+	});
 });
 
 function setBugLabel() {

diff --git a/manage_proj_user_update.php b/manage_proj_user_update.php
@@ -204,7 +204,7 @@
 			</div>
 			<div class="widget-body">
 				<div class="widget-main no-padding">
-					<div class="table-responsive">
+					<div class="table-responsive sortable">
 						<table class="table table-striped table-bordered table-condensed">
 							<thead>
 								<tr>
@@ -255,7 +255,7 @@
 			</div>
 			<div class="widget-body">
 				<div class="widget-main no-padding">
-					<div class="table-responsive">
+					<div class="table-responsive sortable">
 						<table class="table table-striped table-bordered table-condensed">
 							<thead>
 								<tr>