Bootstrap Table: sort by date field

Question

I am using this Bootstrap table plugin. But sorting by date is not working properly.

Here is the code:

<table class=" table-striped" id="table" data-toggle="table"
    data-search="true"
    data-filter-control="true"
    data-click-to-select="true"
    data-escape="false">

    <thead>
        <tr>
            <th data-field="expiry_date" data-sortable="true" scope="col"><?= 'expiry date' ?></th>
        </tr>
    </thead>

Date is in this format: d/m/y (17/7/14)

How I can fix it in order to sort dates properly?

Nog

Out of curiosity, why are you echoing this string with PHP <?= 'expiry date' ?>? Since it's a hard coded string, why not just hard code it in HTML instead? – Unpolite

Answer 1

You must use a custom sorter with "data-sorter" attribute like data-sorter="datesSorter"

Then to fit your needs :

function datesSorter(a, b) {
  if (new Date(a) < new Date(b)) return 1;
  if (new Date(a) > new Date(b)) return -1;
  return 0;
}

Characharabanc

I get this error: Uncaught TypeError: a.toDate is not a function – Nog

I just gave you an example, in this case toDate() refers to a Moment.js method that converts a string to a date. – Characharabanc

Then you're more looking for how to compare dates than implement a sorter in bootstrap table. – Characharabanc

@Characharabanc - When writing an answer, you should refrain from adding extra dependencies unless it's really necessary. And if you do, you should definitely mention that in your answer, or it will be more confusing than helpful for the OP and future visitors. – Unpolite

@MagnusEriksson I specified it was an example to give him the way to do, which i thought was clear enough to be understood. I just edited my answer anyway. – Characharabanc

Never assume anything :-) It's important to be extra explicit when writing answers. – Unpolite

I was trapped in a little pitfall with this. The datesSorter function must be attached to window since Bootstrap-table uses func = window[name];. Then it works perfectly. – Toshiatoshiko

Answer 2

Put at the begining of <td> content the date translate to number like this

<span style="display:none">{{strtotime($date)}}</span>

Hoicks

+1 This answer is simple and readable and it always works, no matter what library or sorting mechanism you're using. It's even adaptable to your needs. I used ISO date string instead of strtotime(), thereby cutting out time zones. – Rehash

Works fantastic. And the date format, e.g. the german 'd.m.Y', doesn’t matter at all. – Eaten

Answer 3

I use a function with a short syntax, with the 'data-sorter' option:

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="date" data-sortable="true" data-sorter="dateSorter">Item Date</th>
    </tr>
  </thead>
</table>

<script>
    function dateSorter(a, b){
        return(new Date(a).getTime() - new Date(b).getTime());
    }
</script>

Recalcitrant

Answer 4

You must use a custom sorter with "data-sorter" attribute like data-sorter="datesSorter".

Then to fit your needs:

function datesSorter(a, b) {
    return Date.parse(a) - Date.parse(b);
}

Ramakrishna

Answer 5

I got it working like this.... I added a new column (numerical) and set it to hidden. You could do that easily by converting that date to a number.

$('#mainTable').bootstrapTable({
    sortStable: true,
    pagination: true,
    pageSize: 100,
    toolbar:"#toolbar",
    search: true,
    searchOnEnterKey: false,
    sortOrder: "desc",sortOrder: "desc",

    // here we determine the column that will sort the table
    sortName: "rel0",
    columns: [
        {
            // this is the hidden numeric column that works as sorter 
            field: 'rel0',
            title: 'rel0',                  
            visible:false,                             
        },
        {
            // this is the visible column
            field: 'rel',
            title: 'Date / hour',
        },
    ],
    data: objetoData
});

Psalmist