我正在使用Jquery Table Sorter以表格的形式显示数据 我想保持搜索功能对于表中存在的数据,所以为此我指的是以下jsfiddle
http://jsfiddle.net/Mottie/abkNM/2566/
我试过这种方式
<input class="search selectable" type="search" placeholder="Search" data-column="all" />
$.tablesorter.filter.bindSearch('#candletable', $('.search'));
这是我的小提琴
http://jsfiddle.net/eY8uH/1501/
但这不是过滤任何数据
你能告诉我如何解决这个问题吗?
答案 0 :(得分:1)
<强>更新强>
在candlespattern
点击事件中添加此绑定行。因为在表中没有数据时初始化过滤器不起作用。另外,在tablesorter方法中传递filter
选项。
以下是更新后的JSFiddle。
$(document).ready(function() {
$('#candletable').tablesorter({
widgets: ["filter", "scroller"],
widgetOptions: {
scroller_height: 100,
filter_columnFilters: false,
filter_saveFilters: true,
filter_reset: '.candlespattern'
}
}).tablesorterPager({
container: $(".pager"),
size: 20
});
$("#pager").hide();
//$.tablesorter.filter.bindSearch('#candletable', $('.search'));
});
var myjsonresponse1 = [{
"name": "JAYBARMARU111",
"date_time": "2015-12-29"
}, {
"name": "JUSTDIAL1111",
"date_time": "2015-12-29"
}, {
"name": "TITAN111",
"date_time": "2015-12-29"
}];
var myjsonresponse2 = [{
"name": "JAYBARMARU2222",
"date_time": "2015-12-29"
}, {
"name": "JUSTDIAL222",
"date_time": "2015-12-29"
}, {
"name": "TITAN222",
"date_time": "2015-12-29"
}];
$(document).on("click", ".candlespattern", function() {
var clicked = $(this).attr("id");
var datatoselect = '';
if (clicked === 'one') {
datatoselect = myjsonresponse1;
} else if (clicked === 'two') {
datatoselect = myjsonresponse2;
}
var html = "";
html += '';
for (var e = 0; e < datatoselect.length; e++) {
html += "<tr><td>" + datatoselect[e].name + "</td><td>" + datatoselect[e].date_time + "</td></tr>"
}
$("#candletable tbody").html(html);
//binding filter here when data is added to table.
$.tablesorter.filter.bindSearch('#candletable', $('.search'));
$("#candletable").trigger("update");
$("#pager").show();
});