这应该工作:
<head>
<title>Damn</title>
<script src="jquery-latest.js" type="text/javascript"/>
<script src="jquery.tablesorter.min.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function() {
$("#tablesorter-demo").tablesorter();
});
</script>
</head>
<body>
<table id="tablesorter-demo" class="tablesorter" border="2" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Difference</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20.9%</td>
<td>+12.1</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>+12</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>-26</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
</tbody>
</table>
</body> …Run Code Online (Sandbox Code Playgroud) 我正在使用tablesorter库.我的问题是我的表格内的单元格中的每个项目都是一个链接,并且库开始错误地排序,因为它正在查看单元格内的HTML而不是文本.换句话说,在以下单元格内容中;
<a href="ledger.php?var=345345">$100.64</a> 它排序:
<a href="ledger.php?var=345345"> 代替 $100.64
我知道有办法查看单元格内的文本.我开始用他们在网站上列出的简单方法,文本提取方法.但是,我不能为我的生活让这个功能正常.
使用我的JS代码,任何人都可以告诉我如何正确应用此文本提取?这就是我现在所拥有的(下图).
当"文本提取"行没有被注释掉时,此代码的当前结果是插件无法加载,并且页面上的所有jQuery都失败了.Web开发人员插件中的控制台错误是:
错误:node.childNodes [0] .childNodes [0]未定义源文件:
$(document).ready( function () {
// TableSorter
$("#dt-results")
.tablesorter({
widgets: ['zebra'],
sortList: [[0,1]],
// define a custom text extraction function
textExtraction: function(node) {
// extract data from markup and return it
return node.childNodes[0].childNodes[0].innerHTML;
}
})
.tablesorterPager({container: $("#pager")})
.tablesorterFilter({filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterCaseSensitive: false,
filterWaitTime: 100});
});
Run Code Online (Sandbox Code Playgroud)
谢谢
我正在使用tablesorter对表内容进行排序.我的表格如下.
<table class="results" border="1">
<thead>
<tr>
<th class="header">No</th>
<th class="header">Distance</th>
<th class="header">Diagnostic Fee</th>
<th class="header">Regular Price </th>
<th class="header">Company Price</th>
<th class=""> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="distance"><a>16.50 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$5</a></td>
<td><a>$5<small>after 5% cash back</small></a></td>
</tr>
<tr>
<td>2</td>
<td class="distance"><a>6.30 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$8</a></td>
<td><a>$8<small>after 5% cash back</small></a></td>
</tr>
<tr>
<td>3</td>
<td class="distance"><a>10.25 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$2</a></td>
<td><a>$2<small>after 5% cash back</small></a></td>
</tr>
</tbody>
</table>?
Run Code Online (Sandbox Code Playgroud)
我想用距离和价格对表格进行排序.我面临的困难是用距离解决桌子,因为距离以字母数字显示,如"12公里".所以,表格没有排序.
任何人都可以建议如何只通过数字解析内容?
我有一个正在使用 AJAX 刷新的表。我想将 TableSorter 应用于此表。
我是 jQuery 的新手。从 AJAX 成功返回后,我是这样做的:
success: function(html)
{
jQuery("#animalsinexhibit").html(html);
jQuery("#animalsinexhibit").tablesorter({
debug : true,
widgets : ['zebra', 'columns'],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
},
Run Code Online (Sandbox Code Playgroud)
当页面最初显示时(即第一次从 AJAX 调用返回),这工作正常,但第二次 AJAX 返回时,我得到以下信息并且没有出现 TableSort 样式和标题排序图标:
stopping initialization! No table, thead, tbody or tablesorter has already been initialized
Run Code Online (Sandbox Code Playgroud)
我也尝试使用以下方法但没有成功:
var resort = true;
jQuery("#animalsinexhibit").trigger("update", [resort]);
Run Code Online (Sandbox Code Playgroud)
在 AJAX 数据上附加 TableSorter 的正确方法是什么?
谢谢。
我正在使用 tablesorter ( http://mottie.github.io/tablesorter/docs/index.html ) 并且我的一个表有一个下拉选择框。
通过下面的文本提取,我设法按所选选项对其进行排序。但是,这只适用于初始选择。如果我更改任何选项并对表格重新排序,它仍然使用旧值。
如何教 tablesorter 使用当前选定的值?
textExtraction: function(node) {
// Check if option selected is set
if ($(node).find('option:selected').text() != "") {
return $(node).find('option:selected').text();
}
// Otherwise return text
else return $(node).text();
}
Run Code Online (Sandbox Code Playgroud) 我有一个表,每行的第一列包含几个图标,每个图标在一个元素内:
<a title="aaa@aaa.es" class="delete" href="#" data-toggle="modal" data-target="#dialogDeleteUser">
<img alt="delete" src="/recursos/imagenes/iconPapelera.png">
</a>
Run Code Online (Sandbox Code Playgroud)
我有一个jQuery函数,应该在单击该链接时触发:
$(document).ready(function(){
$("a.delete").click(function() {
var userEmail = $(this).attr("title");
loadUserDelete(userEmail);
});
Run Code Online (Sandbox Code Playgroud)
事实上它已经工作了一段时间,直到我开始使用Pager小部件和Ajax开始使用TableSorter加载表内容.
表加载得很好,但由于某种原因,该类在该函数中没有被识别,我不知道为什么.
我正在使用 Mottie https://mottie.github.io/tablesorter/的 jQuery 插件,并且看到了使用外部链接重置过滤器的功能。我在排序中也看到过同样的情况。但是,我希望能够重置过滤器并恢复默认排序。
这就是我所拥有的,它不适用于排序,但至少可以重置过滤器。
HTML:
<a href="#" id="reset-link">reset</a>
JavaScript:
$('#reset-link').click(function(){
$('#mytable').trigger('sortRestart').trigger('filterReset');
return false;
});
Run Code Online (Sandbox Code Playgroud) 我正在使用tablesorter和tablesorter.pager.这是我的代码.
$(document).ready(function() {
$("#peopletable")
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
.tablesorterFilter({ filterContainer: $("#people-filter-box"),
filterClearContainer: $("#people-filter-clear-button"),
filterColumns: [1, 2, 3],
filterCaseSensitive: false
})
.tablesorterPager({ container: $("#peoplepager") });
$("#peopletable tr.data").click(function() {
var personid = $(this).attr('id');
$.ajax({
type: "POST",
url: "/Search/GetDocumentsByPerson",
data: { "id": personid },
datatype: "json",
success: function(data) {
var results = eval(data);
$("#documentstable > tbody tr").remove();
$.each(results, function(key, item) {
$("#documentstable > tbody:last").append(html);
});
$("#documentstable").trigger("update");
}
});
});
});
Run Code Online (Sandbox Code Playgroud)
一切都很好,除非我点击下一页我的按钮点击事件不会触发.这是jquery tablesorter的已知问题吗?
在我的Web应用程序中,我维护了用户记录表.在客户端发送时添加和删除记录,而不是用户单击"保存"按钮以保存在服务器上完成的所有操作.
我已经将表分类器应用于表上的排序功能.但令人惊讶的排序功能只适用于ID字段,即表的第一个字段,但对于所有其他字段,它给出错误(来自chrome的错误跟踪)
Uncaught TypeError: Cannot read property 'type' of undefined
multisortjquery.tablesorter.js:600
$.extend.tablesorter.construct.each.$headers.click.mousedown.onselectstart
Run Code Online (Sandbox Code Playgroud)
这是表结构.
<table id="contentTable" class="tablesorter">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Birth Date </th>
<th> City </th>
<th id="actionheader"> Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
在此我动态添加数据.在这种情况下,排序仅适用于第一个字段,即ID字段
这就是我初始化tableSorting的方法.
function initializeTableSorting() {
$("#contentTable").tablesorter({
sortList : [[0, 0]],
headers : {
0 : {
sorter : "integer"
},
1 : {
sorter : "text"
},
2 : {
sorter : false
},
3 : { …Run Code Online (Sandbox Code Playgroud) 我已经浏览了文档和一些示例,但找不到答案...
您如何获得正在查看的当前页面?这是为了限制从数据库返回的结果数。
谢谢
编辑:更新名称,因为我意识到它是多么模糊
tablesorter ×10
jquery ×9
javascript ×2
ajax ×1
filter ×1
html ×1
paging ×1
reset ×1
sorting ×1