jQuery Grid Bootstrap

Don't reinvent the wheel and enhance the functionality in bootstrap tables by yourself. You not need to waste that time, because there are already a lot of jquery plugins that are going to do that for you. For example you can enhance every bootstrap html table easily with jquery grid from gijgo.com.
In the following example you can see how to enable paging and sorting for bootstrap table with few lines of code.

 <table id="grid"></table>

 <script>

   var data = [

         { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },

         { 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },

         { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }

     ];

     $('#grid').grid({

         dataSource: data,

         uiLibrary: 'bootstrap',

         columns: [ 

             { field: 'ID' },

             { field: 'Name', sortable: true },

             { field: 'PlaceOfBirth', sortable: true }

         ],

         pager: { limit: 2, sizes: [2, 5, 10, 20] }

     });

 </script>

</pre>

You can see many more examples for different new features at http://gijgo.com/grid