Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
f379d0bf by Jeff Balicki
Options

resources data tables 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 49b39e69
Inline Side-by-side
Showing 16 changed files with 237 additions and 152 deletions
...@@ -15291,6 +15291,7 @@ label[for=quicksearch] { ...@@ -15291,6 +15291,7 @@ label[for=quicksearch] {
15291 flex-direction: row; 15291 flex-direction: row;
15292 } 15292 }
15293 15293
15294 .category-type,
15294 .category-filter { 15295 .category-filter {
15295 display: flex; 15296 display: flex;
15296 flex-direction: row; 15297 flex-direction: row;
...@@ -15300,6 +15301,7 @@ label[for=quicksearch] { ...@@ -15300,6 +15301,7 @@ label[for=quicksearch] {
15300 margin: 0.25rem 0; 15301 margin: 0.25rem 0;
15301 margin-right: 1rem; 15302 margin-right: 1rem;
15302 } 15303 }
15304 .category-type label,
15303 .category-filter label { 15305 .category-filter label {
15304 padding-left: 30px; 15306 padding-left: 30px;
15305 padding-right: 10px; 15307 padding-right: 10px;
...@@ -15307,14 +15309,17 @@ label[for=quicksearch] { ...@@ -15307,14 +15309,17 @@ label[for=quicksearch] {
15307 cursor: pointer; 15309 cursor: pointer;
15308 color: #2C2C2C; 15310 color: #2C2C2C;
15309 } 15311 }
15312 .category-type input[type=checkbox],
15310 .category-filter input[type=checkbox] { 15313 .category-filter input[type=checkbox] {
15311 display: inline-block; 15314 display: inline-block;
15312 margin-left: 30px; 15315 margin-left: 30px;
15313 margin-left: 0; 15316 margin-left: 0;
15314 } 15317 }
15318 .category-type input[type=checkbox]:focus + label,
15315 .category-filter input[type=checkbox]:focus + label { 15319 .category-filter input[type=checkbox]:focus + label {
15316 outline: -webkit-focus-ring-color auto 1px; 15320 outline: -webkit-focus-ring-color auto 1px;
15317 } 15321 }
15322 .category-type label:before,
15318 .category-filter label:before { 15323 .category-filter label:before {
15319 content: ""; 15324 content: "";
15320 cursor: pointer; 15325 cursor: pointer;
...@@ -15328,6 +15333,7 @@ label[for=quicksearch] { ...@@ -15328,6 +15333,7 @@ label[for=quicksearch] {
15328 border: 2px solid #0081BC; 15333 border: 2px solid #0081BC;
15329 border-radius: 4px; 15334 border-radius: 4px;
15330 } 15335 }
15336 .category-type input:checked + label:before,
15331 .category-filter input:checked + label:before { 15337 .category-filter input:checked + label:before {
15332 background: #0081BC !important; 15338 background: #0081BC !important;
15333 border: 2px solid #0081BC; 15339 border: 2px solid #0081BC;
...@@ -15341,6 +15347,7 @@ label[for=quicksearch] { ...@@ -15341,6 +15347,7 @@ label[for=quicksearch] {
15341 position: absolute; 15347 position: absolute;
15342 cursor: pointer; 15348 cursor: pointer;
15343 } 15349 }
15350 .category-type input[type=checkbox],
15344 .category-filter input[type=checkbox] { 15351 .category-filter input[type=checkbox] {
15345 background-color: initial; 15352 background-color: initial;
15346 cursor: default; 15353 cursor: default;
...@@ -15353,6 +15360,7 @@ label[for=quicksearch] { ...@@ -15353,6 +15360,7 @@ label[for=quicksearch] {
15353 border: initial; 15360 border: initial;
15354 position: relative; 15361 position: relative;
15355 } 15362 }
15363 .category-type .sr-only,
15356 .category-filter .sr-only { 15364 .category-filter .sr-only {
15357 position: absolute !important; 15365 position: absolute !important;
15358 clip: rect(1px, 1px, 1px, 1px); 15366 clip: rect(1px, 1px, 1px, 1px);
...@@ -15577,6 +15585,19 @@ label[for=quicksearch] { ...@@ -15577,6 +15585,19 @@ label[for=quicksearch] {
15577 border-bottom: 22px solid #E04E39; 15585 border-bottom: 22px solid #E04E39;
15578 } 15586 }
15579 15587
15588 #dataTables_length,
15589 #resources_filter,
15590 #resources_length {
15591 display: none !important;
15592 visibility: hidden !important;
15593 }
15594
15595 th.hidden,
15596 td.hidden {
15597 display: none !important;
15598 visibility: hidden !important;
15599 }
15600
15580 .has-blue-color, 15601 .has-blue-color,
15581 .has-blue-color:visited { 15602 .has-blue-color:visited {
15582 color: #0d6efd; 15603 color: #0d6efd;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -29,21 +29,23 @@ function resources_list(){ ...@@ -29,21 +29,23 @@ function resources_list(){
29 <?php }; ?> 29 <?php }; ?>
30 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 22) ); 30 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 22) );
31 foreach($terms as $term){ ?> 31 foreach($terms as $term){ ?>
32 <div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value="<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div> 32 <div class="category-type"> <input id="<?php echo $term->slug ; ?>" value="<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
33 <?php }; ?> 33 <?php }; ?>
34 </div> 34 </div>
35 <div class="btn-group sort-button-group align-self-end"> 35 <div class="btn-group sort-button-group align-self-end">
36 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 36 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="1" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
37 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 37 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="3" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 <div class="grid resources"> 41 <table id="resources">
42 <thead><tr><th class="hidden"></th><th class="hidden"></th><th></th><th class="hidden"></th></tr></thead>
43 <tbody>
42 <?php while ($custom_query->have_posts()): $custom_query->the_post(); 44 <?php while ($custom_query->have_posts()): $custom_query->the_post();
43 45 echo resources(get_the_ID());
44 echo resources(get_the_ID());
45 endwhile; ?> 46 endwhile; ?>
46 </div> 47 </tbody>
48 </table>
47 </div> 49 </div>
48 <?php endif; 50 <?php endif;
49 wp_reset_query(); 51 wp_reset_query();
...@@ -58,15 +60,27 @@ function resources($id){ ...@@ -58,15 +60,27 @@ function resources($id){
58 ob_start(); 60 ob_start();
59 $post = get_post($id); 61 $post = get_post($id);
60 $categories = get_the_terms( $id, 'media-category' ); 62 $categories = get_the_terms( $id, 'media-category' );
61 $cat =""; 63 $cat ="";
64 $type ="";
62 if(is_array( $categories)){ 65 if(is_array( $categories)){
63 foreach( $categories as $category ) { $cat .= " ".$category->slug; }; 66 foreach( $categories as $category ) {
67 if($category->parent == 17){
68 $cat .= " ".$category->slug;
69 }
70 if($category->parent == 22){
71 $type .= " ".$category->slug;
72 }
73 };
64 } ?> 74 } ?>
65 75
66 <div data-ticks="<?php echo get_post_time('U',false, $id ); ?>" class="table-like__item element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>"> 76 <tr class="table-like__item">
67 <a role="button" href="<?php echo get_permalink($id); ?>"><span class="name"><?php echo $post->post_title; ?></span></a><br> 77 <td class="hidden"> <?php echo $type; ?></td>
78 <td><a role="button" href="<?php echo get_permalink($id); ?>"><span class="name"><?php echo $post->post_title; ?></span></a><br>
68 <?php echo wp_get_attachment_caption($id) ?> 79 <?php echo wp_get_attachment_caption($id) ?>
69 </div> 80 </td>
81 <td class="hidden"> <?php echo $cat; ?></td>
82 <td class="hidden"><?php echo get_post_time('U',false, $id ); ?></td>
83 </tr>
70 <?php 84 <?php
71 $output = ob_get_clean(); 85 $output = ob_get_clean();
72 return $output; 86 return $output;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -1989,6 +1989,118 @@ ...@@ -1989,6 +1989,118 @@
1989 "css-tree": "^1.1.2" 1989 "css-tree": "^1.1.2"
1990 } 1990 }
1991 }, 1991 },
1992 "datatables.net": {
1993 "version": "1.13.2",
1994 "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.2.tgz",
1995 "integrity": "sha512-u5nOU+C9SBp1SyPmd6G+niozZtrBwo1E8xzdOk3JJaAkFYgX/KxF3Gd79R8YLbUfmIs2OLnLe5gaz/qs5U8UDA==",
1996 "requires": {
1997 "jquery": ">=1.7"
1998 }
1999 },
2000 "datatables.net-bs5": {
2001 "version": "1.13.2",
2002 "resolved": "https://registry.npmjs.org/datatables.net-bs5/-/datatables.net-bs5-1.13.2.tgz",
2003 "integrity": "sha512-p1JOXFi+VD4wS0AxRmJPHBylJ8AC4xGJ3j0TZ+8hMspuZ+QvAhEqEPt8OEAGVzlN1ElfQimZjBeAoES/9nsuig==",
2004 "requires": {
2005 "datatables.net": ">=1.12.1",
2006 "jquery": ">=1.7"
2007 }
2008 },
2009 "datatables.net-buttons": {
2010 "version": "2.3.4",
2011 "resolved": "https://registry.npmjs.org/datatables.net-buttons/-/datatables.net-buttons-2.3.4.tgz",
2012 "integrity": "sha512-1fe/aiKBdKbwJ5j0OobP2dzhbg/alGOphnTfLFGaqlP5yVxDCfcZ9EsuglYeHRJ/KnU7DZ8BgsPFiTE0tOFx8Q==",
2013 "requires": {
2014 "datatables.net": ">=1.12.1",
2015 "jquery": ">=1.7"
2016 }
2017 },
2018 "datatables.net-buttons-bs5": {
2019 "version": "2.3.4",
2020 "resolved": "https://registry.npmjs.org/datatables.net-buttons-bs5/-/datatables.net-buttons-bs5-2.3.4.tgz",
2021 "integrity": "sha512-3pCmzcHwoow0kYH967cymeHT+IPn6+RzK+3XqUsDykIWRcjUaZR6fj+TSL7E8LCkgEI0KhwBIK1Uqa4v8YH0jg==",
2022 "requires": {
2023 "datatables.net-bs5": ">=1.12.1",
2024 "datatables.net-buttons": ">=2.2.3",
2025 "jquery": ">=1.7"
2026 }
2027 },
2028 "datatables.net-responsive": {
2029 "version": "2.4.0",
2030 "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-2.4.0.tgz",
2031 "integrity": "sha512-Acws4aEPJZX/+CQsXpuDBHfrwgl3XxWEc/zlsnJCXE/GGbqjVAtQt7SM6EBcdReMv1FbyWUlF/Uw+de11NT46A==",
2032 "requires": {
2033 "datatables.net": ">=1.12.1",
2034 "jquery": ">=1.7"
2035 }
2036 },
2037 "datatables.net-responsive-bs5": {
2038 "version": "2.4.0",
2039 "resolved": "https://registry.npmjs.org/datatables.net-responsive-bs5/-/datatables.net-responsive-bs5-2.4.0.tgz",
2040 "integrity": "sha512-2kxigvftgVgdyH+BZ17jbR+BcWYZsacnlTt4PeOH/P98bMuqJKrziss7CLz/6qud/ehHdLEQTjMDoJddN9NfxA==",
2041 "requires": {
2042 "datatables.net-bs5": ">=1.12.1",
2043 "datatables.net-responsive": ">=2.3.0",
2044 "jquery": ">=1.7"
2045 }
2046 },
2047 "datatables.net-searchbuilder": {
2048 "version": "1.4.0",
2049 "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder/-/datatables.net-searchbuilder-1.4.0.tgz",
2050 "integrity": "sha512-I6+a5EebX6uYFlWmc7TAk1oQvlfoGZqyLgdN4H9Rm6fL5VZv6SvWQ7y2+W9ebshMD0smKdtp8pedYc8PIh80kg==",
2051 "requires": {
2052 "datatables.net": ">=1.12.1",
2053 "jquery": ">=1.7"
2054 }
2055 },
2056 "datatables.net-searchbuilder-bs5": {
2057 "version": "1.4.0",
2058 "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder-bs5/-/datatables.net-searchbuilder-bs5-1.4.0.tgz",
2059 "integrity": "sha512-wi2jT8JYwuNNaHRTKARG8x/3R3WsUNvde6avAj+r/it9py7vb1tZNNwbDge0VYtg6nzgaSk6sUWk6WsqTkZGiA==",
2060 "requires": {
2061 "datatables.net-bs5": ">=1.12.1",
2062 "datatables.net-searchbuilder": ">=1.3.4",
2063 "jquery": ">=1.7"
2064 }
2065 },
2066 "datatables.net-searchpanes": {
2067 "version": "2.1.1",
2068 "resolved": "https://registry.npmjs.org/datatables.net-searchpanes/-/datatables.net-searchpanes-2.1.1.tgz",
2069 "integrity": "sha512-WsgnK8C/jCco9oRcpsVaImgTCiD7hk28dLHBmlpbvbIHMHCAhLPn0zVnCB3yInoNC/7kOGKpkeItpIpFHDMnhA==",
2070 "requires": {
2071 "datatables.net": ">=1.12.1",
2072 "jquery": ">=1.7"
2073 }
2074 },
2075 "datatables.net-searchpanes-bs5": {
2076 "version": "2.1.1",
2077 "resolved": "https://registry.npmjs.org/datatables.net-searchpanes-bs5/-/datatables.net-searchpanes-bs5-2.1.1.tgz",
2078 "integrity": "sha512-sXn2waL7jNIWkspJeL7SXyhYSmPUC+6BSICjaCk8IK5FMEGm9s+Ot/txpSeoNeDEUtIxf67UElc3qI2r1OKrLQ==",
2079 "requires": {
2080 "datatables.net-bs5": ">=1.12.1",
2081 "datatables.net-searchpanes": ">=2.0.2",
2082 "jquery": ">=1.7"
2083 }
2084 },
2085 "datatables.net-select": {
2086 "version": "1.6.0",
2087 "resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-1.6.0.tgz",
2088 "integrity": "sha512-1kj32GOXs/dSpjBL5iDV3pwRwHU0hhJLPnTW/NOUH8Vhv1rGR3/X3PMSCc/T+Fy7J1jCJFbk8hQDsruXQKfSzw==",
2089 "requires": {
2090 "datatables.net": ">=1.12.1",
2091 "jquery": ">=1.7"
2092 }
2093 },
2094 "datatables.net-select-bs5": {
2095 "version": "1.6.0",
2096 "resolved": "https://registry.npmjs.org/datatables.net-select-bs5/-/datatables.net-select-bs5-1.6.0.tgz",
2097 "integrity": "sha512-6vOeEqe+HmU6r4jKjgQsNfSkmUd6Ei7PyaSc6XpmWFZ4oRWu/tKoVQWd1KXRv5S6gZmlNowKXeafQYjpmHMLAg==",
2098 "requires": {
2099 "datatables.net-bs5": ">=1.12.1",
2100 "datatables.net-select": ">=1.4.0",
2101 "jquery": ">=1.7"
2102 }
2103 },
1992 "debug": { 2104 "debug": {
1993 "version": "4.3.4", 2105 "version": "4.3.4",
1994 "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", 2106 "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
......
...@@ -42,6 +42,12 @@ ...@@ -42,6 +42,12 @@
42 }, 42 },
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "datatables.net-bs5": "^1.13.2",
46 "datatables.net-buttons-bs5": "^2.3.4",
47 "datatables.net-responsive-bs5": "^2.4.0",
48 "datatables.net-searchbuilder-bs5": "^1.4.0",
49 "datatables.net-searchpanes-bs5": "^2.1.1",
50 "datatables.net-select-bs5": "^1.6.0",
45 "isotope": "^1.0.0-alpha.3", 51 "isotope": "^1.0.0-alpha.3",
46 "isotope-layout": "^3.0.6", 52 "isotope-layout": "^3.0.6",
47 "jquery-bridget": "^3.0.1", 53 "jquery-bridget": "^3.0.1",
......
...@@ -2,166 +2,85 @@ ...@@ -2,166 +2,85 @@
2 2
3 jQuery( document ).ready(function($) { 3 jQuery( document ).ready(function($) {
4 4
5 if(!$('.grid.resources').length){ 5 if(!$('#resources').length){
6 return; 6 return;
7 } 7 }
8 8
9 var myTable = $('#resources').DataTable({
10 "pageLength": 16,
11 "searchable": false,
12 "paging": true,
13 "info": false,
14
15 });
16
17
18 // use value of search field to filter
19 var $quicksearch = $('#quicksearch').keyup( function() {
20 console.log($quicksearch.val());
21 myTable.DataTable().column(1).search($quicksearch.val()).draw();
22 });
23
9 24
10 var itemSelector = ".element-item";
11 var $checkboxes = $('.category-filter input');
12 var $container = $('.grid').isotope({ itemSelector: itemSelector,
13 getSortData: {
14 coursename: '.name',
15 date: '[data-ticks]',
16 } });
17
18 //Ascending order
19 var responsiveIsotope = [ [480, 4] , [720, 6] ];
20 var itemsPerPageDefault = 20;
21 var itemsPerPage = defineItemsPerPage();
22 var currentNumberPages = 1;
23 var currentPage = 1;
24 var currentFilter = '*';
25 var filterAttribute = 'data-filter';
26 var filterValue = "";
27 var pageAttribute = 'data-page';
28 var pagerClass = 'isotope-pager';
29 var wordPage;
30
31 // update items based on current filters
32 function changeFilter(selector) { $container.isotope({ filter: selector }); }
33
34 //grab all checked filters and goto page on fresh isotope output
35 function goToPage(n) {
36 currentPage = n;
37 var selector = itemSelector;
38 var exclusives = [];
39 // for each box checked, add its value and push to array
40 $checkboxes.each(function (i, elem) {
41 if (elem.checked) {
42 selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
43 exclusives.push(selector);
44 }
45 });
46 // smash all values back together for 'and' filtering
47 filterValue = exclusives.length ? exclusives.join('') : '*';
48
49 // add page number to the string of filters
50 var wordPage = currentPage.toString();
51 filterValue += ('.'+wordPage);
52
53 changeFilter(filterValue);
54 }
55 25
56 // determine page breaks based on window width and preset values
57 function defineItemsPerPage() {
58 var pages = itemsPerPageDefault;
59 26
60 for( var i = 0; i < responsiveIsotope.length; i++ ) {
61 if( $(window).width() <= responsiveIsotope[i][0] ) {
62 pages = responsiveIsotope[i][1];
63 break;
64 }
65 }
66 return pages;
67 }
68
69 function setPagination() {
70
71 var SettingsPagesOnItems = function(){
72 var itemsLength = $container.children(itemSelector).length;
73 var pages = Math.ceil(itemsLength / itemsPerPage);
74 var item = 1;
75 var page = 1;
76 var selector = itemSelector;
77 var exclusives = [];
78 // for each box checked, add its value and push to array
79 $checkboxes.each(function (i, elem) {
80 if (elem.checked) {
81 selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
82 exclusives.push(selector);
83 }
84 });
85 // smash all values back together for 'and' filtering
86 filterValue = exclusives.length ? exclusives.join('') : '*';
87 // find each child element with current filter values
88 $container.children(filterValue).each(function(){
89 // increment page if a new one is needed
90 if( item > itemsPerPage ) {
91 page++;
92 item = 1;
93 }
94 // add page number to element as a class
95 wordPage = page.toString();
96
97 var classes = $(this).attr('class').split(' ');
98 var lastClass = classes[classes.length-1];
99 // last class shorter than 4 will be a page number, if so, grab and replace
100 if(lastClass.length < 4){
101 $(this).removeClass();
102 classes.pop();
103 classes.push(wordPage);
104 classes = classes.join(' ');
105 $(this).addClass(classes);
106 } else {
107 // if there was no page number, add it
108 $(this).addClass(wordPage);
109 }
110 item++;
111 });
112 currentNumberPages = page;
113 }();
114
115 // create page number navigation
116 var CreatePagers = function() {
117
118 var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
119
120 $isotopePager.html('');
121 if(currentNumberPages > 1){
122 for( var i = 0; i < currentNumberPages; i++ ) {
123 var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
124 $pager.html(i+1);
125
126 $pager.click(function(){
127 var page = $(this).eq(0).attr(pageAttribute);
128 goToPage(page);
129 });
130 $pager.appendTo($isotopePager);
131 }
132 }
133 $container.after($isotopePager);
134 }();
135 }
136 27
137 setPagination(); 28 // filter with selects and checkboxes
138 goToPage(1); 29 var $checkboxes = $('.category-filter input');
30 var filterValue;
139 31
140 //event handlers 32 $checkboxes.change( function() {
141 $checkboxes.change(function(){ 33 // map input values to an array
142 var filter = $(this).attr(filterAttribute); 34 var inclusives = [];
143 currentFilter = filter; 35 // inclusive filters from checkboxes
144 setPagination(); 36 $checkboxes.each( function( i, elem ) {
145 goToPage(1); 37 // if checkbox, use value if checked
38 if ( elem.checked ) {
39 inclusives.push( elem.value );
40 }
41 });
42
43 // combine inclusive filters
44 filterValue = inclusives.length ? inclusives.join(', ') : '';
45 $('#resources').DataTable().column(2).search(filterValue).draw();
46 });
47
48 // filter with selects and checkboxes
49 var $typecheckboxes = $('.category-type input');
50 var typeFilterValue;
51
52 $typecheckboxes.change( function() {
53 // map input values to an array
54 var inclusives = [];
55 // inclusive filters from checkboxes
56 $typecheckboxes.each( function( i, elem ) {
57 // if checkbox, use value if checked
58 if ( elem.checked ) {
59 inclusives.push( elem.value );
60 }
61 });
62
63 // combine inclusive filters
64 typeFilterValue = inclusives.length ? inclusives.join(', ') : '';
65 $('#resources').DataTable().column(0).search(typeFilterValue).draw();
146 }); 66 });
147 67
148 $('#clear-filters').click(function(){clearAll()});
149 68
150
151 $('.sort-button-group').on( 'click', 'button', function() { 69 $('.sort-button-group').on( 'click', 'button', function() {
152 var sortValue = $(this).attr('data-sort-value'); 70 var sortValue = $(this).attr('data-sort-value');
153 var direction = $(this).attr('data-sort-direction'); 71 var direction = $(this).attr('data-sort-direction');
154 var isAscending = (direction == 'asc'); 72 var isAscending = (direction == 'asc');
155 var newDirection = (isAscending) ? 'desc' : 'asc'; 73 var newDirection = (isAscending) ? 'desc' : 'asc';
156 $container.isotope({ sortBy: sortValue, sortAscending: isAscending }); 74 console.log(sortValue);
75 console.log(isAscending);
157 $(this).attr('data-sort-direction', newDirection); 76 $(this).attr('data-sort-direction', newDirection);
158 var span = $(this).find('.glyphicon'); 77 var span = $(this).find('.glyphicon');
159 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down'); 78 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
160 setPagination(); 79 myTable.order([sortValue, newDirection]).draw();
161 goToPage(1);
162 }); 80 });
163 81
164 82
83
165 $(document).on("click", "#filter-more", function(e) { 84 $(document).on("click", "#filter-more", function(e) {
166 e.preventDefault(); 85 e.preventDefault();
167 $('.filter-group').toggleClass('open'); 86 $('.filter-group').toggleClass('open');
...@@ -169,6 +88,4 @@ jQuery( document ).ready(function($) { ...@@ -169,6 +88,4 @@ jQuery( document ).ready(function($) {
169 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down'); 88 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
170 }); 89 });
171 90
172
173
174 }); 91 });
...\ No newline at end of file ...\ No newline at end of file
......
1 import jQuery from 'jquery'; 1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget'; 2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout"; 3 import Isotope from "isotope-layout";
4 import DataTable from 'datatables.net-bs5';
4 5
5 jQueryBridget( 'isotope', Isotope, $ ); 6 jQueryBridget( 'isotope', Isotope, $ );
6 7
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
16 @import "theme/sharethis"; 16 @import "theme/sharethis";
17 @import "theme/course_list"; 17 @import "theme/course_list";
18 @import "theme/course"; 18 @import "theme/course";
19 @import "theme/resources_list";
19 20
20 21
21 @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes. 22 @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
......
...@@ -48,6 +48,7 @@ label[for=quicksearch]{ ...@@ -48,6 +48,7 @@ label[for=quicksearch]{
48 display:flex; 48 display:flex;
49 flex-direction: row ; 49 flex-direction: row ;
50 } 50 }
51 .category-type,
51 .category-filter{ 52 .category-filter{
52 display:flex; 53 display:flex;
53 flex-direction: row ; 54 flex-direction: row ;
......
1 #dataTables_length,
2 #resources_filter,
3 #resources_length{
4 display: none !important;
5 visibility: hidden !important;
6 }
7
8 th.hidden,
9 td.hidden{
10 display: none !important;
11 visibility: hidden !important;
12 }
...\ No newline at end of file ...\ No newline at end of file