排序表數目不詳的使用jQuery表進行排序，然後只排序2頭

場景

我有一個使用JSP動態生成的網頁上的表頭。列/標題的數量是可變的（可以是6或多達40+）。我正在使用jQuery Tablesorter對錶格進行排序。該表應該只對頭部元素5和6進行排序。排序表數目不詳的使用jQuery表進行排序，然後只排序2頭

問題

使用的tablesorter讓你set certain header elements to false，從排序選項禁用它們。由於標題的數量是可變的，我需要一種反轉選項的方式，以便我可以將sorter選項設置爲true，其他選項默認爲禁用。或者，或者我需要一種方法來獲取標題元素的總數，並通過循環運行以將它們設置爲false。

的語法是對我來說有點棘手，因爲我不知道如何通過下面的循環：

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

所以只有兩個我想在這個例子來排序是「主疾病「和」風險指數「。

守則

另一個小問題是，我有一排需要出現表頭的上方。這基本上是表格信息的更高級別的標題。 Here's a fiddle與我的代碼。

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>

編輯：所以頭「病人列表 - 所有」和「臨牀堅持信息」是頭0所以標題「主要疾病」和「風險等級」實際上是5和6.

編輯2：需要與IE8 +一起工作。

來源

2012-03-06 thepriebe

位置總是相同還是必須先找到他們？ – charlietfl 2012-03-06 21:30:11

偉大的問題。應始終位於第2和第3位。除非主代碼更改，否則患者列表不會更改。謝謝！ – thepriebe 2012-03-06 21:33:51

實際上需要一個更好的規則定義，你想...仍然有點鬆動 – charlietfl 2012-03-06 21:34:50

也許這會更容易，如果你嘗試了我的叉子tablesorter在github上，它允許你apply class names to the header禁用排序。然後，所有你需要做的是這樣的：

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

好吧，試試這個方法（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 
});

來源

2012-03-06 21:34:49 Mottie

沒有任何冒犯你的技能或任何東西，但我寧願不使用分叉版本的代碼。這是一個需要長期依賴此代碼的大公司。 – thepriebe 2012-03-06 21:46:54

不用擔心，我會更新我的答案 – Mottie 2012-03-07 14:23:19

這非常棒。非常感謝你的幫助。 – thepriebe 2012-03-07 16:49:15

排序表數目不詳的使用jQuery表進行排序，然後只排序2頭

場景

問題

守則

CSS

jQuery的

HTML

回答

相關問題