Filtering slow in Chrome/FF with bootstrap styling

stefhan

Hi.

I' a newbie programmer, and this is my first post in his forum, so bear with me. I'm currently feeding my datatable with json via ajax and it works wonderfully. The table loads fast (even with 10000+ rows). But right now I only have 200 rows/3 columns. My problem is that filtering in Chrome and Firefox is slow/laggy when showing 100 entries. When I type in a word, it takes several seconds before it appears in the search box and filters.In IE11 it's lightning fast. I use Bootstrap CSS, and noticed that by removing my styling from table (especially table-striped), it gets alot better. Showing lets say 50 rows also makes things better. Is there a way to optimize this behaviour, am I doing something wrong or is this expected? I do not wish to use serverside Processing.

I'm using jQuery v1.11.1 and DataTables 1.10.3. My table:

<table id="myTable" class="table-striped table-bordered">

My JS:

$("#myTable").dataTable({
            "dom": 'CT<"clear">lfrtip',
            "aLengthMenu": [[25, 50, 100], [25, 50, 100]],
            "iDisplayLength": 25,
            "deferRender": true,
            "ajax": '/WebAPI/data/getallitems',
            stateSave: true,
            "aoColumns": [
                    { "data": "ID" },
                    { "data": "Name" },
                    { "data": "Address" }
            ]
        });

Best regards,

Stefhan.