CODEWITHSUNDEEP
jquerysortingdatatables
waheed Asghar
waheed Asghar

Reputation: 95

Jquery Sorting DataTable

I have a size column in the table which shows the size of the file with unit (e.g. 1KB, 10MB, 1GB, etc.).

Since unit part is string whole size value is input to table as the string so when the sorting is done it do String sorting. For example for it has sorted form of like this: 5KB 500MB 6KB which is not correct.

So I am wondering what will be the solution to the problem? Is there any parameter setting that can be done to solve this issue?

Upvotes: 1

Views: 774

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

There is a DataTables sorting plug-in for that - File size. From the manual:

When dealing with computer file sizes, it is common to append a post fix such as B, KB, MB or GB to a string in order to easily denote the order of magnitude of the file size. This plug-in allows sorting to take these indicates of size into account.

In addition to jQuery and DataTables library you need to include the latest plug-in script (see plug-in page for the up-to-date link).

Sample initialization code is shown below:

$('#example').DataTable({
    "columnDefs": [
        { "type": "file-size", "targets": 1 }
    ]    
});

Property targets indicates zero-based column index that contains file sizes.

See example below for demonstration.

$(document).ready(function() {
  $('#example').DataTable({
     "columnDefs": [
       { "type": "file-size", "targets": 1 }
     ]    
  });
});
<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/sorting/file-size.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">

  <thead>
    <tr>
      <th>Name</th>
      <th>Size</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Size</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Small.mp3</td>
      <td>9 KB</td>
    </tr>
    <tr>
      <td>Normal.mp3</td>
      <td>8 MB</td>
    </tr>
    <tr>
      <td>Large.mp3</td>
      <td>7 GB</td>
    </tr>
    <tr>
      <td>Smallest.mp3</td>
      <td>10 B</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Upvotes: 1

Related Questions