datatable custom dropdown for sort

Question

I have below dropdown.

<select name="sortBy" id="sortBy">
    <option value="0_asc" selected="selected">Reference #</option>
    <option value="0_desc">Reference # (desc)</option>
    <option value="pe-sku-column_asc">Part # (asc)</option>
    <option value="pe-sku-column_desc">Part # (desc)</option>
    <option value="pe-title-column_asc">Description (asc)</option>
    <option value="pe-title-column_desc">Description (desc)</option>
    <option value="pe-price-column_asc">Price (asc)</option>
    <option value="pe-price-column_desc">Price (desc)</option>
</select>

Now I want to sort my datatable according to the dropdown selection

I tried this

jQuery(document).ready(function ($) {
    var oTable = $('#super-product-table').DataTable({
        dom: 't'
    });

    $('#myInputTextField').keyup(function () {
        oTable.search($(this).val()).draw();
    })

    $("#sortBy").change(function () {

        oTable.fnSort([[1, 'asc']]);
    })
});

But it gives me

TypeError: oTable.fnSort is not a function

I have search for fnsort in datatable.js and found it.

One more thing, when I change DataTable to dataTable sorting started working and custom search stop.

See https://stackoverflow.com/a/25216454/1407478 – davidkonrad Dec 04 '17 at 10:58 — davidkonrad, Dec 04 '17 at 10:58

score 1 · Accepted Answer · answered Dec 04 '17 at 12:16

Please see the answer provided by @davidkonrad about differences between dataTable() and DataTable().

If you want to use DataTable(), replace older API method fnSort with newer API method order(). For example:

oTable.order([1, 'asc']).draw();

See conversion guide for DataTables 1.10 for more information.

datatable custom dropdown for sort

1 Answers1