HTML table sort

Question

So basically I am running a mysql query that fetches data from my database and displays it in an easy to read layout for my users   Name-----Address----Sales Person   You get the gist  And now I want to let the user sort the html table by let s say sales person  How would I easily do that using a drop down menu    x000D   x000D   lt div class  menu  gt  x000D     lt ul gt  x000D       lt li gt  lt a href     gt  lt span gt Sales Person lt  span gt  lt  a gt  x000D         lt ul gt  x000D           lt li gt  lt a href     gt  lt span gt Melissa lt  span gt  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  lt span gt Justin lt  span gt  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  lt span gt Judy lt  span gt  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  lt span gt Skipper lt  span gt  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  lt span gt Alex lt  span gt  lt  a gt  lt  li gt  x000D         lt  ul gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

Check if you could go with any of the below mentioned JQuery plugins. Simply awesome and provide wide range of options to work through, and less pains to integrate. :)

https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Data tables.
https://github.com/tonytomov/jqGrid

If not, you need to have a link to those table headers that calls a server-side script to invoke the sort.

User · Answer

Here is another library  Changes required are -   Add sorttable js  Add class name sortable to table        Click the table headers to sort the table accordingly   x000D   x000D   lt script src  https   www kryogenix org code browser sorttable sorttable js  gt  lt  script gt    lt table class  sortable  gt     lt tr gt       lt th gt Name lt  th gt       lt th gt Address lt  th gt       lt th gt Sales Person lt  th gt     lt  tr gt      lt tr class  item  gt       lt td gt user 0001 lt  td gt       lt td gt UK lt  td gt       lt td gt Melissa lt  td gt     lt  tr gt     lt tr class  item  gt       lt td gt user 0002 lt  td gt       lt td gt France lt  td gt       lt td gt Justin lt  td gt     lt  tr gt     lt tr class  item  gt       lt td gt user 0003 lt  td gt       lt td gt San Francisco lt  td gt       lt td gt Judy lt  td gt     lt  tr gt     lt tr class  item  gt       lt td gt user 0004 lt  td gt       lt td gt Canada lt  td gt       lt td gt Skipper lt  td gt     lt  tr gt     lt tr class  item  gt       lt td gt user 0005 lt  td gt       lt td gt Christchurch lt  td gt       lt td gt Alex lt  td gt     lt  tr gt    lt  table gt  x000D   x000D   x000D

User · Answer

Another approach to sort HTML table   based on W3 JS HTML Sort    x000D   x000D  let tid     usersTable   x000D  let headers   document querySelectorAll tid     th    x000D   x000D     Sort the table element when clicking on the table headers x000D  headers forEach function element  i    x000D    element addEventListener  click   function     x000D      w3 sortHTML tid    item    td nth-child      i   1          x000D        x000D      x000D  th   x000D    cursor  pointer  x000D    background-color  coral  x000D    x000D   lt script src  https   www w3schools com lib w3 js  gt  lt  script gt  x000D   lt link href  https   www w3schools com w3css 4 w3 css  rel  stylesheet    gt  x000D   lt p gt Click the  lt strong gt table headers lt  strong gt  to sort the table accordingly  lt  p gt  x000D   x000D   lt table id  usersTable  class  w3-table-all  gt  x000D     lt  --      x000D     lt tr gt  x000D       lt th onclick  w3 sortHTML   usersTable     item    td nth-child 1     gt Name lt  th gt  x000D       lt th onclick  w3 sortHTML   usersTable     item    td nth-child 2     gt Address lt  th gt  x000D       lt th onclick  w3 sortHTML   usersTable     item    td nth-child 3     gt Sales Person lt  th gt  x000D     lt  tr gt   x000D    -- gt  x000D     lt tr gt  x000D       lt th gt Name lt  th gt  x000D       lt th gt Address lt  th gt  x000D       lt th gt Sales Person lt  th gt  x000D     lt  tr gt  x000D   x000D     lt tr class  item  gt  x000D       lt td gt user 2911002 lt  td gt  x000D       lt td gt UK lt  td gt  x000D       lt td gt Melissa lt  td gt  x000D     lt  tr gt  x000D     lt tr class  item  gt  x000D       lt td gt user 2201002 lt  td gt  x000D       lt td gt France lt  td gt  x000D       lt td gt Justin lt  td gt  x000D     lt  tr gt  x000D     lt tr class  item  gt  x000D       lt td gt user 2901092 lt  td gt  x000D       lt td gt San Francisco lt  td gt  x000D       lt td gt Judy lt  td gt  x000D     lt  tr gt  x000D     lt tr class  item  gt  x000D       lt td gt user 2801002 lt  td gt  x000D       lt td gt Canada lt  td gt  x000D       lt td gt Skipper lt  td gt  x000D     lt  tr gt  x000D     lt tr class  item  gt  x000D       lt td gt user 2901009 lt  td gt  x000D       lt td gt Christchurch lt  td gt  x000D       lt td gt Alex lt  td gt  x000D     lt  tr gt  x000D   x000D   lt  table gt  x000D   x000D   x000D

