CODEWITHSUNDEEP
javascripttwitter-bootstrap
domi771
domi771

Reputation: 450

bootstrap table filter with checkbox AND searchbox - javascript

I have the following two bootstrap table filters setup which both work individually perfect. However I have problems to "merge" them that they play nicely together:

  $("#filter").keyup ->
    rex = new RegExp($(this).val(), "i")
    $(".searchable tr").hide()
    $(".searchable tr").filter(->
        rex.test $(this).text()
      else
        rex.test $(this).text()
    ).show()
    $(".no-data").hide()
    $(".no-data").show()  if $(".searchable tr:visible").length is 0
    return

and

  $("#filterCheckBox").on "change", ->
    if @checked
      $(".searchable tr").hide()
      $(".searchable tr").filter(->
        $(this).find("td").eq(3).text() isnt 0
      ).show()
      $(".no-data").hide()
      $(".no-data").show()  if $(".searchable tr:visible").length is 0
    else
      $(".searchable tr").show()
      $(".no-data").hide()
    return

My problem is that one filter is overwritting the other one always. I have tried quite a bit to merge them but no luck or success at all.

It should work that the filterCheckBox is "stronger" than the first filter.

Edit: Here is a jsfiddle: http://jsfiddle.net/mtz1etfz/

Upvotes: 1

Views: 2020

Answers (1)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

Ok - I have modified your fiddle.

I have added two new functions: 

function checkZero(currentTr){

            if(  $('#filter2').is(':checked'))
            {
               return ($(currentTr).find('td').eq(3).text() !== "0");     
            }else
            {
                return true;
            }
  }

  function matchesSearch(currentTr) {

              var rex = new RegExp($("#filter").val(), 'i');
              return rex.test($(currentTr).text());
  }

They basically encapsulate the checks you do in your change handlers. Then I have also modified your change handler - to call BOTH functions. You want to apply both "filters" so you have to check both:

$('.searchable tr').filter(function () {
               return matchesSearch(this) && checkZero(this);
            }).show();

http://jsfiddle.net/mtz1etfz/1/

Upvotes: 1

Related Questions