добавление дополнительного заголовка в таблицу без jquery table sorter inteferring

Question

Мне нужно добавить дополнительный заголовок в верхнюю часть таблицы. цель состоит в том, чтобы просто рассказать, что представляет собой таблица. поэтому мне не нужна сортировка. Но проблема в том, что jquery tablesorter мешает ему, так как я добавляю его внутри класса tablesorter. вот мой код до сих пор:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 

     jQuery("table").tablesorter({ 


    }); 

    }); 
    </script> 
     puts "<table cellspacing=\"1px\" class=\"tablesorter\" >" 
     puts "<thead>" 
     puts "<tr>" 
     puts "<th>Search</th>" 
     puts "<th>Sub-App</th>" 
     puts "<th>Division</th>" 

     puts "</tr>" 
     puts "</thead>" 
     puts "<tbody>" 

     puts "<tr>" 
     puts "<td>$level</td>" 
     puts "<td>$div_name</td>" 
     puts "<td>$reg_name</td>" 

     puts "</tr>" 

     puts "</tbody>" 
     puts "</table>" 

Вот что я хочу, чтобы добавить

  puts "<table cellspacing=\"1px\" class=\"tablesorter\" >" 
      puts "<thead>" 
      puts "<tr><th>Search Division/Region</th></tr> 
      puts "<tr>" 
      puts "<th>Search</th>" 
      # and so on 
      puts "<th>Sub-App</th>" 

Могу ли я получить какое-то решение, чтобы сделать выше, не нарушая страницу?

Answer 1

Я думаю, что в первом ряду просто отсутствует colspan="3". Попробуйте использовать этот HTML (demo):

<thead> 
    <tr><th colspan="3">Search Division/Region</th></tr> 
    <tr><th>Search</th><th>Sub-App</th><th>Division</th></tr> 
</thead> 

затем отключить первую ячейку заголовка, установив сортировщик ложь:

$('table').tablesorter({ 
    headers : { 
     0 : { sorter: false } 
    }, 
    widgets: ['zebra'] 
});