Disable sort on column header but not arrows in column header

alcor8

Using the jquery version of Datatables, I've put inputs(search boxes) in each header on my table using the following code:

<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#sortable').DataTable({
           //ordering: false
        });

        $('#sortable thead th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="' + title + '" style="width : 100%" />');
        });

        table.columns().every(function () {
            var that = this;
            $('input', this.header()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });
    });
</script>

When I click on the search boxes it sorts the column before I type anything. Is there a way to turn off sorting when I click on the search box but keep it if I click on the arrows next to them? I tried "ordering" but it seems to be all or nothing.

tangerine

You need two header rows and orderCellsTop:.
https://datatables.net/reference/option/orderCellsTop