Slow Sorting with Bootstrap/Responsive site

nettlesd

I have a site that uses Bootstrap with the Responsive plugin for Data Tables (V1.10.4). I"m loading up 4K records and the data loads in about a minute or less. Have not really timed it but I'm ok with the response time.

So, to my problem. After the DataTable is loaded, typing in the Search box takes 5 seconds or more before any characters appear. Is that normal? The results do appear but it makes you think that nothing is happening when you don't see any characters. It's like everything is in slow motion.

It would appear that something is happening when you are typing and what is happening in the background. I would expect to see what I type in the Search box to appear right away with the DataTable reloading the table based on what I am typing in. It does work but everything is super slow.

<link href="/Bootstrap/css/bootstrap.css" rel="stylesheet">
    
    
    <link href="/Bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/Bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/jQuery/Data-Tables/media/css/dataTables.responsive.css" rel="stylesheet">
    <link href="/jQuery/Data-Tables/media/css/dataTables.bootstrap.css" rel="stylesheet">
    <
    <script type="text/javascript" src="/jquery/js/jquery-1.11.1.js"></script>
    
    <script type="text/javascript" src="/Bootstrap/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="/jQuery/Data-Tables/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/jQuery/Data-Tables/media/js/dataTables.responsive.js"></script>
    <script type="text/javascript" src="/jQuery/Data-Tables/media/js/dataTables.bootstrap.js"></script>

