以下代码在不使用IE(Internet Explorer)时效果很好,我在版本10上进行了测试,但我认为它可能是大多数/全部,在Chrome和Safari中效果很好,您可以对其进行排序,并显示每一行的搜索信息但是即使在IE中也没有,即使单击刷新href / link也不在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>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</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>fsmith@yahoo.com</td><td>$50.00</td> <td>http://www.frank.com</td></tr><tr><td>Jones</td><td>Frank</td><td>fjones@yahoo.com</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

    }

  });

});

最佳答案

由Table Sorter JS分配的类名与包含的CSS中提到的类名不匹配。

例如,以下内容:

JS中表头的类名称= tablesorter-header

在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-似乎您要包括的Table Sorter JS可能存在一些问题。尝试一个可用的here

关于javascript - Tablesort在IE中无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17813737/

10-12 13:00
查看更多