CSC/ECE 517 Fall 2016/E1650. Sort instructor views alphabetically by default: Difference between revisions
No edit summary |
m (→Purpose: Added the exact purpose) |
||
Line 3: | Line 3: | ||
The purpose of given topic is to sort the Instructor views on the basis of Reviewer's Last Name (by default) without refreshing the existing page. Current Model: <br> | The purpose of given topic is to sort the Instructor views on the basis of Reviewer's Last Name (by default) without refreshing the existing page. Current Model: <br> | ||
*Currently Instructor can view the Reports in non-decreasing sorted value of an 'Average Overall Volume' for the Reviewer.However ,instructor does not have any option to sort the list manually. | *Currently Instructor can view the Reports in non-decreasing sorted value of an 'Average Overall Volume' for the Reviewer.However ,instructor does not have any option to sort the list manually. | ||
*Hence, we are adding a functionality to instructor's view of reviewers' list that can sort the list as per his/her choice | |||
== Our Business Model == | == Our Business Model == |
Revision as of 19:26, 28 October 2016
Purpose
The purpose of given topic is to sort the Instructor views on the basis of Reviewer's Last Name (by default) without refreshing the existing page. Current Model:
- Currently Instructor can view the Reports in non-decreasing sorted value of an 'Average Overall Volume' for the Reviewer.However ,instructor does not have any option to sort the list manually.
- Hence, we are adding a functionality to instructor's view of reviewers' list that can sort the list as per his/her choice
Our Business Model
We will be changing the view as described below:
- Instructor will be able to sort the Reports according to the Reviewer's Last Name.
- Instructor will be able to sort the Reviewer column in either decreasing or increasing order without refreshing the page.
- To implement this, we plan to use TableSorter.
Implementation
Introduction to TableSorter
Implementation of sorting algorithm for Instructor views using 'TableSorter'. TableSorter is a jQuery plugin for turning a standard HTML table with table-head and table-body tags into a sortable table without rendering fresh. TableSorter can parse and sort many data types linked with the table column.
Requirements
To integrate the table sorter into any view two things are needed:
i) Include a gem in Gemfile
gem 'jquery-tablesorter'
ii) Including jQuery-tablesorter in app/assets/javascripts/application.js
//= require jquery-tablesorter
This loads only the core-widgets. It will neither include the extracted widgets nor any files from the addons and extras directories.
Sorting on Reviewer's Name
- Added in _review_report.html.erb
<script> $(function () { $("[data-toggle='tooltip']").tooltip(); $("#myTable").tablesorter({ sortList: [[0,0]], headers: { 4: { sorter: 'customParser' } } }); }) </script>
Sorting on Metric's Avg. Vol
- Added in _review_report.html.erb
<script> $.tablesorter.addParser({ id: "customParser", is: function (stringValue) { return false; }, format: function (stringValue) { var stringNumericPart = stringValue.split(" "); var numericValue = parseInt(stringNumericPart[2],10); return numericValue ; }, type: 'numeric' }); </script>
Testing
As we are working on view, so we have given the style for the table. By this we can test its performance over any browser.
- Added in _review_report.html.erb
<style> th.tablesorter-headerAsc{ background-image: url(<%= asset_path("up-arrow.png") %>); background-size: 15px 15px; background-repeat: no-repeat; background-position: center right; padding-right: 15px; } th.tablesorter-headerDesc{ background-image: url(<%= asset_path("down-arrow.png") %>); background-size: 15px 15px; background-repeat: no-repeat; background-position: center right; padding-right: 15px; } th.sorter-true.tablesorter-headerUnSorted{ background-image: url(<%= asset_path("sort.png") %>); background-size: 15px 7px; background-repeat: no-repeat; background-position: center right; padding-right: 15px; } </style>
Test Results
Below is the screenshot for the above given style:
References
1. [1]