search field big delay whe typing in box for 1000 rows

Jeff A

Hi, I have a search field on a table of 1000 rows. The letters I type in box do not show for several seconds. Any ideas?

I'm using standard search option:
searching: true

kthorngren

I have a table with close to 2000 rows and don't have this issue.

Are you using server side processing?

Have you created a search plugin?

More details are needed to help.

Kevin

Jeff A

HI Kevin, no I haven't done either of those. can you post the script to enable those?

kthorngren

I was asking because they are potentials for delays.

Can you post a link to your page? If not maybe you can post your Javascript code as a start?

Have you tried different browsers?

Kevin

Jeff A

Here is the JS:

j=jQuery.noConflict();

setTimeout(function(){j('#confirmit_agg_table_3').DataTable({
"paging": false,
"searching": true,
"language": { "info": "Showing START to END of TOTAL sites"},
"order": [[ 1, 'asc' ]],
"scrollX": true,
"scrollY": "600px",
"scrollCollapse": true,
fixedColumns: { leftColumns: 3 }

} );
},500);

Results are same by browser. Slow to input.

kthorngren

Your code looks good. Are you able to provide a link to your page with the issue?

Is the search key response slow if you have 50 rows?

Maybe run your page through the WC3 HTML validator:
https://validator.w3.org/

Kevin

Jeff A

thanks Kevin. I cant show the page here since its client's proprietary info.

tangerine

What about Kevin's other two points?

Jeff A

hi, for the same page, if my query brings back < 500 records it seems better. But for 500-1000 it is slow. Is it possible to limit the search to only do certain columns? That may help situation. Only 3 columns have alpha text, the other columns are numbers which we don't need searching on.

tangerine

Can't you just disable "searchable"?
https://datatables.net/reference/option/columns.searchable

Jeff A

hi tangerine, I tried that and it works to limit the search but doesn't change the "type to search" speed. There was something about using ajax instead? would this speed it up?

columnDefs: [{ "searchable": false, "targets": [0,1,5,6,7,8,9,10,11,12,13] }],

kthorngren

I'll admit I don't have much experience with large tables, HTML nor input events. The thing that I don't understand is this:

The letters I type in box do not show for several seconds.

I'm having a hard time understanding why there would be a delay in the typed letters being displayed in the input box. I can understand a delay in searching but I would think the typed characters would be displayed right away then the event is executed.

Are you using the Datatables built-in search or did you create your own search input?

Since there are many things that happen during a search I would try to isolate them for troubleshooting. I would try something like the below to see how long each component takes.

Create a custom search input:

<label>Global Filter: </label><input type="text" class="global_filter" id="global_filter">

//timestamp format helper function
function addZero(x, n) {
    while (x.toString().length < n) {
        x = "0" + x;
    }
    return x;
}

//get current timestamp
function log () {
    var d = new Date();
    var h = addZero(d.getHours(), 2);
    var m = addZero(d.getMinutes(), 2);
    var s = addZero(d.getSeconds(), 2);
    var ms = addZero(d.getMilliseconds(), 3);
    return h + ":" + m + ":" + s + ":" + ms;
}

//execute search then draw the result
function filterGlobal () {
    console.log(log() + ': Start search');
    $('#example').DataTable().search(
        $('#global_filter').val(),
        $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    );
    console.log(log() + ': Search complete');
    console.log(log() + ': drawing table');
    $('#example').DataTable().draw();
    console.log(log() + ': Table drawn');
}


$(document).ready( function () {
  var table = $('#example').DataTable();
    
      //input event handler for custom input box
      $('input.global_filter').on( 'keyup', function () {
        console.log(log() + ': Entering keyup event handler');
        filterGlobal();
        console.log(log() + ': Exiting keyup event handler');
    } );
     

Maybe this can help determine where the delay is. Or maybe I totally misunderstand your problem description.

Kevin

Jeff A

thanks kevin..ill give that a try. the first part of your reply isn't showing.

Right after: Create a custom search input:

Jeff A

my guess the delay is that as soon as you type a letter, it does the search which takes a while on 1000 records. Meanwhile we are typing more letters but its still doing the search on first letter. Does that help?

kthorngren

Meanwhile we are typing more letters but its still doing the search on first letter.

I see, I misunderstood. I was able to recreate your issue with a delay function. Seems like what you might want to do is to delay the search until the user stops typing. IIRC, @bindrid posted something like this for server side processing to stop ajax delays each keystroke. A google search for "javascript input handler delay" yields lots of options. Without trying them I wouldn't know which to recommend.

EDIT:
Even if you delay the search until the user stops typing you will still see the delay during the search. Sounds like you reduced the search to 3 text columns and still have the delay. How big are these text columns? The table I tried with close to 2000 ros has short fields.

Kevin

bindrid

When server side is set to true, my preferred method is to remove the keypress handlers off the search box and replace it with a keypress that only initiates the ajax call when the enter key is used. I also put a search button right next to the search box. This way, no searches are initiated on their own, they have to be initiated by the enter key or button click by the user.

If you are interested in the code I use, I can link it a bit later, I am limited as to what I can do while still at work.

Jeff A

hi bindrid, yes that would be great if you can post your setup.

bindrid

http://live.datatables.net/zazususu/1/edit

bindrid

I actually use fontawesome search icons to make the button smaller in my production code.

Jeff A

thanks bindrid! I shall give this a try.

Jeff A

do I need this file?

              ajax: {
                  url: "examples/server_side/scripts/server_processing.php",

Jeff A

bindrid..thanks for the solution. Its working on my page! I don't need to use ajax since the search itself is not too slow.

One question though, do you have a "reset" button on your page to clear out the search box?