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?

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? — M. Eriksson, Mar 14 '19 at 14:55

PHPnoob · Accepted Answer · 2019-03-14T15:19:32.060

8

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;
}

edited Mar 14 '19 at 15:19

answered Mar 14 '19 at 14:55

PHPnoob

586
3
7

I get this error: Uncaught TypeError: a.toDate is not a function – netdev Mar 14 '19 at 14:57
I just gave you an example, in this case toDate() refers to a Moment.js method that converts a string to a date. – PHPnoob Mar 14 '19 at 15:02
Then you're more looking for how to compare dates than implement a sorter in bootstrap table. – PHPnoob Mar 14 '19 at 15:15
2

@PHPnoob - 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. – M. Eriksson Mar 14 '19 at 15:16
@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. – PHPnoob Mar 14 '19 at 15:21
Never assume anything :-) It's important to be extra explicit when writing answers. – M. Eriksson Mar 14 '19 at 15:24
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. – roland Sep 04 '19 at 12:12

score 7 · Answer 2 · answered Mar 15 '21 at 23:04

7

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

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

answered Mar 15 '21 at 23:04

Diego Gandino

81
1
1

+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. – Mark Roberts Jun 28 '23 at 11:23

score 3 · Answer 3 · answered Oct 23 '21 at 21:18

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>

score 2 · Answer 4 · answered Dec 16 '20 at 18:08

2

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

answered Dec 16 '20 at 18:08

Evgeniy Evteev

21
3

score 0 · Answer 5 · edited Dec 01 '20 at 06:03

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

Bootstrap Table: sort by date field

5 Answers5