Slower search with DataTables 1.10 vs. DataTables 1.9.x

Marioz20

Hello,

I have been trying to implement DataTables into my Parse (Backbone) Web App using a bootstrap template (called the Clean Zone template). The template included jQuery Data Tables version 1.9.x, however this version did not allow me to add rows using the templates rendered by my backbone views.

The new rows.add() function in 1.10 allowed me to do this by passing the javascript objects, which is awesome. However I have noticed that by using this new version my table lags and the screen freezes when I use the search box with >20 rows being displayed. In comparison, the older version of data tables searches immediately with no lag issues with 100 rows displayed.

(If you're wondering, I was able to use the old version of data tables by first writing the backbone view templates to the DOM then initialising the data table, but that took way too long to load compared to using rows.add()).

Snippets of initialising my table:

• First initialise the table:

this.table = $('#datatable').DataTable({
          stateSave: true,
          stateDuration: -1,
          "lengthMenu": [ 10, 25],
          "order": [ 2, 'asc' ],
          "columnDefs": [
            { "orderable": false, "targets": [0, 3, 5, 6, 7] },
            { "searchable": false, "targets": [0, 6, 7]}
          ],
          autoWidth: false,
        });
        $('.dataTables_filter input').addClass('form-control').attr('placeholder','Search');

• Then fill up an array with HTML Table Row objects and add it to the table using rows.add(). Finally it draws the table.

addAll: function(collection) {
    var viewArray = [];
    collection.each(function(student) {
      var view = new StudentTableRowView({model: student});
      viewArray.push(view.render().el);
    });
    this.table.rows.add(viewArray);
    this.table.draw();
  },

As a side question, as the table data contains HTML (e.g. <input class="edit"... ), if you search for "input", all the rows will be displayed as they all contain that HTML. Is there a way to search through the displayed text only?

Thanks in advance!

allan

As a side question, as the table data contains HTML (e.g. <input class="edit"... ), if you search for "input", all the rows will be displayed as they all contain that HTML

That shouldn't be happening. It should be that the HTML is stopped before the search is applied.

Regarding the more general question, can you link me to the page so I can see what is going on please? It sold actually be faster that 1.9...!

Allan

Marioz20

I converted a second and third table to DataTables and you are right... they don't search through the html... but the original one still does, which is odd! And I didn't do anything differently with the new ones. They are all similar tables with buttons on each row etc. (HTML below)

<script type="text/template" id="studentRowItem-template">

    <td id="expandDetails" style="cursor: pointer;"><center><img class="toggle-details" src="images/plus.png"></center></td>
    <td id="firstName" ><p id="firstName"  class="view"><%= firstName %></p><input class="editFirstName edit" value="<%= firstName %>"></td>
    <td id="lastName"><p id="lastName"  class="view"><%= lastName %></p><input class="editLastName edit" value="<%= lastName %>"></td>
    <td id="email"><p id="email"  class="view"><%= email %></p><input class="editEmail edit" value="<%= email %>"></td>
    <td id="studentID"><p id="studentID"  class="view"><%= studentID %></p><input class="editStudentID edit" value="<%= studentID %>"></td>
    <td id="phoneNumber"><p id="phoneNumber"  class="view"><%= phoneNumber %></p><input class="editPhoneNumber edit" value="<%= phoneNumber %>"></td>
    
    <td id="actions">
        <a class="label label-success add-parentLink" href="#home"><i class="fa fa-plus"></i></a>
        <a class="label label-primary send-mail" href="#home"><i class="fa fa-envelope"></i></a>
        <a class="label label-warning ex-student" href="#home"><i class="fa fa-group"></i></a> 
        <a class="label label-danger student-destroy" href="#home"><i class="fa fa-times"></i></a>
        <a class="hasUserIcon fa fa-check hidden" ></a>
        </td>

    <td class="center "><input class="selector" type="checkbox"></td>

</script>

I wish I could show you, but the web app requires login. Is there any information I could convey that would help? (Regarding the slow search with many rows per page). I tried writing to the DOM then initialising the table in version 1.10 but it results in the same problem.

allan

v1.9.4 had a bug which caused it to search the HTML. That was present in 1.9.4 only (1.9.3 and 1.10.0 don't have that issue). Possibly you were using 1.9.4 when that behaviour was observed?

s there any information I could convey that would help? (Regarding the slow search with many rows per page).

A profile trace from Chrome might be quite interesting.

Allan

Steve_Webtron

I have also come here because when I tried to use DataTables 1.10.0 (*and 1.10.2) in a site with a bootstrap theme (flat dream)

I noticed the search is ridiculously slow.
In a table with only 6 columns and 104 rows, if I press a key it takes 2-4 seconds to filter off that first keypress, and then it gets faster (because less rows are visible)

if I disable styles, it is faster, but something with bootstrap styles and how dataTables is hiding the rows now just doesn't play nice.

Marioz20

Thanks for reminding me about this! Yea I too am using a bootstrap template (clean zone template) which is pretty much exactly the same as the template you are using.

It includes an older version of datatables (1.9xx). I changed it to the newest version of datatables. A javascript file it was invoking (general.js) slowed it down majorly. But I took it out as it was not needed and the performance of the datatables is fine now so I am happy! All you really need from the general.js file is the line of code to set the body opacity to 1:

$("body").css({opacity:1,'margin-left':0});

allan

Interesting - what does general.js do that slows the operation down so much?

Allan

Marioz20

The general.js file just invokes everything the template needs to show off all of its features, e.g. charts, graphs, and datatables included. It also generates a lot of random numbers for these displays, so I assume it is just for template display purposes.

The only thing it does with datatables is initialize any tables and thats it. So it is not very obvious what causes the slow in speed.

Link if you're interested:

https://wrapbootstrap.com/theme/clean-zone-responsive-admin-template-WB00XNXM0

allan

Thanks. I was wondering if it might be destroying and recreating the DataTable - although another possibility is that there are bindings or event listeners which are taking up a long time when running.

Allan

hjanuschka

actually i found the problem with those two themes :)

look for the code (core.js):

$(document).bind('DOMSubtreeModified', function(){
    var h = $("#pcont").height();
    if(domh != h) {
      //updateHeight();
    }
  });

and remove it - this comes from the menu,both themes use the same

allan

Oof - yes. That is always going to hurt performance. Thanks for letting us know!

Allan