Bootstrap table sorting not working for inputfield

Question

I have used a Bootstrap datatable to show records in a tabular format as shown below

And here is the simple code for the above page

<style>
    input[type="text"] {
        display: block !important; 
        padding: 0 !important;
        margin: 0 !important; 
        border: 0 !important;
        width: 100% !important; 
        border-radius: 0 !important; 
        line-height: 1 !important;
    }
    td {margin: 0 !important;
        padding: 0 !important;
    }
</style>

<apex:form >
<apex:pageBlock >
    <apex:commandButton value="Save Sheet" action="{!saveSheet}" reRender="theTable"/>
    <table id="theTable" class="table table-striped table-bordered" width="100%">
        <thead>
            <tr>
                <apex:repeat value="{!lstCustSetFields}" var="field">
                    <th>{!field.Label__c}</th>
                </apex:repeat>
            </tr>
        </thead>
        <tbody>
            <apex:repeat value="{!lstRecords}" var="record">
                <tr>
                    <apex:repeat value="{!lstCustSetFields}" var="field">
                        <td>
                            <apex:inputField value="{!record[field.API_Name__c]}"/>
                         </td>
                    </apex:repeat>
                </tr>
            </apex:repeat>
        </tbody>
    </table>
</apex:pageBlock>
</apex:form>

<apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js"/>
<apex:includeScript value="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"/>
<apex:includeScript value="//cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"/>
<script>
    $(document).ready(function() {
        $('#theTable').dataTable();
    } );
</script>

Now the problem is that the built in functionality for sorting the table columns is not working for this table. I have deduced that it is so because the the data is inside an or tag and not specified directly inside the tags.

Please suggest some client side scripting solution to apply sorting for this table

Answer 1

The main work is done by DataTables JavaScript and this Live DOM ordering example shows how to add sorting functions that use jQuery to pull the input field values and feed them into the sorting logic. Its a bit too long to reproduce here.