Skip to main content

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, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
                var list = [];
                if (self.filter().currentPageIndex() <= 0) {
                    self.filter().enablePrev(false);
                }
                self.adarshLogListModel().adarshLogList().forEach(function (item) {
                    var newRecord = new model.adarshLog();
                    ko.mapping.fromJS(item, {}, newRecord); 
                    list.push(newRecord);
                });
                self.adarshLogs(list);
                // var newFilter = model.filter;
                ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
                //(newFilter);
                self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
                if (self.filter().currentPageIndex() <= 1) {
                    self.filter().enablePrev(false);
                }
                if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
                    self.filter().enableNext(false);
                }
                self.isBusy(false);
                self.filter().iconType((sortAscending === false) ? "glyphicon glyphicon-chevron-down" : "glyphicon glyphicon-chevron-up");
            });
        }


Filter.CS C#Model Changes

Add Following Properties

  public string SortBy { get; set; }
  public bool SortAscending { get; set; }

No Changes to Get All WebApi Controller Method

GetAll Repository Change


Before applying the pagination, add the sorting
switch (filter.SortBy)
                    {
                        case "Id":
                            if(filter.SortAscending)
                                adarshLogList = adarshLogList.OrderBy(a => a.Id);
                            else
                                adarshLogList = adarshLogList.OrderByDescending(a => a.Id);
                            break;
                        case "Name":
                            if (filter.SortAscending)
                                adarshLogList = adarshLogList.OrderBy(a => a.Name);
                            else
                                adarshLogList = adarshLogList.OrderByDescending(a => a.Name);
                            break;
                    }



Changes in View List View


<table class="table table-striped" id="tbUsers">
   
    <thead>
        <tr data-bind="click: $root.sortTable" class="pointerControl">
            <th data-column="Id">
                Id
                <span data-bind="attr: { class: sortBy() == 'Id' ? 'isVisible' : 'isHidden' }">
                    <i data-bind="attr: { class: iconType() }"></i>
                </span>
            </th>
            <th data-column="Name">Name
                <span data-bind="attr: { class: sortBy() == 'Name' ? 'isVisible' : 'isHidden' }">
                    <i data-bind="attr: { class: iconType() }"></i>
                </span>
            </th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
   
    <tbody data-bind="foreach: adarshLogs">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td class="col-sm-1">
                <a data-bind="attr: { href: '@Url.Action("Edit", "AdarshLog")' + '/' + Id () }" title="View"><span class="glyphicon glyphicon-pencil"></span></a>
            </td>
        </tr>
    </tbody>
</table>

Comments

Post a Comment

Popular posts from this blog

SRT THE REAL HERO

Lets Start with something quite interesting. So I am selecting SRT ( As an Indian too much dedicated towards cricket). For me cricket means Sachin . When ever Sachin is in crease i never looks the score. Like to see Sachin plays at least 35 to 40 overs. Usually by that time he will reach his century. My passion is to study the statistics of Sachin. You know Sachin looks almost 72 games to hit his first century. After 17 years now ( more than 350 matches he played after) he had 46 ODI century, what an amazing batsman. Till 1992 -1993 if you looks his ODI average its in late twenties. But now its after that 350 matches now more than 45 . I know one thing Sachin will play till his wish. I like to see him score more than 100 odi century( Sachin personally enjoys this). Its not a barrier , but a guy got that much passion towards game can achieve it. I always ideals Sachin. While i am working and have difficult situations, I always think how Sachin played 137 against Australia ( dessert ...
2 comments
Read more

CV Preparation

An old saying, - First Impression is the best impression. When we are applying for the jobs, chances of getting interview depend mainly on CV . Each location has its own CV format. While applying for an UK based job you need to sent a standard UK  format CV (optional cases some organisations do not accepts CV ).  1 Header with Name, phone number and email address (avoid address) 2 Career Conspectus – Describe about your experience, what technology you familiar with, what domain you got experience etc 3. Technical Skills – Mention all the technical skills on this section (In good format, if necessary use tables) 4. Certifications - Mention about the Certifications passed. 5. Employment Chronicle- Mention about the professional experience (Most recent first).Include Project name/Client name  , a brief summary  of project, your responsibility (Means role in the project), and the environment(Which  technologies used) which the projects works 6....
2 comments
Read more

Emergence and Creative Confidence

I started my career on 1st of September 2008 as a software developer at Manchester. Some people in my personal life might know about it. I like to say, that day as the day I found an aura in my life, transformation from the worst possible situation into a new beginning in a matter of 1 hour. The week before, I got an interview confirmation from that company and I was not at all excited about it because I know it is going to be the final interview in UK if I am unsuccessful. I was in that mental state because I was not successful for past 12 such occurrences and not expecting anything different. This shows I was not a brilliant person but had a strong passion and hardworking nature to achieve success. I passed my masters on Sep 2007 and after that, I decided to work only in software development, and lots of people including my parents told this as a worst possible decision. To be precise, they have no issues in choosing software development, but on my adamant decision only software de...
Post a Comment
Read more