Javascript Tablesort在IE中无法正常工作
下面的代码在不使用IE(Internet Explorer)时运行良好。我用版本10测试了它,但我认为它可能是其中的大多数/全部,在Chrome和Safari中运行良好,您可以对其进行排序,搜索每一行,但在IE中不会显示,即使您单击刷新href/链接,IE中也不会出现任何情况 问题1:我想知道如何让它与IE一起工作,就像在其他浏览器中一样 问题2:Desc/Asc箭头缺失,如何使其显示 请参见此处的代码/示例:或查看下面的内容 感谢您阅读我的问题,并感谢您能为我提供的任何答案 HTML代码:Javascript Tablesort在IE中无法正常工作,javascript,ajax,tablesorter,Javascript,Ajax,Tablesorter,下面的代码在不使用IE(Internet Explorer)时运行良好。我用版本10测试了它,但我认为它可能是其中的大多数/全部,在Chrome和Safari中运行良好,您可以对其进行排序,搜索每一行,但在IE中不会显示,即使您单击刷新href/链接,IE中也不会出现任何情况 问题1:我想知道如何让它与IE一起工作,就像在其他浏览器中一样 问题2:Desc/Asc箭头缺失,如何使其显示 请参见此处的代码/示例:或查看下面的内容 感谢您阅读我的问题,并感谢您能为我提供的任何答案 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>
$(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
}
});
});
姓
名字
电子邮件
应得的
网站
史密斯
约翰
jsmith@gmail.com
$50.00
http://www.jsmith.com
巴赫
直率的
fbach@yahoo.com
$50.00
http://www.frank.com
雌鹿
杰森
jdoe@hotmail.com
$100.00
http://www.jdoe.com
康威
提姆
tconway@earthlink.net
$50.00
http://www.timconway.com
JAVASCRIPT代码:
<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>
$(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
}
});
});
$(函数(){
var$table=$(“#tablesorter演示”);
$(“#追加”)。单击(函数(e){
e、 预防默认值();
$.ajax({
键入:“POST”,
url:“/echo/json/”,
数据:{
json:json.stringify({
表:'SmithFrankfsmith@yahoo.com$50.00 http://www.frank.comJonesFrankfjones@雅虎网站$50.00http://www.frank.com',
})
},
成功:功能(响应){
$table
.find('tbody'))
.html(“”)
.append(response.table);
$table.trigger(“更新”,[true]);
}
});
/*$.get('updatetable.php',函数(数据){
$table
.find('tbody'))
.html(“”)
.附加(数据);
$table.trigger(“更新”,[true]);
});*/
});
//调用tablesorter插件
$table.tablesorter({
主题:"蓝色",,
//隐藏过滤器输入/选择将调整列的大小,因此请尽量减少更改
是的,
//排序列表:[[2,0],[1,0]],
//初始化斑马条纹和过滤器小部件
小部件:[“斑马”,“过滤器”],
标题:{},
widgetOptions:{
//如果表中有子行(具有“cssChildRow”选项中的类名的行)
//此选项为true,并且在子行的任何位置都找到匹配项,那么它将生成该行
//可见;默认值为false
筛选子行:false,
//如果为true,将在每个表列的顶部添加一个筛选器;
//通过使用->标题:{1:{filter:false}}或添加class=“filter false”禁用
//如果将其设置为false,请确保使用下面的第二种方法执行搜索
filter\u columnFilters:true,
//css类应用于包含过滤器的表行&该行中的输入
filter\u cssFilter:'tablesorter filter',
//类添加到筛选行(未显示的行);寻呼机插件需要
filter_filteredRow:“filtered”,
//将自定义过滤器元素添加到过滤器行
//有关更多详细信息,请参阅筛选器格式化程序演示
筛选器\格式化程序:null,
//使用此选项添加自定义筛选函数
//有关如何使用此选项的更多详细信息,请参阅筛选器小部件自定义演示
过滤函数:空,
//如果为true,则过滤器最初会折叠,但可以通过将鼠标悬停在灰色条上立即显示
//在标题行下方。此外,当输入获得焦点时,在文档中使用选项卡将打开筛选器行
filter\u hideFilters:false、//true(请参见上面选项部分中的注释)
//将此选项设置为false可使搜索区分大小写
过滤器信号情况:正确,
//如果为true,则在用户键入时搜索列内容(延迟)
filter_liveSearch:true,
//用于重置筛选器的元素的jQuery选择器字符串
过滤器重置:“按钮。重置”,
//过滤器小部件开始搜索前的延迟(毫秒);此选项阻止搜索
//输入时输入每个字符,这样可以加快搜索大型表的速度。
过滤器搜索延迟:300,
//如果为true,则应执行服务器端筛选,因为客户端筛选将被禁用,但
//用户界面和事件仍将被使用。
筛选器\服务器侧筛选:false,
//将此选项设置为true以使用筛选器从列的开头查找文本
//因此,键入“a”将找到“albert”而不是“frank”,两者都有a;默认值为false
筛选器_startsWith:false,
//使用所有列的已解析内容进行筛选
//使用此on date列时要小心,因为日期被解析并以秒为单位存储为时间
筛选器_useParsedData:false
}
});
});
表排序器JS分配的类名与包含的CSS中提到的类名不匹配
例如,以下各项:
JS=tablesorter标头中标头的类名
在CSS=header中定义样式的类名
升序和降序排序也是如此。我在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可能存在一些问题。请尝试可用的类名。您的表排序器JS分配的类名与您包含的CSS中提到的类名不匹配 例如,以下各项: JS=tablesorter标头中标头的类名 在CSS=header中定义样式的类名 同样地,对于提升