Question

我有两张桌子。第一个表是一个包含20列的主表。在这20列中，第17列在主表的每一行上都有一个按钮。单击此按钮会出现一个对话框，显示一个包含8个相应记录的表格。

tablesorter适用于两个表，并且还包括必要的js文件。

问题1：该表可以在两个方向上排序，但是当单击第8列的标题时，主表的asc和desc图标不会更改。

问题2：单击对话框表的标题时，将对两个表进行排序，但主表按升序排序，对话框中的表按降序排序。对于任何列，排序只能进行一次。

请告诉我包含js文件时是否缺少任何内容。无法在此处粘贴代码。

<link rel="stylesheet" type="text/css" href="static/css/so_style.css">
<script type="text/javascript" src="static/js/so_utils.js"></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
<link rel="stylesheet"
    href="https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css"
    type="text/css" media="all" />
<link rel="stylesheet" href="static/css/style.css" type="text/css" media="print, projection, screen" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
    src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script type="text/javascript"
    src="https://malsup.github.io/jquery.blockUI.js"></script>
<!-- added for sorting -->

<script type="text/javascript" src="static/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="static/js/jquery.tablesorter.min.js"></script> 

Code:

$(document).ready(function() {
    $("#main-table").tablesorter({        
        headers: {
            17: { sorter: false },             
            18: { sorter: false },
            19: { sorter: false },            
            20: { sorter: false } 
        } 
    }); 

}); 

// for the dialog box

 $( ".dialogbox" ).dialog({
                     autoOpen: false,
                     width: '700',
                     resizable: false,
                     modal: true,
                     close: function() {

                         $('#main-table').addClass('tablesorter');
                         $("#main-table").tablesorter({        
        headers: {
            17: { sorter: false },             
            18: { sorter: false },
            19: { sorter: false },            
            20: { sorter: false } 
        } 
    }); 
                     }
              });


// function call onclick of button
  function showData(customerId) {        
              var editId = "dialogbox-" + customerId;        
              $( "#"+editId ).dialog( "option", "title", "Show Data" );       
              $( "#"+editId ).dialog("open");            
              $('#main-table').removeClass('tablesorter');             
              $('#main-table').css("cursor" , "default"); 
              $('#dialogbox-table').addClass('tablesorter');
              $("#dialogbox-table").tablesorter({
                  headers: { 9: {                           
                          sorter: false 
                      }, 
                      10: {                          
                          sorter: false 
                      }
                  }     

              }); }
}

对话框表的代码

 <div class="dialog" style="display: none" id="dialogbox-${Id of the saved rowdata in main table}">
        <span>
        <input class="button" type="button" name="Add" value='Add' onclick="addData('${Id of the saved rowdata in main table}')" /></span>
        <table id="dialogbox-table" class="tablesorter">
        <thead>
        <tr class="tBackground">
        <th class="tHeader"><b>Col 1</b> </td>
        <th class="tHeader"><b>Col 2</b> </td>
        <th class="tHeader"><b>Col 3</b> </td>
        <th class="tHeader"><b>Col 4</b> </td>
        <th class="tHeader"><b>Col 5</b> </td>
        <th class="tHeader"><b>Col 6</b> </td>
        <th class="tHeader"><b>Col 7</b> </td>
        <td class="tHeader" colspan="2"><b>Col 8</b></td>
        </tr>
        </thead>                   
        <tbody>
        <c:forEach items="${List}" var="bean">
        <tr>
        <td class="tRow"> data </td>
        <td class="tRow"> data </td>
        <td class="tRow"> data </td>
        <td class="tRow"> data </td>
        <td class="tRow"> data </td>
        <td class="tRow"> data </td> 
        <td class="tRow"> data </td>
        <td class="tRow"><input class="button" type="button" name="Delete" value='Delete'
        onclick="deleteData(some parameters)/></td>
        <td class="tableRow">
        <input class="button" type="button" name="modify" value='Edit'
        onclick="modifyData(some parameters)"></td>
        </tr>
        <c:set var="countExtras" value="${countExtras + 1}" />
        </c:forEach>
        </tbody>
        </table>
        </div>

jquery tablesorter不能在同一页面上为两个表工作

0 个答案: