2013-07-23 259 views
1

下面的代码工作正常时,不使用IE浏览器(Internet Explorer)我测试了它与版本10,但我认为它可能是大多数/所有这些,在Chrome和Safari浏览器中工作正常,您可以排序它和搜索每一行显示,但在IE浏览器中,即使你点击刷新href /链接没有发生在IE浏览器中。Tablesort在IE中无法正常工作

问题1:我想知道如何使它与IE一起工作,就像它在其他浏览器中一样。

问题2:Desc/Asc箭头丢失,我如何让它们显示。

查看代码/示例:http://jsfiddle.net/5PVqc/2/或如下所示。

感谢您阅读我的问题,并感谢您提供给我的任何答案。

HTML代码:

<table id="tablesorter-demo" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
<a id="append" href="#">Refresh Page</a>  

JavaScript代码:

$(function() { 

    var $table = $("#tablesorter-demo"); 

    $("#append").click(function(e) { 

     e.preventDefault(); 

     $.ajax({ 
      type: 'POST', 
      url: '/echo/json/', 
      data: { 
       json: JSON.stringify({ 
        table: '<tr> <td>Smith</td><td>Frank</td><td>[email protected]</td><td>$50.00</td> <td>http://www.frank.com</td></tr><tr><td>Jones</td><td>Frank</td><td>[email protected]</td><td>$50.00</td> <td>http://www.frank.com</td></tr>', 
       }) 
      }, 
      success: function(response) { 

       $table 
        .find('tbody') 
        .html('') 
        .append(response.table); 

       $table.trigger("update", [true]); 
      } 
     }); 

     /*$.get('updatetable.php', function(data) { 
      $table 
       .find('tbody') 
       .html('') 
       .append(data); 
      $table.trigger("update", [true]); 
     });*/ 

    }); 

    // call the tablesorter plugin 
$table.tablesorter({ 
    theme: 'blue', 

    // hidden filter input/selects will resize the columns, so try to minimize the change 
    widthFixed : true, 

    //sortList: [[2,0],[1,0]], 

    // initialize zebra striping and filter widgets 
    widgets: ["zebra", "filter"], 

    headers: { }, 

    widgetOptions : { 

     // If there are child rows in the table (rows with class name from "cssChildRow" option) 
     // and this option is true and a match is found anywhere in the child row, then it will make that row 
     // visible; default is false 
     filter_childRows : false, 

     // if true, a filter will be added to the top of each table column; 
     // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false" 
     // if you set this to false, make sure you perform a search using the second method below 
     filter_columnFilters : true, 

     // css class applied to the table row containing the filters & the inputs within that row 
     filter_cssFilter : 'tablesorter-filter', 

     // class added to filtered rows (rows that are not showing); needed by pager plugin 
     filter_filteredRow : 'filtered', 

     // add custom filter elements to the filter row 
     // see the filter formatter demos for more specifics 
     filter_formatter : null, 

     // add custom filter functions using this option 
     // see the filter widget custom demo for more specifics on how to use this option 
     filter_functions : null, 

     // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately 
     // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus 
     filter_hideFilters : false, // true, (see note in the options section above) 

     // Set this option to false to make the searches case sensitive 
     filter_ignoreCase : true, 

     // if true, search column content while the user types (with a delay) 
     filter_liveSearch : true, 

     // jQuery selector string of an element used to reset the filters 
     filter_reset : 'button.reset', 

     // Delay in milliseconds before the filter widget starts searching; This option prevents searching for 
     // every character while typing and should make searching large tables faster. 
     filter_searchDelay : 300, 

     // if true, server-side filtering should be performed because client-side filtering will be disabled, but 
     // the ui and events will still be used. 
     filter_serversideFiltering: false, 

     // Set this option to true to use the filter to find text from the start of the column 
     // So typing in "a" will find "albert" but not "frank", both have a's; default is false 
     filter_startsWith : false, 

     // Filter using parsed content for ALL columns 
     // be careful on using this on date columns as the date is parsed and stored as time in seconds 
     filter_useParsedData : false 

    } 

    }); 

}); 
+1

http://stackoverflow.com/questions/16883663/jquery-security-error-in-opera-and-internet-explorer这个答案可能会帮助你,请将jquery版本从1.10.1升级到1.10.2或2.0 .3,这是一个错误在1.10.1杉IE版本 – Devjosh

+0

你的小提琴说不同的故事 – Devjosh

+0

@Devjosh你是对的,对不起:( – msvuze

回答

1

有在你的表选机JS被分配,并在所提到的那些类名不匹配包含的CSS。

例如,以下内容:在JS =的tablesorter头

类名称

类名称为哪种风格在CSS =报头中定义

类似地,对于升序和降序排序表头。我在Fiddle的CSS代码区域中添加了以下内容,并且图像正在出现。

table.tablesorter thead tr .tablesorter-header { 
    background-image: url(http://tablesorter.com/themes/blue/bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 
table.tablesorter thead tr .tablesorter-headerAsc { 
    background-image: url(http://tablesorter.com/themes/blue/asc.gif); 
} 
table.tablesorter thead tr .tablesorter-headerDesc { 
    background-image: url(http://tablesorter.com/themes/blue/desc.gif); 
} 
table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerDesc { 
    background-color: #8dbdd8; 
} 

问题2 - 看起来有可能会有一些问题与表分拣机JS,你是其中。尝试一个可用的here