```js

$().ready(function() {
    
    var Table;
    
    function format (d) {
      return '<div class="slider">' +
             '<table cellpadding="5" cellspacing="0" border="0" style="padding-left: 50px;">' +
             '<tr>' +
             '<td valign="top">Employee Status:</td>' +
             '<td>'+ d.eff_status + '</td>' +
             '</tr>' +
              
             '<tr>' +
             '<td valign="top">Manual Account:</td>' +
             '<td>'+ d.manual_account + '</td>' +
             '</tr>' +
              
             '<tr>' +
             '<td valign="top">Box ID:</td>' +
             '<td>'+ d.id + '</td>' +
             '</tr>' +
              
             '</table>' +
             '</div>';
    }
    
    Table = $("#Users").DataTable( {
               pageLength: 100,
               "ajax": {
                 "url": Path + "CFC/Support.cfc?method=getUsers&returnformat=plain"
               },
               "columns": [
                 {
                  "class":          "details-control",
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": '' },
                 
                  { "data": "name" },
                  { "data": "email" },
                  { "data": "effdt", className: "text-center" },
                  { "data": "status", className: "text-center" }
               ],
               "order": [[1, "asc"]]
            });
            
    $("#Users tbody").on("click", "td.details-control", function () {
        var tr = $(this).closest("tr");
        var row = Table.row(tr);
 
        if (row.child.isShown())
          {
           $("div.slider", row.child()).slideUp( function () {
              row.child.hide();
              tr.removeClass("shown");
           });
          }
          else 
            { 
             row.child( format(row.data()), "no-padding" ).show();
             tr.addClass("shown"); 
             $("div.slider", row.child()).slideDown();
            }
    });
    
    $("#Users").loading( {start: true, theme: "gray"} );
    
    $("#Users").on('processing.dt', function (e, settings, processing) { 
       switch (processing)
         {
          case true:
            {
             break;
            }
                 
          case false:
            {
             $("#Users").loading("stop");
             break;
            }
         }
    }).dataTable();
    
});

allan

typing in the Search box takes 5 seconds or more before any characters appear. Is that normal?

No that sounds very slow to me. Can you please link to a test page showing the issue.

Allan

nettlesd

I'll see what I can do since the page contains names, email addresses and such. I'll make everything 'xxxxxxxxxx' and see how that works. I'll report back if I can get that swapped out..

nettlesd

Here's the site but the same behavior is not there. I'm using some different jQuery plugins on the actual site so I wonder if one of those it is doing it. I'll have to start removing each one and see what happens.

allan

If you are using a draw callback function or an event listener for a DataTables draw to take some action, that might be the first place to start.

Allan

nettlesd

It works as it should be if I do the following:

Comment out this line

<script type="text/javascript" src="/jQuery/jQuery-Loading/dist/jquery.loading.js"></script>

Leave this line in.  I do get a javascript error because "loading" can't be found but if I remove this then its slow searching again.

$("#Users").on('processing.dt', function (e, settings, processing) { 
       switch (processing)
         {
          case true:
            {
             break;
            }
                 
          case false:
            {
             $("#Users").loading("stop");
             break;
            }
         }
    }).dataTable();

Using FireFox and Firebug. How do I tell if something is going on when I search? Look at something in the console or somewhere?

allan

So the loading plug-in for jQuery is causing the issue? It might be worth asking in their support forums (or whatever they use) in that case.

As for telling what is happening you could try using the profiling options of the debugging tools in the browser.

ALlan

nettlesd

I'm not so sure that's it or not. Removing jQuery-Loading and at times the search is still slow. Just not sure what is causing it.

allan

I'm afraid there is little I can do to help other than to suggest using the profiling tools in your browser, without being able to access it myself. The "fire chart" in Chrome is particularly good imho.

Allan

nettlesd

Ok, I believe I have it narrowed it down. It has to do with "processing.dt" and I'm not sure why.

<script type="text/javascript" src="jquery/js/jquery-1.11.1.js"></script>  
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="jQuery/Data-Tables/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="jQuery/Data-Tables/media/js/dataTables.responsive.js"></script>
    <script type="text/javascript" src="jQuery/Data-Tables/media/js/dataTables.bootstrap.js"></script>

<table id="Users" width="100%" class="table table-hover dt-bootstrap responsive no-wrap">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Box Login</th>
            <th>Date Added</th>
            <th>Box ID Status</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Box Login</th>
            <th>Date Added</th>
            <th>Box ID Status</th>
          </tr>
        </tfoot>
      </table>

$().ready(function() {
    
    var Table;
    
    function format (d) {
      return '<div class="slider">' +
             '<table  cellpadding="5" cellspacing="5" border="0" style="padding-left: 50px;">' +
             '<tr>' +
             '<td valign="top">Date Added:</td>' +
             '<td valign="top">'+ d.effdt + '</td>' +
             '</tr>' +
             
             '<tr>' +
             '<td valign="top">Box ID:</td>' +
             '<td valign="top">'+ d.id + '</td>' +
             '</tr>' +
             
             '<tr>' +
             '<td valign="top">Employee Status:</td>' +
             '<td valign="top">'+ d.eff_status + '</td>' +
             '</tr>' +
              
             '<tr>' +
             '<td valign="top">Manual Account:</td>' +
             '<td valign="top">'+ d.manual_account + '</td>' +
             '</tr>' +
              
             '</table>' +
             '</div>';
    }
    
    Table = $("#Users").DataTable( {
               pageLength: 100,
               "ajax": {
                 "url": Path + "CFC/Support.cfc?method=getUsers&returnformat=plain"
               },
               "columns": [
                 {
                  "class":          "details-control",
                  "orderable":      false,
                  /*"data":           null,*/
                  "defaultContent": '' },
                 
                  { "data": "name" },
                  { "data": "email" },
                  { "data": "effdt", className: "text-center" },
                  { "data": "status", className: "text-center" }
               ],
               "order": [[1, "asc"]]
            });
            
    $("#Users tbody").on("click", "td.details-control", function () {
        var tr = $(this).closest("tr");
        var row = Table.row(tr);
 
        if (row.child.isShown())
          {
           $("div.slider", row.child()).slideUp( function () {
              row.child.hide();
              tr.removeClass("shown");
           });
          }
          else 
            { 
             row.child( format(row.data()), "no-padding" ).show();
             tr.addClass("shown"); 
             $("div.slider", row.child()).slideDown();
            }
    });
    
    $("#Users").on("processing.dt", function (e, settings, processing) {
       switch (processing)
         {
          case true:
            {
             console.log("loading");
             break;
            }
                 
          case false:
            {
             console.log("unloading");
             $("#Users").loading("stop");
             break;
            }
         }
    }).dataTable();
    
});


Uncaught TypeError: undefined is not a function

If I break the "processing dt" statement by calling $("#Users").loading("stop"); which I haven't included the Plugin in the JS then the search is fast and characters show up as you type. Taking the $("#Users").on("processing.dt", function (e, settings, processing) { out of the JS or removing $("#Users").loading("stop"); so the statement doesn't break causes the search to be slow. Characters don't show up in the search box until 2-3 seconds later.

So, if you are following me. Having no "processing dt" function or a valid "processing dt" function causes the search to be slow. Having the "processing dt" function included but calling a function that is not there "$("#Users").loading("stop");" causes the search to be fast.

nettlesd

Important Update.

It has something to do with the Data Tables JS, Responsive JS and Bootstrap JS. Reordering the files and leaving the "processing dt" statement in produces a fast search.

Now, there is no Bootstrap styling doing it this way that I can see but the search is fast.

<script type="text/javascript" src="jquery/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="jQuery/Data-Tables/media/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="jQuery/Data-Tables/media/js/dataTables.responsive.js"></script>
    <script type="text/javascript" src="jQuery/Data-Tables/media/js/jquery.dataTables.js"></script>

$("#Users").on("processing.dt", function (e, settings, processing) {
       switch (processing)
         {
          case true:
            {
             console.log("loading");
             break;
            }
                 
          case false:
            {
             console.log("unloading");
             break;
            }
         }
    }).dataTable();

```

