Skip to main content

Posts

Showing posts from 2015

Bootstrap Server Side Sorting Cont....

On my previous postI 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 Modelself.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, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () { var list = []; if (self.filter()…

Bootstrap Server Side Pagination - alternative to data tables

BackgroundMost 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 Modelvar filter = function () { var self = this; self.searchText = ko.observable(…