Sort table with unknown number of headers using jQuery Table Sort, then only sort on 2 headers

Question

The Scenario

I have a table on a web page that is dynamically generated using JSP. The number of columns/headers is variable (could be 6 or up to 40+). I'm using jQuery Tablesorter to sort the table. The table should only sort on header elements 5 and 6 for the moment.

The Question

Using Tablesorter allows you to set certain header elements to false, disabling them from the sort options. Since the number of headers is variable I need a way of inverting the options so that I can set the sorter option to true and the rest are disabled by default. Either that, or I need a way to get the total number of header elements and run through a loop to set them to false.

The syntax is a little tricky for me as I'm not sure how to loop through the following:

$(document).ready(function() { 
        $("table").tablesorter({ 
            headers: { 
                0: { 
                    sorter: false 
                }, 
                1: { 
                    sorter: false 
                } 
                .
                .
                .
            } 
        }); 
    });

So the only two I want to sort on in this example are "Primary Disease" and "Risk Index".

The Code

Another small problem is that I have a row that needs to appear above the table header. It's basically a higher level of heading for the table information. Here's a fiddle with my 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 - all
          </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: So the header "Patient List - All" and "Clinical Adherence Information" are headers 0 and 1. So the headers "Primary Disease" and "Risk Level" are actually 5 and 6.

EDIT2: Needs to work with IE8+.

position of the "Primary Disease" and "Risk Index" always same or have to find them first? — charlietfl
– charlietfl, Commented Mar 6, 2012 at 21:30
Great question. Should always be in position 2 and 3. The patient list won't change unless there's a major code change. Thanks! — PREEB
– PREEB, Commented Mar 6, 2012 at 21:33
Actually need a better definition of rules you want...is still a bit loose — charlietfl
– charlietfl, Commented Mar 6, 2012 at 21:34
I guess this requires even more clarification because there are two headers above the main list of headers. I'll make an edit in the question. — PREEB
– PREEB, Commented Mar 6, 2012 at 21:37

Mottie · Accepted Answer · 2012-06-03 01:17:57Z

5

Maybe it would be easier if you tried out my fork of tablesorter on github, which allows you to apply class names to the header to disable the sort. Then all you need to do is something like this:

$('table thead th')
  .addClass('sorter-false')
  .filter(':eq(2), :eq(3)').removeClass('sorter-false');

Ok, try this method (demo):

var headers = {},
    $table = $('#myTable'), i,
    l = $table.find('thead th').length,

    // columns 0 and 1 are the top row "Patient List - all"
    // and "Clinical Adherence Information"
    sortcolumns = [2, 3, 4, 5];

// build headers object; based on sortcolumn selections
for (i = 0; i < l; i++) {
    if ($.inArray(i, sortcolumns) < 0) {
        headers[i] = {
            sorter: false
        }
    }
}
$table.tablesorter({
    widgets: ['zebra'],
    headers: headers // headers object built above
});

edited Jun 3, 2012 at 1:17

answered Mar 6, 2012 at 21:34

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PREEB Over a year ago

No offense to your skills or anything, but I'd prefer to not use a forked version of the code. This is for a major corporation that needs to rely on this code for a long time.

Mottie Over a year ago

Oops, sorry indexOf() doesn't exist in IE8... so instead use jQuery's $.inArray() like this: $.inArray(i, sortcolumns) < 0. I'll update the code & demo above.

Collectives™ on Stack Overflow

Sort table with unknown number of headers using jQuery Table Sort, then only sort on 2 headers

The Scenario

The Question

The Code

CSS

jQuery

HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Scenario

The Question

The Code

CSS

jQuery

HTML

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related