Budapest

Summary

As a developer, I was tired of having to deal with plugins that did more than what I needed, and yet didn’t quite offer everything that I needed. That was how Budapest was born. Budapest is jquery table sort plugin that sorts tables really simply and gives developers a bit more control over what it does. All you need is a table following the thead, tbody structure and you are set to go! Budapest assigns the css class “Budapest” to the table along with the “sortUp” or “sortDown” css classes to the th cells that are being clicked on to sort. Budapest offers the developer the ability to define custom methods to determine the sort order (this allows any possible table cell content you could think of). Budapest also lets the developer know when the sorting is done along with how it was sorted. As of version 1.0, Budapest only offers single column sorting, but future versions may offer multi sorting capabilities.

Options

headers

An object representing the sortability state of each column. By default each column is sortable.

//the following would make the first column of a 4 column table not sortable
headers: {
  0: {sortable: false}, //this is the only one needed (others shown for example)
  1: {sortable: true},
  2: {sortable: true},
  3: {sortable: true}
}

sortIndex

The zero based column index that the table should by default be sorted by. By default there is no sort.

//this would set the table to be sorted by the second column (zero based index)
sortIndex: 1

sortDirection

The direction the column marked as the default should sort by (“asc” or “desc”).

//this would set the table to be sorted by the column marked in sortIndex descendingly
  sortDirection: "desc"

onSort

The event thrown when Budapest is attempting to sort two rows. This is where Budapest gives the power to the developer. The function must return either -1, 0, or 1. Check this out for reference. By default the content of the table cells are compared as strings.

 
function(index, val1, val2, direction){
//this event does not need to be handled by the developer for Budapest to work.
//Budapest will compare val1 and val2 as strings by default
//index is the zero based column index that the table is being sorted by
//val1 and val2 are the html from each of two table cells Budapest is attempt to sort
//how val1 and val2 are compared is where the developer comes in and provides his own magic!
//direction ("asc" or "desc") is the direction of the sort
}

onSorted

The even thrown when the table has finished being sorted.

function(index, direction){
//index is the zero based column index that the table is being sorted by
//direction ("asc" or "desc") is the direction of the sort
}

Methods

Other than the standard budapest method that initializes the table, Budapest offers a method to programatically set the sort.

//index is the zero based column index that the table is to be sorted by
//direction ("asc" or "desc") is the direction of the sort
//$("table").budapest(); must be called first (with or without option overrides)
  $("table").budapest("sort", index, direction);

Examples

• Basic Setup
• Table with non-sortable column
• Table sorted on load
• Table with various different data types
• Handling the onSorted event

Download

jquery.budapest-1.0.min.js