Bootstrap table sorting, filtering, pagination using dataTable.js

Question

I am working on asp.net MVC-5 and created a Bootstrap table to show data Now i want to apply pagination, filtering and sorting, for this i searched may articles and found this

Answer 1

I know this is an old thread but the solution that worked for me was not listed here, and this still appears at the top of the results in Google. Try adding defer to your datatable.js import

<script defer type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

if you open developer tools (in chrome) and click on "Network" you can see which order your files are loading. And even though Jquery.js by appear before DataTables.js in your html file, Jquery may not have finished loading by the time DataTables does. adding defer ensures that the datatables.js file loads last.

Additionally if you want to know if you are somehow loading two instances of jquery (another possible cause of this problem) you can see that in Developer tools under "Network".

Answer 2

use <thead> tag in table

<thead>
    <tr>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" >
            Name
        </th>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
            Ocurrence Time
        </th>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
            Recover Time
        </th>
    </tr>
</thead>