DataTable - Custom Data source sorting [working]

by ipark

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
<body>
    <table id="example">
        <thead>
            <tr>
                <th>header 1</th>
                <th>header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" value="123" />
                </td>
                <td>123</td>
            </tr>
            <tr>
                <td>
                    <input type="text" value="124" />
                </td>
                <td>124</td>
            </tr>
            <tr>
                <td>
                    <input type="text" value="1234" />
                </td>
                <td>1234</td>
            </tr>
            <tr>
                <td>
                    <input type="text" value="234" />
                </td>
                <td>234</td>
            </tr>
        </tbody>
    </table>
</body>

JavaScript

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {

    var aData = [];
    
    // Before
    // $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
    // aData.push(this.value);
    // });
    
    // Now
    oSettings.oApi._fnGetTrNodes(oSettings).forEach(function (nRow) {
        var oElem = $('td:eq(' + iColumn + ') input', nRow);
        aData.push(oElem.val());
    });
    return aData;
};

var staticTestTable = $('#example').dataTable({
    aoColumns: [{
        sSortDataType: 'dom-text',
        sType: 'numeric'
    },
    null]
});