DataTables - Extracting search values

Trying to extract the data-* values and create a select list out of it.

by Vijay K

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<table id="tbl">
    <thead>
        <tr>
            <th>Source Server</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-search="Server 1">
                <img class="testImg" />Server 1</td>
        </tr>
        <tr>
            <td data-search="Server 2">
                <img class="testImg" />Server 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th data-role="dtFilterSelect"></th>
        </tr>
    </tfoot>
</table>

CSS

.testImg {
background: 
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

JavaScript

$(function () {
    var tbl = $('#tbl');
    var dtbl = tbl.DataTable();
    $('th[data-role="dtFilterSelect"]', tbl).each(function (i) {
        SetupSelectFilter(this, i, dtbl);
    });
});

function SetupSelectFilter(obj, i, dt) {
    var colIndex = $(obj).parent().children().index($(obj));
    var colData = [];
    var select = $('<select><option value="">All</option></select>')
        .appendTo($(obj).empty())
        .on('change', function () {
        var val = $(this).val().trim();
        dt.column(colIndex)
        .search(val?'^'+val+'$':val, true, false)
            .draw();
    });

    dt.column(colIndex).nodes(colIndex).each(function (d, j) {
        var tempColData = d.hasAttribute("data-search")?d.getAttribute("data-search").trim():d.innerText.trim();
        
        if(colData.indexOf(tempColData) < 0 ) {
            colData.push(tempColData);
            select.append('<option value="' + tempColData + '">' + tempColData + '</option>');
        }
    });
}