html - Sort table with unknown number of headers using jQuery Table Sort, then only sort on 2 headers -
the scenario
i have table on web page dynamically generated using jsp. number of columns/headers variable (could 6 or 40+). i'm using jquery tablesorter sort table. table should sort on header elements 5 , 6 moment.
the question
using tablesorter allows set header elements false, disabling them sort options. since number of headers variable need way of inverting options can set sorter option true , rest disabled default. either that, or need way total number of header elements , run through loop set them false.
the syntax little tricky me i'm not sure how loop through following:
$(document).ready(function() { $("table").tablesorter({ headers: { 0: { sorter: false }, 1: { sorter: false } . . . } }); }); so 2 want sort on in example "primary disease" , "risk index".
the code
another small problem have row needs appear above table header. it's higher level of heading table information. here's fiddle code.
css
th.headersortup { background-image: url(../img/small_asc.gif); background-color: #3399ff; } th.headersortdown { background-image: url(../img/small_desc.gif); background-color: #3399ff; } th.header { background-image: url(../img/small.gif); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; } jquery
$(document).ready(function() { $("#mytable").tablesorter({ headers: { 2: { sorter: true }, 3: { sorter: true } } }); }); html
<table border="3" cellspacing="2" cellpadding="3" valign="top" id="mytable" class="tablesorter"> <thead> <tr> <th class="stopgapth" colspan="4"> patient list - </th> <th class="stopgapth" colspan="99"> clinical adherence information </th> </tr> <tr height="30"> <th width="10%" align="middle"> patient name </th> <th width="5%" align="middle"> dob </th> <th width="5%" align="middle"> primary disease </th> <th width="5%" align="middle"> risk index </th> <th class="stopgapconditionheader" align="middle"> <a href="">asthma</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">bipolar disorder</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">chronic kidney disease</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">chronic obstructive pulmonary disease</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">coronary artery disease</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">depression</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">diabetes</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">dyslipidemia</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">heart failure</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">hypertension</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">peripheral vascular disease</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">schizophrenia</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">seizure disorder</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">transient ischemic attack</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">preventive care</a> </th> <th class="stopgapconditionheader" align="middle"> <a href="">wellness</a> </th> </tr> </thead> <tbody> <tr class="stopgaprow"> <td> louis armstrong </td> <td> 02/01/1987 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 80% </td> <td class="stopgapcondition red"> 42% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 90% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition red"> 16% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition notapplicable"> n/a </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 40% </td> <td class="stopgapcondition yellow"> 50% </td> </tr> <tr class="stopgaprow"> <td> bob barker </td> <td> 10/10/1951 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 80% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 75% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 77% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 33% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 50% </td> </tr> <tr class="stopgaprow"> <td> david brinkley </td> <td> 10/10/1951 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 80% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 16% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 70% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 42% </td> <td class="stopgapcondition red"> 40% </td> </tr> <tr class="stopgaprow"> <td> tom brokaw </td> <td> 10/10/1954 </td> <td> na </td> <td> na </td> <td class="stopgapcondition red"> 40% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 85% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 70% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 57% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition notapplicable"> n/a </td> <td class="stopgapcondition yellow"> 71% </td> <td class="stopgapcondition red"> 40% </td> </tr> <tr class="stopgaprow"> <td> cad2 sandy </td> <td> 01/01/1955 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 75% </td> <td class="stopgapcondition yellow"> 62% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 63% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 60% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition notapplicable"> n/a </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 60% </td> <td class="stopgapcondition yellow"> 66% </td> </tr> <tr class="stopgaprow"> <td> cad3 sandy </td> <td> 01/01/1955 </td> <td> na </td> <td> na </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 60% </td> <td class="stopgapcondition yellow"> 75% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 63% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 57% </td> <td class="stopgapcondition yellow"> 50% </td> </tr> <tr class="stopgaprow"> <td> cad4 sandy </td> <td> 01/01/1955 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition red"> 33% </td> <td class="stopgapcondition red"> 37% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 63% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition notapplicable"> n/a </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 80% </td> <td class="stopgapcondition yellow"> 83% </td> </tr> <tr class="stopgaprow"> <td> cad5 sandy </td> <td> 01/01/1955 </td> <td> na </td> <td> na </td> <td class="stopgapcondition red"> 40% </td> <td class="stopgapcondition red"> 33% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 75% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 63% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 85% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 14% </td> <td class="stopgapcondition yellow"> 50% </td> </tr> <tr class="stopgaprow"> <td> alex trebek </td> <td> 10/10/1951 </td> <td> na </td> <td> na </td> <td class="stopgapcondition red"> 33% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 16% </td> <td class="stopgapcondition yellow"> 75% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 63% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 33% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 80% </td> <td class="stopgapcondition red"> 40% </td> </tr> <tr class="stopgaprow"> <td> chucka woolerya </td> <td> 10/15/1951 </td> <td> na </td> <td> na </td> <td class="stopgapcondition yellow"> 83% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition yellow"> 66% </td> <td class="stopgapcondition red"> 42% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 54% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 71% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition green"> 100% </td> <td class="stopgapcondition red"> 0% </td> <td class="stopgapcondition yellow"> 50% </td> <td class="stopgapcondition yellow"> 50% </td> </tr> </tbody> </table> edit: header "patient list - all" , "clinical adherence information" headers 0 , 1. headers "primary disease" , "risk level" 5 , 6.
edit2: needs work ie8+.
maybe easier if tried out fork of tablesorter on github, allows apply class names header disable sort. need this:
$('table thead th') .addclass('sorter-false') .filter(':eq(2), :eq(3)').removeclass('sorter-false'); ok, try method (demo):
var headers = {}, $table = $('#mytable'), i, l = $table.find('thead th').length, // columns 0 , 1 top row "patient list - all" // , "clinical adherence information" sortcolumns = [2, 3, 4, 5]; // build headers object; based on sortcolumn selections (i = 0; < l; i++) { if ($.inarray(i, sortcolumns) < 0) { headers[i] = { sorter: false } } } $table.tablesorter({ widgets: ['zebra'], headers: headers // headers object built above }); 
Comments
Post a Comment