allan

Putting DataTables last will mean that the plug-ins for it won't work. So I guess the issue is in one of them somewhere. However, without a test case there is very little I can do to offer help. As I say, I would suggest using Chrome's developer tools.

Allan

nettlesd

This is the best I can do and I'm hoping you can work with this or copy what you need to work with. An actual working site with dummy data.

Oh, I should point out I'll only leave this site up for a few days before taking it down. I don't want this to come back and bite me.

http://fusion1.umkc.edu/Duane/dt-tables/

allan

Excellent! Thanks for the link. Could you try this updated version of Responsive please? I think it should be around 40 times faster!

Thanks,
Allan

nettlesd

Thank you, that did it. So much better and faster.

allan

Excellent - good to hear :-)

Allan

nettlesd

One more problem. Take that test site that I gave you and resize a browser down to a phone size and you will see that you can no longer click on the "+" icon and that both the "+" and "-" icons are stacked on top of one another.

I checked on a phone and you can't click or tap on the "+" icon. Nothing happens.

I'm guessing that behavior is not supposed to function that way. Or maybe I'm missing something in my JS file to be able to see the hidden columns.

allan

Hi,

I'm getting an error from the JSON loading at the moment:

We are experiencing technical difficulties at this time. Please try again later.

I'll do as it says :-)

Allan

nettlesd

Not sure when you tried hitting the page but the page comes up fine and the test data is shown. I would try again.

allan

Got it now. It looks like you are trying to use child rows at the same time as Responsive. Responsive uses DataTables' child row options in order to display the columns that have been hidden. If you are also using them then there is very likely going to be a conflict - which is what is happening here.

Two options:

1. Put date added etc into the table and let Responsive display them.
2. Disable Responsive

Allan

nettlesd

What I'm trying to do is only display 4 columns of data and have the remainder in a child row. Basically, show only 5 of 10 columns but also have that responsive if the user is viewing that page on a phone. I'm trying to have my cake and eat it also, so to speak.

We are required to have a responsive site so I can't give that up but I also don't want to try to cram 10 columns of data in the initial table. That's why I was breaking it up so a person would see limited data and click to see additional data.

Any column options to do what I'm after versus what you have outlined? I would really like to do both.

allan

Sure - have the table draw all ten columns, but add the class none to the columns for the ones that you want to display in the child row only. Then Responsive will take care of the child row display completely. Documentation for this.

Allan

nettlesd

That did it. Thanks again. Everyone here at work loves it. DataTables is just awesome!

allan

Good to hear that helped :-)

nettlesd

allan,

Has your updated Responsive.js been moved to PROD? If I download the latest version of DataTables will this include the fix you provided?

allan

No not yet. It will be in 1.0.5 when that is released. In the mean time you could use the nightly.

Also the fix is in Responsive, not DataTables core.

Allan

nettlesd

Ok, thanks.