Datatables - Show only input box on table load

Question

I am currently working on a website which includes using Datatables. After customizing a lot, it looks quite like a regular SERP.

The feature I want to implement: On page load only the input box should be displayed and the data rows should be hidden until a search string is entered.

So it actually should behave like you see it on known Search engines. I didn't find info about on datatables' forum or here.

It tried using jQuery keypress() but it did not worked. I tried hiding the table on keypress, didn't worked at all (just to get started).

$("#inputbox").keypress(function () {
      $("table.display").css("display":"none");
    });

But toggle works fine:

$("#button").click(function () {
      $("table.display").slideToggle();
    });

So the problem is somehow with the input box and the keypress function I guess.

Would be really glad to get some feedback here.

YBathia · Accepted Answer · 2015-03-26 00:43:08Z

1

something like this?

$('table tr').hide();
$('input').keypress(function(e) {
    $('table td:contains("'+String.fromCharCode(e.charCode)+'")').closest('tr').show();
});

notes:

you need to pass the event in "callback" function (here "e", but you can name it "event" to get which key has been pressed

this particular example display the full line as soon as a character existing in one of line is pressed.

EDIT if you want to use datatable plugin filtering, you can do this when you "datatable" your table:

var yourDataTable = $('#yourDataTable').dataTable({...});
var dummySearchString = 'this.will.never.be.found.mwhahahahhaaa';
yourDataTable.fnFilter(dummySearchString);
$('.dataTables_filter input').css('color', 'white');
$('.dataTables_wrapper').delegate('.dataTables_filter input', 'focus', function () {
    if (this.value === dummySearchString) 
    {
        this.value='';
        $(this).css('color', 'black');    
        yourDataTable.fnFilter('');  // only if you want the table to appear when you click the search field
    }
});

basically, right after the table has been "datatabled" we ask the plugin to apply a search (we ask it to search for a "non existing" value). Hence the plugin "hides" all rows. to be real nice, the color of the text is set white, so it doesn't show in the input box.

edited Mar 26, 2015 at 0:43

YBathia

9021 gold badge8 silver badges20 bronze badges

answered Nov 2, 2011 at 12:49

roselan

3,7651 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dee Over a year ago

Exactly, works. Thanks. Are you familiar with datatables? I am also wondering how I can add custom drop down filter in my sidebar instead of having the below or above the table (as shown here: datatables.net/extensions/thirdparty/ColumnFilterWidgets/…).

roselan Over a year ago

I'm not familiar with this plugin, but you can use $('.column-filter-widgets').appendTo('#youSideBarId') to move the filter input boxes. (and don't forget to accept my answer ^^)

Nicola Peluchetti Over a year ago

I think he should use datatables filtering engine instead of doing a 'custom' filtering

roselan Over a year ago

indeed! I did look quickly at the datatable plugin (which is quite complete), and edited my answer!

Dee Over a year ago

Hey, you gave some good stuff to work with. Thanks a lot. It makes sense to prefilter the table with "mwhaaaa" strings :), but I guess in that case I would not be able to set the cursor into the input box on page load. But just a guess. I gonna check it later. But it works, and that's just great. So thx all of you. What I also figured is that the framework (foundation.zurb.com), I'm using to built the page, made some trouble when loading the JS files. The behavior of the page depends on which JS files loaded first...

|

Nicola Peluchetti · Accepted Answer · 2011-11-03 12:15:07Z

0

You could hide/show the table according to the fact that there are rows:

$('table').hide();
$('#inputbox').keyup(function(e) {
   var numRows = $('table tr').length;
   if(numRows >0){
    $('table').show();
   }else{
     $('table').show();    
   }
});

in this case is uppose you are filtering the table using datatables filtering engine (which is what you should do instead of filtering the data yourself)

answered Nov 3, 2011 at 12:15

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Collectives™ on Stack Overflow

Datatables - Show only input box on table load

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related