Javascript generated table sorting

StackOverflow https://stackoverflow.com/questions/8170010

  •  03-03-2021
  •  | 
  •  

Question

I wrote a JS code that generates a table and plugs it into a div on my page. I would like to use the sort table plugin from here. here is the code I have until now:

  TableHtml = ''
  TableHtml += '<div id="table_wrapper" class="scrollable"><table style="width:900px" id="mytable" class="sortable tabular">'
  TableHtml += '<thead><tr>'
  TableHtml += '<th class="labels"><span class="nowrap">Date</span></th>'
  TableHtml += '<th class="labels"><span class="nowrap">Client</span></th>'
  TableHtml += '<th class="labels"><span class="nowrap">Pass</span></th>'
  TableHtml += '<th class="labels"><span class="nowrap">Objet</span></th>'
  TableHtml += '<th class="labels"><span class="nowrap">Panne</span></th>'
  TableHtml += '<th class="labels"><span class="nowrap">Cause</span></th>'
  TableHtml += '<th><div id="headerbg"><span class="nowrap">Action</span></div></th>'
  TableHtml += '<TH class="sorttable_nosort scrollbarCol"></TH>'
  TableHtml += '</tr></thead><tbody>'

  var trclass = '';
  var d=0               
  if(!rsDetail.bof) {
    rsDetail.MoveFirst()
    while(!rsDetail.eof) {
      detAvis  = rsDetail.fields(0).value;
      detDate = rsDetail.fields(2).value;
      detClient = rsDetail.fields(4).value
      detPass = rsDetail.fields(5).value
      detObjet = rsDetail.fields(9).value
      detPanne = rsDetail.fields(10).value
      detCause = rsDetail.fields(11).value
      detAction = rsDetail.fields(12).value

        //filling up he rows
      if (d%2){
      trclass='d1'
      }
      else{
      trclass='d2'
      }
      TableHtml += '<tr id="' + detAvis + '" class="' + trclass + '" onclick="Select(' + detAvis + '); showDetails(' + detAvis + ');">'
      TableHtml += '<td class="td1">' + detDate + '</td>'
      TableHtml += '<td class="td2">' + detClient + '</td>'
      TableHtml += '<td class="td3">' + detPass + '</td>'
      TableHtml += '<td class="td4">' + detObjet + '</td>'
      TableHtml += '<td class="td5">' + detPanne + '</td>'
      TableHtml += '<td class="td6">' + detCause + '</td>'
      TableHtml += '<td class="td7">' + detAction + '</td>'
      TableHtml += '</tr>'        
      d++
      rsDetail.MoveNext()
    }
  }   
  TableHtml += '</tbody></table></div>'

  rsDetail.close()
  document.getElementById('DetailTable').innerHTML = TableHtml;

and my reference in the head:

<script type="text/javascript" src="js/sorttable.js"></script>

the reference is from here.

The table is scrollabale but somehow stays unsortable. Any idea what the problem might be?
I have tried attributing the sortable class to another table that is not JS generated on the same page and it works...

Was it helpful?

Solution

you need to call the makeSortable:

sorttable.makeSortable(document.getElementById('mytable'));

see the comment here form scott W (search for makeSortable): http://www.kryogenix.org/days/2007/04/07/sorttable-v2-making-your-tables-even-more-sortable

and here also mentions makeSortable: http://www.kryogenix.org/bugs/sorttable/ajax-tables.html

OTHER TIPS

It's probably because the sorttable.js is linked/executed before you table is inserted. you can try loading the js file on document ready or using jquery.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top