Any Data Sorter In jQuery - fakeTableSort.js

fakeTableSort.js is a fast, jQuery based data sorter that can be used to sort any data structure similar to table elements, not just HTML tables.

More Features:

• Sort in alphabetical or numerical order.
• Allows you to specify the sort method for each column.
• Provides a function to convert data before sorting.

How to use it:

1. Insert the Fake Table Sort plugin after loading jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.fakeTableSort.js"></script>

2. Add your content to be sorted to DIV elements as follows:

<div class="table-fake">
  <div class="table-fake-row-first">
    <div class="table-fake-col">
      Column 1
    </div>
    <div class="table-fake-col">
      Column 2
    </div>
    <div class="table-fake-col">
      Column 3
    </div>
    <div class="table-fake-col">
      Column 4
    </div>
  </div>
  <div class="table-fake-row">
    <div class="table-fake-col">
      Cell 1
    </div>
    <div class="table-fake-col">
      Cell 2
    </div>
    <div class="table-fake-col">
      Cell 3
    </div>
    <div class="table-fake-col">
      Cell 4
    </div>
  </div>
  <div class="table-fake-row ">
    <div class="table-fake-col">
      Cell 5
    </div>
    <div class="table-fake-col">
      Cell 6
    </div>
    <div class="table-fake-col">
      Cell 7
    </div>
    <div class="table-fake-col">
      Cell 8
    </div>
  </div>
  <div class="table-fake-row">
    <div class="table-fake-col">
      Cell 9
    </div>
    <div class="table-fake-col">
      Cell 10
    </div>
    <div class="table-fake-col">
      Cell 11
    </div>
    <div class="table-fake-col">
      Cell 12
    </div>
  </div>
  <div class="table-fake-row">
    <div class="table-fake-col">
      Cell 13
    </div>
    <div class="table-fake-col">
      Cell 14
    </div>
    <div class="table-fake-col">
      Cell 15
    </div>
    <div class="table-fake-col">
      Cell 16
    </div>
  </div>
</div>

3. HTML table is supported as well.

<table class="table-fake">
  <thead class="table-fake-row-first">
    <tr>
      <th class="table-fake-col">
        Column 1
      </th>
      <th class="table-fake-col">
        Column 2
      </th>
      <th class="table-fake-col">
        Column 3
      </th>
      <th class="table-fake-col">
        Column 4
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-fake-row">
      <td class="table-fake-col">
        Cell 1
      </td>
      <td class="table-fake-col">
        Cell 2
      </td>
      <td class="table-fake-col">
        Cell 4
      </td>
      <td class="table-fake-col">
        Cell 4
      </td>
    </tr>
    <tr class="table-fake-row">
      <td class="table-fake-col">
        Cell 5
      </td>
      <td class="table-fake-col">
        Cell 6
      </td>
      <td class="table-fake-col">
        Cell 7
      </td>
      <td class="table-fake-col">
        Cell 8
      </td>
    </tr>
    <tr class="table-fake-row">
      <td class="table-fake-col">
        Cell 9
      </td>
      <td class="table-fake-col">
        Cell 10
      </td>
      <td class="table-fake-col">
        Cell 11
      </td>
      <td class="table-fake-col">
        Cell 12
      </td>
    </tr>
    <tr class="table-fake-row">
      <td class="table-fake-col">
        Cell 13
      </td>
      <td class="table-fake-col">
        Cell 14
      </td>
      <td class="table-fake-col">
        Cell 15
      </td>
      <td class="table-fake-col">
        Cell 16
      </td>
    </tr>
  </tbody>
</table>

4. Initialize the plugin and done.

jQuery('.table-fake').fakeTableSortable({
  // options here
});

5. Convert content before sorting. Can be either a function or an array of functions.

jQuery('.table-fake').fakeTableSortable({
  textConverter: [null, null, convertDateInterval, null]
});

function convertDateInterval(value) {
  var matches = value.match(/([0-9]{2}\/[0-9]{2}\/[0-9]{4}) au ([0-9]{2}\/[0-9]{2}\/[0-9]{4})/);
  var date1Parts = matches[1].split('/');
  var date2Parts = matches[2].split('/');
  return date1Parts[2] + '-' + date1Parts[1] + '-' + date1Parts[0] + '-' + date2Parts[2] + '-' + date2Parts[1] + '-' + date2Parts[0];
}

6. Determine the sort method.

jQuery('.table-fake').fakeTableSortable({
  sortMethods: 'lexicographical'
});

// or
jQuery('.table-fake').fakeTableSortable({
  sortMethods: ['lexicographical', 'lexicographical', 'lexicographical', 'number'],
});

7. More configuration options.

jQuery('.table-fake').fakeTableSortable({

  // default selectors
  headerItems: 'div.table-fake-row-first > div',
  lineItems: 'div.table-fake-row',
  cellItems: 'div.table-fake-col',

  // e.g. linesContainer: 'tbody',
  linesContainer: null,

  // or 'desc'
  firstSort: 'asc',   
  
});

---

This awesome jQuery plugin is developed by melicerte. For more Advanced Usages, please check the demo page or visit the official website.