Tablesorter不适用于我的表。我尝试使用.trigger('update')
但它对我不起作用。Tru 使用愚蠢表和 theu 工作但不正确(不是排序字符串(
function tableLoader(){
$.ajax({
url: 'http://127.0.0.1:8000/index_script'
}).then(function (data) {
$('#apnd').empty();
for (var i = 0; i < data.length; i++) {
if((data[i].autor)==(getname())){
$('#apnd').append("<tr>"+
"<th><input value="+data[i].trip_name+" id=trip_name"+data[i].id+"></th>"+
"<th><input value="+data[i].start_city+" id=start_city"+data[i].id+"></th>"+
"<th><input value="+data[i].end_city+" id=end_city"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].days+" id=days"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].day_cost+" id=day_cost"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].hotel_per_day_cost+" id=hotel_per_day_cost"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].air_tickets_cost+" id=air_tickets_cost"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].other_transport_cost+" id=other_transport_cost"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].ticket_to_city_cost+" id=ticket_to_city_cost"+data[i].id+"></th>"+
"<th><input type="number" value="+data[i].ticket_from_city_cost+" id=ticket_from_city_cost"+data[i].id+"></th>"+
"<th>"+data[i].autor+"</th>"+
"<th>"+"<button type="button" id="Edit" value=""+data[i].id+"">Edit</button>n"+"</th>"+
"<th>"+"<button type="button" id="Delete" value=""+data[i].id+"">Delete</button>n"+"</th>"+
+"</tr>");
}}
$(function() {
$("Table")
.tablesorter({
theme : 'default',
cssInfoBlock : "tablesorter-no-sort",
widgets: [ 'zebra', 'stickyHeaders' ]
}).trigger('update')
});
});
}
tableLoader();
请尝试以下更改:
- 将
$("Table")
替换为小写$("table")
。 - 最后一个
+"</tr>"
不起作用,因为前面的行以+
结束......这可能会导致 JavaScript 错误。 - 不断向表追加行不是好的做法。最好构建整个行字符串,然后追加一次。
- 在这种情况下,我认为将表排序器初始化包装在文档就绪函数中没有任何好处。它可以被删除。
- 我假设 id
#apnd
添加到<tbody>
?如果没有<thead>
,表排序器将不会初始化。 - 初始化表排序器后无需立即触发更新。仅当初始化后内容发生更改时才需要。
- 如果使用添加新行,则无需使用
$('#apnd').empty();
.html()
.
这是更新的代码。请尝试一下,让我知道它是否有效:
function tableLoader() {
$.ajax({
url: 'http://127.0.0.1:8000/index_script'
}).then(function (data) {
var tbody = "";
for (var i = 0; i < data.length; i++) {
if ((data[i].autor) == (getname())) {
tbody += "<tr>" +
"<th><input value=" + data[i].trip_name + " id=trip_name" + data[i].id + "></th>" +
"<th><input value=" + data[i].start_city + " id=start_city" + data[i].id + "></th>" +
"<th><input value=" + data[i].end_city + " id=end_city" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].days + " id=days" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].day_cost + " id=day_cost" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].hotel_per_day_cost + " id=hotel_per_day_cost" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].air_tickets_cost + " id=air_tickets_cost" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].other_transport_cost + " id=other_transport_cost" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].ticket_to_city_cost + " id=ticket_to_city_cost" + data[i].id + "></th>" +
"<th><input type="number" value=" + data[i].ticket_from_city_cost + " id=ticket_from_city_cost" + data[i].id + "></th>" +
"<th>" + data[i].autor + "</th>" +
"<th>" + "<button type="button" id="Edit" value="" + data[i].id + "">Edit</button>n" + "</th>" +
"<th>" + "<button type="button" id="Delete" value="" + data[i].id + "">Delete</button>n" + "</th>" +
"</tr>";
}
}
$('#apnd').html(tbody);
$("table").tablesorter({
theme: 'default',
cssInfoBlock: "tablesorter-no-sort",
widgets: ['zebra', 'stickyHeaders']
})
});
}
tableLoader();
问题是插件无法从 (我使用表排序器的调试 metod 检查了它(。 我的解决方案:
$(function() {
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'inputs',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $c = $(cell);
// return 1 for true, 2 for false, so true sorts before false
if (!$c.hasClass('updateInput')) {
$c
.addClass('updateInput')
.bind('keyup', function() {
$(table).trigger('updateCell', [cell, false]); // false to prevent resort
});
}
return $c.find('input').val();
},
type: 'text'
});
$(function() {
$('table').tablesorter({
debug: "core filter",
widgets: ['zebra'],
headers: {
0: {
sorter: 'inputs'
},
1: {
sorter: 'inputs'
},
2: {
sorter: 'inputs'
},
3: {
sorter: 'inputs'
},
4: {
sorter: 'inputs'
},
5: {
sorter: 'inputs'
},
6: {
sorter: 'inputs'
},
7: {
sorter: 'inputs'
},
8: {
sorter: 'inputs'
},
9: {
sorter: 'inputs'
},
10: {
sorter: 'inputs'
}
}
});
});
$("table").trigger("update");