CSC/ECE 517 Fall 2016/E1650. Sort instructor views alphabetically by default: Difference between revisions
(Purpose and our Business Model) |
(Updating the code part) |
||
Line 25: | Line 25: | ||
i) Include a gem in Gemfile | i) Include a gem in Gemfile | ||
<pre> | <pre> | ||
gem 'jquery-tablesorter | gem 'jquery-tablesorter' | ||
</pre> | </pre> | ||
Line 36: | Line 36: | ||
=== Sorting on Reviewer's Name === | === Sorting on Reviewer's Name === | ||
<pre> | |||
<script> | |||
$(function () { | |||
$("[data-toggle='tooltip']").tooltip(); | |||
$("#myTable").tablesorter({ | |||
sortList: [[0,0]], | |||
headers: { | |||
4: { | |||
sorter: 'customParser' | |||
} | |||
} | |||
}); | |||
}) | |||
</script> | |||
</pre> | |||
=== Sorting on Metric's Avg. Vol === | === Sorting on Metric's Avg. Vol === | ||
<pre> | |||
<script> | |||
$.tablesorter.addParser({ | |||
id: "customParser", | |||
is: function (stringValue) { | |||
return false; | |||
}, | |||
format: function (stringValue) { | |||
var stringValueParts = stringValue.split(" "); | |||
var numericPartOfStringValue = parseInt(stringValueParts[2],10); | |||
return numericPartOfStringValue ; | |||
}, | |||
type: 'numeric' | |||
}); | |||
</script> | |||
</pre> | |||
== Testing == | == Testing == | ||
<pre> | |||
<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> | |||
</pre> | |||
=== Test Results === | === Test Results === | ||
Revision as of 18:59, 28 October 2016
Purpose
The purpose of this topic is to sort the Instructor views on the basis of Reviewer's Last Name (by default). Current Model:
- Currently Instructor can view the Reports in non-decreasing sorted value of 'Average Overall Volume' for the Reviewer.
Our Business Model
We plan to change the view as per below:
- Instructor will be able to view the Reports according to the Reviewer's Last Name.
- Instructor will be able to view either in non-decreasing or non-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
<script> $(function () { $("[data-toggle='tooltip']").tooltip(); $("#myTable").tablesorter({ sortList: [[0,0]], headers: { 4: { sorter: 'customParser' } } }); }) </script>
Sorting on Metric's Avg. Vol
<script> $.tablesorter.addParser({ id: "customParser", is: function (stringValue) { return false; }, format: function (stringValue) { var stringValueParts = stringValue.split(" "); var numericPartOfStringValue = parseInt(stringValueParts[2],10); return numericPartOfStringValue ; }, type: 'numeric' }); </script>
Testing
<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>