DataTables

DataTables Examples

by jordan_josh3184

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="example">
    <thead>
        <tr>
            <th>Column</th>
        </tr>
    </thead>
    <tbody>
		<tr><td>ABC 0.0</td></tr>        
		<tr><td>01234</td></tr>                
		<tr><td>0.1234</td></tr>                        
		<tr><td>-100.50 USD</td></tr>
		<tr><td>Text</td></tr>
		<tr><td>50.01 USD</td></tr>        
		<tr><td>100.50 ASD</td></tr>
		<tr><td>Another Text</td></tr>
		<tr><td>50.00 USD</td></tr>
		<tr><td>27.95 DKK</td></tr>        
		<tr><td>Plain Text</td></tr>        
		<tr><td>-47</td></tr>        
		<tr><td>6.286119436349295e+21 exp number</td></tr>                
		<tr><td>0.286119436349295 USD</td></tr>
		<tr><td>47</td></tr>
		<tr><td>$12,443.00</td></tr>
		<tr><td>362,123,231</td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </tbody>
</table>

JavaScript

function sortNumbersIgnoreText(a, b, high) {
    var reg = /[+-]?((\d+(\.\d*)?)|\.\d+)([eE][+-]?[0-9]+)?/;    
    a = a.replace(/,/g, '');
    a = a.match(reg);      
    a = a !== null ? parseFloat(a[0]) : high;
    b = b.replace(/,/g, '');
    b = b.match(reg);    
    b = b !== null ? parseFloat(b[0]) : high;
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));    
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "sort-numbers-ignore-text-asc": function (a, b) {
        return sortNumbersIgnoreText(a, b, Number.POSITIVE_INFINITY);
    },
    "sort-numbers-ignore-text-desc": function (a, b) {
        return sortNumbersIgnoreText(a, b, Number.NEGATIVE_INFINITY) * -1;
    }
});

var dataTable = $('#example').dataTable({
    lengthMenu : [5, 10, 20, 50],
    pageLength : 20,
    columnDefs: [
        { type: 'sort-numbers-ignore-text', targets : 0 }
     ],
});