CODEWITHSUNDEEP
javascripttwitter-bootstrap
domi771
domi771

Reputation: 460

bootstrap table with filter - zebra css

I have the following fiddle: http://jsfiddle.net/52aK9/239/

you will see that the first two rows are grey and the "zebra"/striped design of the table is not correct anymore and all rows are grey.

I have tried several approaches already but no luck.

Here is the code:

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').after('<tr></tr>').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

    }(jQuery));

});

How can I make sure that the striping is always working?

Upvotes: 0

Views: 821

Answers (3)

Avinash Garg
Avinash Garg

Reputation: 1402

Tried using bootstrap and js

for your code

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').after('<tr></tr>').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

    }(jQuery));

});

sharing the fiddle link , it mignt help you

http://jsfiddle.net/52aK9/241/

Upvotes: 1

Matheno
Matheno

Reputation: 4152

I think you need the Bootstrap DataTable integration. Here is a perfect example:

https://datatables.net/examples/styling/bootstrap.html

Here is your fiddle slightly updated with the DataTable Integration:

http://jsfiddle.net/52aK9/242/

Upvotes: 0

user1600124
user1600124

Reputation: 440

I'd keep the data in the table in once piece as an object, and re-build the table everytime you change the fitler. The reason the striped pattern doesn't work is that you are merely hiding the rows you don't want to see. They are still in the document, and the css rules still think that they exists. So, even if hid the 2nd row, the 3rd row is still the 3rd row to the css, and does not change color. Re-building the table without the unwanted rows should work.

Upvotes: 0

Related Questions