jquery-tabledit
jquery-tabledit copied to clipboard
Sortable rows by column?
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.
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
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.