Topic: DataTables sort by numeric value and not string value

jasinskimathieu pro asked 2 weeks ago


Hello,

I want to sort numeric value with html method, but it doesn't work. But, if I do the same with JS, it is word. Why ?

I use Datatables in HTML like this :

      <div  class="datatable">
  <table>
    <thead>
      <tr>
        <th class="th-sm">Name</th>
        <th class="th-sm">Position</th>
        <th class="th-sm">Office</th>
        <th class="th-sm">Age</th>
        <th class="th-sm">Start date</th>
        <th class="th-sm">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>6</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>5</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
      </tr>
    </tbody>
  </table>
</div>

and if I try with JS, I have correct sort

<script type="text/javascript">
  const basicData = {
  columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
  rows: [
    ["Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", 6, "2009/01/12", "$86,000"],
    ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", 22, "2012/03/29", "$433,060"],
    ["Rhona Davidson", "Integration Specialist", "Tokyo", 5, "2010/10/14", "$327,900"],
  ],
};

new mdb.Datatable(document.getElementById('datatable'), basicData)
</script>

Grzegorz Bujański staff answered 2 weeks ago


This is due to the fact that in HTML all texts are always of type string. Even if you pass number or date it will be of type string. Look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4619543#js-tab-view

Regardless of whether this data is provided - by HTML or added via JS, after checking the data type in HTML code, it will always be a string.

In datatables we do not change data types and it is also not possible to provide information about what type of data it is. Therefore, if you add data using HTML, for our datatable component all this data is a string. If you want to pass data of a type other than string, you have to pass it using JS.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.0.1
  • Device: Pc
  • Browser: Firefox
  • OS: wINDOWS
  • Provided sample code: No
  • Provided link: No