jquery-tabledit icon indicating copy to clipboard operation
jquery-tabledit copied to clipboard

Sortable rows by column?

Open Rmohan06 opened this issue 7 years ago • 2 comments

I didn't see it in the docs but is there any sort of configuration to enable row sorting in the column headers? If not, I think that would be a great feature to add.

Rmohan06 avatar Nov 30 '17 16:11 Rmohan06

You can use this plugin : https://github.com/padolsey-archive/jquery.fn/tree/master/sortElements

and add this function to your script:

         sortColumn = function(obj) {
		var table = obj;
		var arrowDown = 'fa-angle-down';
		var arrowUp = 'fa-angle-up';
		var oldIndex = 0;
		obj
			.find('thead > tr:first-child th')
			.wrapInner('<span class="sort-element"/>')
			.append($('<span/>').addClass('sort-icon fa'))
			.css({cursor: 'pointer'})
			.each(function () {
				var th = $(this);
				var thIndex = th.index();
				var inverse = false;
				var addOrRemove = true;
				th.click(function () {
					if(!$(this).hasClass('disable-sorting')) {
						if($(this).find('.sort-icon').hasClass(arrowDown)) {
							$(this)
								.find('.sort-icon')
								.removeClass( arrowDown )
								.addClass(arrowUp);
						} else {
							$(this)
								.find('.sort-icon')
								.removeClass( arrowUp )
								.addClass(arrowDown);
						}
						if(oldIndex != thIndex) {
							obj.find('.sort-icon').removeClass(arrowDown);
							obj.find('.sort-icon').removeClass(arrowUp);
							$(this)
								.find('.sort-icon')
								.toggleClass( arrowDown, addOrRemove );
						}
						table.find('td').filter(function () {
							return $(this).index() === thIndex;
						}).sortElements(function (a, b) {
							return $.text([a]) > $.text([b]) ?
								inverse ? -1 : 1
								: inverse ? 1 : -1;
						}, function () {
							return this.parentNode;
						});
						inverse = !inverse;
						oldIndex = thIndex;
					}
				});
			});
	}

see : https://stackoverflow.com/questions/3160277/jquery-table-sort

and initialize your table like this:

$(document).ready(function() {
    sortColumn($('#id_of_your_table'));
});

this code uses the font-awesome icons

eureka2 avatar Nov 30 '17 17:11 eureka2

In case anyone is looking for another solution I was able to use the tablesorter jquery plugin from https://mottie.github.io/tablesorter/docs/index.html.

I simply added

	    $(document).ready(function(){
			$('#somedumbTable').tablesorter({
                            widgets        : ['zebra', 'columns'],
                            usNumberFormat : false,
                            sortReset      : true,
                            sortRestart    : true
			});
			$('#somedumbTable').Tabledit({

Right before the callout to Tabledit. Seems to work pretty well.

rapier1 avatar Jul 10 '19 20:07 rapier1