Skip to main content

Posts

Showing posts from 2015

Bootstrap Server Side Sorting Cont....

On my previous post   I had already mentioned about how to apply the sort to Bootstrap paginated tables. By making the following changes server side sorting can be achieved along with pagination. On Filter Model self.sortBy = ko.observable( 'Id' );//Default sort Column self.sortAscending = ko.observable( false ); self.iconType = ko.observable( 'glyphicon glyphicon-chevron-down' ); // Icon to appear near Column No Changes to Adarsh Log Model or Adarsh Log list Model Knockout.js View Model for Adarsh Log Changes Add the sortTable  method to it self.sortTable = function (viewModel, e) {             var columClicked = $(e.target).attr( "data-column" )             var sortAscending = (self.filter().sortAscending() === true ) ? false : true ;             self.filter().sortAscending(sortAscending);             self.filter().sortBy(columClicked);                        datacontext.getAllPost(self.adarshLogListModel, conf

Bootstrap Server Side Pagination - alternative to data tables

Background Most of the Web developers are familiar with the Datatable.Net for pagination. DataTables can integrate seamlessly with  Bootstrap  using Bootstrap's  table styling options  to present a consistent interface with your Bootstrap driven site / app. The main disadvantage with Data table.net is it is applying the pagination at the client side and for the large data set it can take minutes to load the data. Like every other designer I also faced the problem with Data table.net. So what is the best option to replace the client side paging and searching. So I forced to create a custom module to do the pagination and searching. The below sample don’t support the sorting, but got an option to extend the functionality. Please check my Next Post for sorting functionality The technologies used include, MVC 4.0, HTML5, Bootstarp.css, Knockout. js, Ajax, Web Api 2.0, Linq to SQL and C#. Knockout.js Model’s Filter Model var filter = function () { var self = this;