在这种情况下如何使过滤器使用Jquery表格排序器?

时间:2016-01-03 17:15:43

标签: jquery

我正在使用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/

但这不是过滤任何数据

你能告诉我如何解决这个问题吗?

1 个答案:

答案 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();
});