DataTable select box sort

by Ollie Crush

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
                <td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
                <td>Orewa</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
                <td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
                <td><select size="1" id="row-2-office" name="row-2-office">
                    <option value="Edinburgh">
                        Edinburgh
                    </option>
 
                    <option value="London">
                        London
                    </option>
 
                    <option value="New York">
                        New York
                    </option>
 
                    <option value="San Francisco">
                        San Francisco
                    </option>
 
                    <option value="Tokyo" selected="selected">
                        Tokyo
                    </option>
                </select></td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td><input type="text" id="row-3-age"...

JavaScript

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val();
    } );
}
 
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val() * 1;
    } );
}
 
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
{    
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        this.each(function ( i ) {
            if this.not(:has(select)) {
            return $(td).text();
            }
            else {
                return $('select', td).val();
            }
        } );
        
        
    } );
}
 
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).prop('checked') ? '1' : '0';
    } );
}
 
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
    $('#example').dataTable( {
        "columns": [
            null,
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text", type: 'string' },
            { "orderDataType": "dom-select" }
        ]
    } );
} );