User · Answer

The way I have sorted HTML tables in the browser uses plain  unadorned Javascript    The basic process is     add a click handler to each table header the click handler notes the index of the column to be sorted the table is converted to an array of arrays  rows and cells  that array is sorted using javascript sort function the data from the sorted array is inserted back into the HTML table   The table should  of course  be nice HTML  Something like this       lt table gt    lt thead gt     lt tr gt  lt th gt Name lt  th gt  lt th gt Age lt  th gt  lt  tr gt    lt  thead gt    lt tbody gt     lt tr gt  lt td gt Sioned lt  td gt  lt td gt 62 lt  td gt  lt  tr gt     lt tr gt  lt td gt Dylan lt  td gt  lt td gt 37 lt  td gt  lt  tr gt       etc      lt  tbody gt   lt  table gt    So  first adding the click handlers     const table   document querySelector  table      get the table to be sorted  table querySelectorAll  th      get all the table header elements    forEach  element  columnNo   gt      add a click handler for each      element addEventListener  click   event   gt            sortTable table  columnNo     call a function which sorts the table by a given column number               This won t work right now because the sortTable function which is called in the event handler doesn t exist    Lets write it     function sortTable table  sortColumn        get the data from the table cells   const tableBody   table querySelector  tbody     const tableData   table2data tableBody        sort the extracted data   tableData sort  a  b   gt       if a sortColumn   gt  b sortColumn          return 1            return -1            put the sorted data back into the table   data2table tableBody  tableData       So now we get to the meat of the problem  we need to make the functions table2data to get data out of the table  and data2table to put it back in once sorted   Here they are         this function gets data from the rows and cells     within an html tbody element function table2data tableBody     const tableData          create the array that ll hold the data rows   tableBody querySelectorAll  tr        forEach row  gt       for each table row          const rowData           make an array for that row       row querySelectorAll  td       for each cell in that row          forEach cell  gt             rowData push cell innerText       add it to the row data                  tableData push rowData       add the full row to the table data            return tableData        this function puts data into an html tbody element function data2table tableBody  tableData     tableBody querySelectorAll  tr      for each table row         forEach  row  i   gt           const rowData   tableData i      get the array for the row data       row querySelectorAll  td       for each table cell              forEach  cell  j   gt             cell innerText   rowData j      put the appropriate array element into the cell                  tableData push rowData               And that should do it   A couple of things that you may wish to add  or reasons why you may wish to use an off the shelf solution   An option to change the direction and type of sort i e  you may wish to sort some columns numerically   10   gt   2  is false because they re strings  probably not what you want   The ability to mark a column as sorted  Some kind of data validation

User · Answer

Flexbox-based tables can easily be sorted by using flexbox property  order     Here s an example    x000D   x000D  function sortTable     x000D    let table   document querySelector   table   x000D    let children       table children  x000D    let sortedArr   children map e   gt  e innerText  sort  a  b    gt  a localeCompare b    x000D   x000D    children forEach child   gt    x000D      child style order   sortedArr indexOf child innerText  x000D       x000D    x000D   x000D  document querySelector   sort   addEventListener  click   sortTable  x000D   table   x000D    display  flex  x000D    flex-direction  column x000D    x000D   lt div id  table  gt  x000D     lt div gt Melissa lt  div gt  x000D     lt div gt Justin lt  div gt  x000D     lt div gt Judy lt  div gt  x000D     lt div gt Skipper lt  div gt  x000D     lt div gt Alex lt  div gt  x000D   lt  div gt  x000D   lt button id  sort  gt  sort  lt  button gt  x000D   x000D   x000D    Explanation  The sortTable function extracts the data of the table into an array  which is then sorted in alphabetic order  After that we loop through the table items and assign the CSS property order equal to index of an item s data in our sorted array

[html] HTML table sort

Examples related to html

Examples related to sorting