Javascript Table sorting

Question

I Have a table containing popular animals in Scotland in HTML and I need to have a way of letting the user search through the table.

<table>
  <tr>
    <th id = "TableID">AnimalID</th>
    <th id = "Name">AnimalName</th>
    <th id = "Category">Category</th>
    <th id = "BestPlaceToSee">BestPlaceToSee</th>
  </tr>

  <tr>
    <td id = "TableID">1</td>
    <td id = "Name">Otter</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Freshwater habitats throughout Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">2</td>
    <td id = "Name">Bluenosed dolphin</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Seen around the coasts of Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">3</td>
    <td id = "Name">Habour seal</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Along the West Coast, the Hebrides, Orkney and Shetland</td>
  </tr>

  <tr>
    <td id = "TableID">4</td>
    <td id = "Name">Minke whale</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Waters between Mull and Ardnamurchan</td>
  </tr>

  <tr>
    <td id = "TableID">5</td>
    <td id = "Name">Pine marten</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Woodland along the West Coast</td>
  </tr>

  <tr>
    <td id = "TableID">6</td>
    <td id = "Name">Red deer</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Upland forests and moorlands throughout Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">7</td>
    <td id = "Name">Red squirrel</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Upland forests and moorlands throughout Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">8</td>
    <td id = "Name">Wildcat</td>
    <td id = "Category">Mammal</td>
    <td id = "BestPlaceToSee">Aberdeenshire, Moray and the Highland region</td>
  </tr>

  <tr>
    <td id = "TableID">9</td>
    <td id = "Name">Osprey</td>
    <td id = "Category">Bird of prey</td>
    <td id = "BestPlaceToSee">Highlands and the Borders</td>
  </tr>

  <tr>
    <td id = "TableID">10</td>
    <td id = "Name">Peregrine falcon</td>
    <td id = "Category">Bird of prey</td>
    <td id = "BestPlaceToSee">Throughout Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">11</td>
    <td id = "Name">Red kite</td>
    <td id = "Category">Bird of prey</td>
    <td id = "BestPlaceToSee">Black Isle, the Trossachs and Dumfries and Galloway</td>
  </tr>

  <tr>
    <td id = "TableID">12</td>
    <td id = "Name">Golden eagle</td>
    <td id = "Category">Bird of prey</td>
    <td id = "BestPlaceToSee">Isle of Mull</td>
  </tr>

  <tr>
    <td id = "TableID">13</td>
    <td id = "Name">Puffin</td>
    <td id = "Category">Sea bird</td>
    <td id = "BestPlaceToSee">Around the coasts of Scotland from Galloway to Wick and St Kilda</td>
  </tr>

  <tr>
    <td id = "TableID">14</td>
    <td id = "Name">Gannet</td>
    <td id = "Category">Sea bird</td>
    <td id = "BestPlaceToSee">Bass Rock, Ailsa Craig and St Kilda</td>
  </tr>

  <tr>
    <td id = "TableID">15</td>
    <td id = "Name">Guilliemot</td>
    <td id = "Category">Sea bird</td>
    <td id = "BestPlaceToSee">Orkney, Shetland and Sound of Harris</td>
  </tr>

  <tr>
    <td id = "TableID">16</td>
    <td id = "Name">Capercaillie</td>
    <td id = "Category">Inland bird</td>
    <td id = "BestPlaceToSee">Pinewoods around the Cairngorm mountains</td>
  </tr>

  <tr>
    <td id = "TableID">17</td>
    <td id = "Name">Chough</td>
    <td id = "Category">Inland bird</td>
    <td id = "BestPlaceToSee">Islay</td>
  </tr>

  <tr>
    <td id = "TableID">18</td>
    <td id = "Name">Ptarmigan</td>
    <td id = "Category">Inland bird</td>
    <td id = "BestPlaceToSee">Mountains in Cairngorms, Ben Nevis and Wester Ross </td>
  </tr>

  <tr>
    <td id = "TableID">19</td>
    <td id = "Name">Red grouse</td>
    <td id = "Category">Inland bird</td>
    <td id = "BestPlaceToSee">Heather moorlands throughout Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">20</td>
    <td id = "Name">Dotterel</td>
    <td id = "Category">Wading and Ground Nesting Bird</td>
    <td id = "BestPlaceToSee">High plateaus in the Highlands</td>
  </tr>

  <tr>
    <td id = "TableID">21</td>
    <td id = "Name">Oystercatcher</td>
    <td id = "Category">Wading and Ground Nesting Bird</td>
    <td id = "BestPlaceToSee">Coastal beaches and beside rocky coves</td>
  </tr>

  <tr>
    <td id = "TableID">22</td>
    <td id = "Name">Red-necked phalarope</td>
    <td id = "Category">Wading and Ground Nesting Bird</td>
    <td>Western and Northern Isles of Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">23</td>
    <td id = "Name">Red-throated diver</td>
    <td id = "Category">Wading and Ground Nesting Bird</td>
    <td id = "BestPlaceToSee">Shetland, Orkney, and the Outer Hebrides </td>
  </tr>

  <tr>
    <td id = "TableID">24</td>
    <td id = "Name">Atlantic salmon</td>
    <td id = "Category">Fish</td>
    <td id = "BestPlaceToSee">Freshwater streams and rivers of Scotland</td>
  </tr>

  <tr>
    <td id = "TableID">25</td>
    <td id = "Name">Basking shark</td>
    <td id = "Category">Fish</td>
    <td id = "BestPlaceToSee">Along the West Coast of Scotland</td>
  </tr>
</table>

And I know to use this tag

input type="text" id="search" placeholder="Type to search"

Yet I do not know the JavaScript behind sorting my table.

Not an answer but a comment on your table structure - you have multiple examples of identical Id's. This will cause issues. You need to have a single unique Id for each table element, or use a class for those elements that are related. — gavgrif
– gavgrif, Commented Mar 24, 2016 at 11:39
Use one of the jquery table sorter plugins. Unless this is homework. This isn't homework is it? — Emery Lapinski
– Emery Lapinski, Commented Mar 24, 2016 at 12:16

davide andreazzini · Accepted Answer · 2016-03-24 11:56:14Z

You need to create a data structure of your table, then you can apply the algorithms that you want and than you can render the table.

var animals = [{
  id:6,name:'cat'
},{
  id:4,name:'dog'
},{
  id:5,name:'mouse'
},{
  id:6,name:'smurf'
}]

var table = document.getElementById('myTable');


function renderTable(animals){
  table.innerHTML = '';
  animals.forEach(function(animal){
  table.innerHTML += "<tr><td>"+ 
                         animal.id+
                     "</td><td>"+
                         animal.name+
                     "</td></tr>  "
})  
}

function sortDesc(){

  renderTable(  
    animals.sort(function(a,b){  
      return a.id<b.id;
    })
  )
}

function sortAsc(){

  renderTable(  
    animals.sort(function(a,b){  
      return a.id>b.id;
    })
  )
}

renderTable(animals)

html

<table id='myTable'></table>
<button onclick="sortDesc()">sort desc</button>
<button onclick="sortAsc()">sort asc</button>

Collectives™ on Stack Overflow

Javascript Table sorting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related