JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="myTable">
    <thead>
        <tr>
            <th>Voter Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                Jatan
             </td>
        </tr>
        <tr>
            <td>1</td>
            <td>
                test2
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>test5
             </td>
        </tr>
         <tr>
            <td></td>
            <td>test7
             </td>
        </tr>
    </tbody>
</table>

JavaScript

$.fn.dataTable.ext.order['number-list'] = function  ( settings, col )
{
                return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {

                                //get all numbers from the cell into an array and parseFloat each one
                                var nums = $(td).html().match(/(\d+.\d+)/);

                                if(nums){
                                        nums = nums.map(function(val){return parseFloat(val, 10);});
                                        return Math.max.apply(null, nums);
                                }
                                else{
                                        return 0;
                                }
                        } );
}

$(document).ready(function(){
    var myDataTable = $('#myTable').DataTable({
        "columns":[
           
            {"orderDataType":"number-list", type: 'numeric'},null
         ],
        "order":[],
    });
});