Home > sortable-dl

sortable-dl

Sortable-dl is a project mainly written in JavaScript, it's free.

Download

SortableDL

There are a few excellent plugins for jQuery for Table sorting. But none offers an option for extra content ('more information ..'), hidden per default and with valid Markup. SortableDL uses standard tables with a little 'Markup Hack'.

Instead:

<tr>
  <td class="col1"></td>
  <td class="col2"></td>
  <td class="col3"></td>
</tr>

we take Definition List Elements for columns:

<tr>
  <td>
    <dl>
      <dt class="col1"></dt>
      <dt class="col2"></dt>
      <dt class="col3"></dt>
    </dl>
  </td>
</tr>

Now we can add DD element(s) for the extra content (hidden per default) :

<tr>
  <td>
    <dl>
      <dt class="col1"></dt>
      <dt class="col2"></dt>
      <dt class="col3"></dt>
      <dd>additional content</dd>
      <dd>more additional content</dd>
    </dl>
  </td>
</tr>

Getting started

To use the sortable-dl, include the jQuery library and the sortable-dl script and stylesheet inside the <head> tag of your HTML document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sortable-dl.css">
<script src="sortable-dl.min.js"></script>

NOTE: sortable-dl works NOT on standard HTML tables (more than one table cell in row). As described before, it used a definition list hack for hiding and showing extra information for any table row:

Row #
Track
Interpret
Genre
Price
Release
 
1
Awful Thing
Cee-Lo
R'n'B
1.99 €
28.02.2002
Details

Details (1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales facilisis augue, sed suscipit velit aliquam non. Morbi egestas ultricies leo, sit amet luctus mi imperdiet convallis. Nam sit amet arcu id lorem blandit interdum non id velit. Donec velit justo, imperdiet sit amet sollicitudin vitae, hendrerit non erat. Sed vitae mi malesuada urna accumsan lacinia sit amet et diam. Pellentesque at viverra tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce erat enim, scelerisque at vestibulum sed, ultrices eget turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan leo sed turpis luctus vitae condimentum justo imperdiet. Aenean cursus nunc ac enim pellentesque convallis varius felis condimentum. Maecenas non augue in risus lacinia mollis.
2
Weather Storm
Craig Armstrong
Ambient
0.98 €
28.01.2010
Details

Details (2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales facilisis augue, sed suscipit velit aliquam non. Morbi egestas ultricies leo, sit amet luctus mi imperdiet convallis. Nam sit amet arcu id lorem blandit interdum non id velit. Donec velit justo, imperdiet sit amet sollicitudin vitae, hendrerit non erat. Sed vitae mi malesuada urna accumsan lacinia sit amet et diam. Pellentesque at viverra tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce erat enim, scelerisque at vestibulum sed, ultrices eget turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan leo sed turpis luctus vitae condimentum justo imperdiet. Aenean cursus nunc ac enim pellentesque convallis varius felis condimentum. Maecenas non augue in risus lacinia mollis.

Start by creating a new instance of SortableDL and init with your options to sort the table when the document is loaded:

<script>
$(document).ready(function() {  

  var mySorter = new SortableDL();
  mySorter.init({
    id: 'sortable',           // Table ID
    first: 'ascending',       // optional / default 'descending'
    columns: [
      null,                   // Col 1
      'caseInsensitive',      // Col 2
      'caseSensitive',        // Col 3
      'numeric',              // Col 4  
      'numeric',              // Col 5  
      'date',                 // Col 6 
      null                    // Col 7
    ],
    classes: {
      asc: 'asc',             // optional - default: 'asc'
      desc: 'desc',           // optional - default: 'desc'
      column: 'active-column' // optional - default: ''
    },
    pagination: {             // optional - default: 'no pager'
      items: 5,               // Items per page: optional - default: 'all'
      numbers: 5              // Visible page numbers: optional - default: 'all'
    }
  });  

});
</script>

Sorting Options

  1. caseInsensitive
  2. caseSensitive
  3. numeric
  4. date

Sort by date accepts following date formats:

  • 1298851200000 (UNIX Timestamp)
  • 2011/02/28 (US Short Date Format)
  • 28/02/2011 (EU Short Date Format)
  • 28.02.2011 (EU Short Date Format)
  • 2011-02-28T00:00:00-00:00 (ISO 8601 Date Format)
  • Mon Feb 28 2011 00:00:00 GMT+0000 (Javascript Default Date Format)
  • Mon, 28 Feb 2011 00:00:00 GMT (Javascript GMT Date Format)

Pager

You can create multiple pagers (normally at the top and bottom of the sortable table) with the following HTML fragment:

0 Hits on 0 Page(s) First Previous   Next Last
Previous：typr

©2024 OSPHUB.COM