Sort Topics System

Page 2 of 2 Previous  1, 2

Go down

Do you agree with allowing our members to sort topics?

Sort Topics System - Page 2 Left1197%Sort Topics System - Page 2 Right11 97% 
[ 34 ]
Sort Topics System - Page 2 Left113%Sort Topics System - Page 2 Right11 3% 
[ 1 ]
 
Total Votes : 35

Sort Topics System - Page 2 Empty Sort Topics System

Post by Guest on August 15th 2010, 6:32 pm

First topic message reminder :

I think it would be an extremely helpful addition to our forums by allowing our members to sort the topics in each forum.
For example, there would be 2 mini-icon arrows in the column next to where it says 'Topics', one pointing UP Sort Topics System - Page 2 Arrows_up1 and the other pointing DOWN Sort Topics System - Page 2 Down_arrow (An icon we can choose in our mini-icons 'Pics Management').

This would allow members to ascend (A-Z) or descend (Z-A) in alphabetical order, on the fly.
It would also be cool if they can sort each other forum column, such as 'Replies', 'Views', 'Last Post', 'Author', etc... in a alphabetical/numerical order.

Example Chart:

Topics Sort Topics System - Page 2 Arrows_up1Sort Topics System - Page 2 Down_arrow Replies Sort Topics System - Page 2 Arrows_up1Sort Topics System - Page 2 Down_arrow Views Sort Topics System - Page 2 Arrows_up1Sort Topics System - Page 2 Down_arrow Last Post Sort Topics System - Page 2 Arrows_up1Sort Topics System - Page 2 Down_arrow
Topic A
20
60
User 1
Topic B
50
200
User 2
Topic C
15
30
User 3
Topic D
70
150
User 4

Also as an additional alternative, we can have a drop down menu below
the forum that says "sort by.." and we click our sorting options from
the drop down menu.

Example:
Sort Topics System - Page 2 SortForumsDropDownMenuExample
What do you all think of this idea? Please give feedback and vote! Sort Topics System - Page 2 Icon_thumleft


Last edited by SPADEZ on August 26th 2010, 11:49 pm; edited 2 times in total
avatar
Guest
Guest


Back to top Go down


Sort Topics System - Page 2 Empty Re: Sort Topics System

Post by SarkZKalie on June 2nd 2018, 7:42 am

You must modify your topics_list_box template following 2 steps below :

1) Add this to the last line
Code:
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;     
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

2) Search and replace this first <table> tag
Code:
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
by
Code:
   <table cellspacing="0" class="table" id="myTable">
      <thead>
         <tr>
            <th class="tcl" onclick="sortTable(0)">{L_TOPICS}</th>
            <th class="tc2" onclick="sortTable(1)">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3" onclick="sortTable(2)">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr"onclick="sortTable(3)">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
2.1) Addtional
- Add this to your CSS
Code:
#myTable thead tr th:hover:after {
    content: "▲";
    opacity: 1;
    margin-left: 3px;
    transition: 300ms;
}

#myTable thead tr th:after {
    opacity: 0.2;
}
3 ) Save & Publish.
4) Live Demo : visit my page site (click on the title to sort)

This tutorial is apply for Punbb, so if you wanna install this on your site feel free to ask yours here.
Source : W3School dot Com
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1110
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

Sort Topics System - Page 2 Empty Re: Sort Topics System

Post by zims on June 2nd 2018, 3:50 pm

@SarkZKalie wrote:You must modify your topics_list_box template following 2 steps below :

1) Add this to the last line
Code:
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;     
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

2) Search and replace this first <table> tag
Code:
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
by
Code:
   <table cellspacing="0" class="table" id="myTable">
      <thead>
         <tr>
            <th class="tcl" onclick="sortTable(0)">{L_TOPICS}</th>
            <th class="tc2" onclick="sortTable(1)">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3" onclick="sortTable(2)">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr"onclick="sortTable(3)">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
2.1) Addtional
- Add this to your CSS
Code:
#myTable thead tr th:hover:after {
    content: "▲";
    opacity: 1;
    margin-left: 3px;
    transition: 300ms;
}

#myTable thead tr th:after {
    opacity: 0.2;
}
3 ) Save & Publish.
4) Live Demo : visit my page site (click on the title to sort)

This tutorial is apply for Punbb, so if you wanna install this on your site feel free to ask yours here.
Source : W3School dot Com

I will need to apply to ModernBB, and I also like to know that if this code will work if the topics list over for a page long?
(like if I have 100++ topics, the topics show in a page is only 50 topics, will this sort code still work if the most viewed topics is in the second page but not the first page in default.)
zims
zims
Forumember

Posts : 32
Reputation : 2
Language : 繁體中文

http://testing123.forumotion.asia/

Back to top Go down

Sort Topics System - Page 2 Empty Re: Sort Topics System

Post by SarkZKalie on June 2nd 2018, 7:49 pm

@zims i'm not sure about that but in my case, they're only over 15 posts (max 50 per page).

ModernBB has a template structure different to the others, i mean it using dl dd and dt, instead of a table with thead tbody inside.
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1110
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

Sort Topics System - Page 2 Empty Re: Sort Topics System

Post by SLGray on June 2nd 2018, 9:38 pm

If you want to share this, please post this here:  https://help.forumotion.com/f37-community-coding-and-analysis-zone .


Sort Topics System - Page 2 Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46780
Reputation : 3278
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Sort Topics System - Page 2 Empty Re: Sort Topics System

Post by SLGray on April 4th 2019, 11:37 pm

This feature is part of Forumotion Clubs:  https://forumsclub.com/


Sort Topics System - Page 2 Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46780
Reputation : 3278
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Page 2 of 2 Previous  1, 2

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum