Web Dev Tuts

/ Stuffs About Website Development /

Menu
  • Home
  • Wp Plugins
  • How To
  • FAQ
    • GIT
    • JQuery
    • PHP
    • WooCommerce
    • WordPress
  • Contact Us
Menu

How to Make Tables Sortable Using JQuery

Posted on June 17, 2016September 24, 2017 by admin

Step 1:  Add these two jquery functions.

[code]

jQuery.fn.sortTable = (function(sortableRows){
table = $jx(this);
$rows = ”;
for($i in sortableRows) {
$rows = $rows + sortableRows[$i];
if (sortableRows[$i+1] != null) {
$rows = $rows + ‘, ‘;
}
}

$jx($rows)
.wrapInner(‘<span title=”sort this column”/>’)
.each(function(){
var th = $jx(this),
thIndex = th.index(),
inverse = false;

th.click(function(){
table.find(‘td’).filter(function(){
return $jx(this).index() === thIndex;
}).sortElements(function(a, b){

// lowercase letters have higher integer value than the uppercase letters,

// so to avoid error in the sorting process, we make them all uppercase letters
textA = $jx.text([a]).toUpperCase();
textB = $jx.text([b]).toUpperCase();
return  textA > textB ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});

inverse = !inverse;
});

});
});

/**
* jQuery.fn.sortElements
* ————–
* @param Function comparator:
*   Exactly the same behaviour as [1,2,3].sort(comparator)
*
* @param Function getSortable
*   A function that should return the element that is
*   to be sorted. The comparator will run on the
*   current collection, but you may want the actual
*   resulting sort to occur on a parent or another
*   associated element.
*
*   E.g. $(‘td’).sortElements(comparator, function(){
*      return this.parentNode;
*   })
*
*   The <td>’s parent (<tr>) will be sorted instead
*   of the <td> itself.
*/
jQuery.fn.sortElements = (function(){

var sort = [].sort;

return function(comparator, getSortable) {

getSortable = getSortable || function(){return this;};

var placements = this.map(function(){

var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,

// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a ‘flag’ node:
nextSibling = parentNode.insertBefore(
document.createTextNode(”),
sortElement.nextSibling
);

return function() {

if (parentNode === this) {
throw new Error(
“You can’t sort elements if any one is a descendant of another.”
);
}

// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);

};

});

return sort.call(this, comparator).each(function(i){
placements[i].call(getSortable.call(this));
});

};

})();

[/code]

Step 3: Call the following function to make your table sortable:

[code]

$(‘table-selector’).sortTable([‘th’]);

[/code]

Where the parameter is an array of the selector of the sortable rows. In the example above, all rows are sortable

Category: Javascript

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • How to add wp_editor Dynamically
  • How to Hide Certain Pages from Certain Users (WP Dashboard)
  • How to Set Up Gmail SMTP
  • How to Set Up Virtual Host in Localhost & Xampp
  • How to Determine the Current WordPress Version Used
  • AngularJs
  • CSS
  • For Me Only
  • geo location api
  • GIT
  • GoDaddy
  • Hosting
  • How To
  • Javascript
  • JQuery
  • Magento
  • My Notes
  • PHP
  • Private
  • Sass
  • WooCommerce
  • Wordpress
  • Xampp
© 2023 Web Dev Tuts | Powered by Minimalist Blog WordPress Theme