Sort Fake Tables Made Without Table Markup

Effective table sorter is an IS jQuery plugin that allows to sort or not generated data created with any markup, table, or not. fakeTableSort.js is a fast data sorter based on jQuery that can be used to sort any data structure similar to table elements, not just HTML tables.

jquery sort divs by data attribute, jquery tablesorter example code, jquery sort divs by class, tablesorter jquery, sort div using jquery, jquery sort divs alphabetically

More features:

Sort by alphabetical or numerical order.
It allows you to specify the sort method for each column.
Provides a function to convert data before sorting.

How to make use of it:

1. Insert the Fake Table Sort plugin after loading the 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 properly.

<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 completed it.

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

5. Convert content earlier than sorting. Can be both a function or an array of features.

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 technique.

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',   
  
});

Any Data Sorter, Efficient table sorter Plugin/Github, sort table jquery bootstrap, jquery tablesorter sort by data attribute