CODEWITHSUNDEEP
javascriptphpjqueryhtmlbootstrap-table
netdev
netdev

Reputation: 566

Bootstrap Table: sort by date field

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?

Upvotes: 13

Views: 20863

Answers (6)

Disco
Disco

Reputation: 1

I used something like this to get it to work...

<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>
  // Convert the string dates to Date objects for comparison
  function datesSorter(a, b) {
    var dateA = new Date(a);
    var dateB = new Date(b);

    if (dateA < dateB) return -1;
    if (dateA > dateB) return 1;
    return 0;
  }
</script>

Upvotes: 0

איש נחמד
איש נחמד

Reputation: 411

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>

Upvotes: 4

Diego Gandino
Diego Gandino

Reputation: 111

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

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

Upvotes: 10

Evgeniy Evteev
Evgeniy Evteev

Reputation: 21

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

Upvotes: 2

Juan Andres
Juan Andres

Reputation: 51

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

Upvotes: 0

PHPnoob
PHPnoob

Reputation: 614

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

Upvotes: 11

Related Questions