Javascript generated table sorting
-
03-03-2021 - |
質問
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...
解決
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
他のヒント
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.