Using Search Feature

Using Search Feature

hurrellshurrells Posts: 15Questions: 0Answers: 0
edited June 2011 in General
Hello.

I am a jQuery newbie and have just come across datatables. Looks excellent and I hope to use it to upgrade my waybill tracking program. I am asking or looking for examples, documentation that might help me evaluate datatables. I just want to confirm that I can do what I want below eventually.

Basically:
- I would have a web-page with the zero configuration example on it and set an initial oSearch parameter so that no data is visible so that customers can't see another customers data. It should not get any data until the search box is filled and enter pressed.
- The user would then enter a waybill# into the search box which would search for that specific number in the waybill column, only when enter is pressed, and return 0 rows message or the 1 row if found.

I think my is a continuation of (Thread ID 624) about how to setup the initial oSearch.
My basic question is how do I limit the search execution until I press enter? (Thread ID 259?)

Happy to donate back the code as an example when done.

Thanks, Steve

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I would suggest using fnFilter ( http://datatables.net/api#fnFilter ) to build your own filtering control rather than the default filtering control. Just put a text box on the page and attach a suitable event handler to it. Or you can unbind the default one on the default control if you prefer.

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    Thanks for you response. Here is where I am:
    http://www.open-sourced.com/test/test1.html

    I am now stuck on the fnfilter statement. When I add the column parameter, or change it from null to value 0 for 1st table column, in the fnfilter statement my search no longer provides any results and appears to just lock up.

    I ultimately want to regex the waybill search so that it is an exact match. Something like "^"+$(this).val()+"$" I guess...

    I think you are suggesting that I drop the Search Box and just use my own filters? Like the range filtering example?

    Thanks, Steve

    [code]

    $(function(){
    var myTable=$('#myTable').dataTable( {
    "oSearch": {"sSearch": "Enter Bill of Lading here"}
    } );


    $('.dataTables_filter input')
    .unbind('keypress keyup')
    .bind('keypress keyup', function(e){
    if ($(this).val().length < 3 && e.keyCode != 13) return;
    myTable.fnFilter($(this).val(), null );
    });
    });

    [/code]
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    That should work okay - although I wouldn't use both keyup and keypress - just keypress will do. When you say it locks up - does it throw any Javascript errors in the console? It might be worth adding some console.log statements to debug it.

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    Thanks for your response(s).

    I removed the keyup binding and it still works. Next I changed the fnFilter to only look at the waybill column (0) as follows (Is this correct?):
    [code]
    myTable.fnFilter($(this).val(), 0 );
    [/code]
    I use Google Chrome and so right-click->Inspect Element -> Console and there are no javascript errors.

    I added a console.log statement as follows:
    [code]
    myTable.fnFilter($(this).val(), 0 );
    console.log($(this).val()) ;
    [/code]
    I do see my date-entry of "W00" in the log.

    As I mentioned above I am a jquery newbie so what exactly should I be looking for? Is it something like the return value of the fnFilter() call? How do I do that?

    My goal here is to build this up to use your "Obtain Server-Side Data" example as my data is in Oracle and changes hourly. Also still working on the regexp to make sure the entire waybill string is matched eg: "^\s+$"

    I am going to download some of your examples that use specific columns to filter and see if I can get them to work.

    I am using the right versions of code correct?

    Starting to feel some time&boss pressure to get this simple demo completed ;)

    Thanks
    STeve
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    The basic call to fnFilter looks absolutely fine. You are passing a value (which as you see in the log) to DataTables to search on column index 0. If "W00" is being filtered on (as you note) is there anything in the column to filter on that? The information element for the table should update to say what the filtering is doing.

    One thing you could try is just entering this on the console:

    [code]
    $('#myTable').dataTable().fnFilter( 'W00', 0 );
    [/code]
    That will apply the filter directly to the table, thus discounting any events or anything else.

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    You can look at my example (link above) as I leave it working (null) until I try something else as the customer needs to play with it too. As far as the data and searching on "W" or "W00" I purposely make all the waybill strings start with "W00" to keep it simple. I have also tried other search values and on other columns but none of it works. I'm sure it's going to be something very simple when solved. ;-) Take a copy of my code if you wish. Maybe it some strange keypress, table format, etc, interaction problem....I will try simplifying it later.

    As Requested:
    So when I put $('#myTable').dataTable().fnFilter( 'W00', 0 ); into the console window in Google Chrome I get:
    - undefined

    Anyways, I have downloaded your examples and they work on my site:
    http://www.open-sourced.com/test/zero_config.html
    http://www.open-sourced.com/test/individual_column.html

    Question:
    - In the "DataTables individual column filtering example" how do you get the tfoot search fields to say "Search engines", "Search browsers" and so on? Or how do I set it to my own value for a given search field
    - Or even better is there a way to set an initial fnfilter that would hide all the rows from displaying on initialization.
    - I was looking at discussion #843. I am going to have the user authenticate (Apache BasicAuth) to this app and therefore they will belong to an apache group. I will want to pass the value of that Apache group in the query to restrict users to see only the rows of their group. Is this possible to pass ENV() variables?

    I am now working on mashing together the "individual_column" and the "obtain_server-side_data.html" demos. I will get back to you shortly when my brain is full again ;-)

    Thanks
    STeve
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    > So when I put $('#myTable').dataTable().fnFilter( 'W00', 0 ); into the console window in Google Chrome I get:
    - undefined

    Ah yes - I forgot to answer your question from the previous post - sorry. fnFilter doesn't return a value - hence the undefined. This is okay and working as intended.

    > In the "DataTables individual column filtering example" how do you get the tfoot search fields to say ...

    There is a bit of Javascript to do that, which is shown in the listing for the page example - the section which says "Support functions to provide a little bit of 'user friendlyness' to the textboxes in the footer".

    > Or even better is there a way to set an initial fnfilter that would hide all the rows from displaying on initialization.

    http://datatables.net/usage/options#oSearch
    http://datatables.net/usage/options#aoSearchCols

    > Is this possible to pass ENV() variables?

    Pass them from where to where? If you have access to the ENV variables and can shown them in your output - then there should be no reason why you can't use them.

    Also about the filter not working - I made a mistake earlier - sorry. You want 'keyup' not 'keypress' The value of the input is not available (or rather it is out of date) with keypress - you want keyup :-)

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    Spent too long typing in a response and got logged out ;-( Here is a shorter response.

    Code below is after your suggestions. Still not working yet.
    [code]

    $(function(){
    var myTable=$('#myTable').dataTable( {
    "oSearch": {"sSearch": "Enter Bill of Lading here"}
    } );


    $('.dataTables_filter input')
    .unbind('keyup')
    .bind('keyup', function(e){
    if ($(this).val().length < 999 && e.keyCode != 13) return;
    myTable.fnFilter($(this).val(), 0, false );
    console.log($(this).val()) ;
    });
    });

    [/code]

    -----
    Regarding which javascript makes "Search engines". I think it's the .each code. Am I right? Also, the .focus clears it and .blur just makes it grey again. I really just don't get where the word "Search " comes from in the boxes.

    Will try initial values ideas. Basically don't want to let user see any table data unless a manual search was done.

    ENV() issue is my mistake as these variables will be obtained and used in the PHP script.

    Thanks
    STeve
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Looks like it is working okay to me. If I type "W0012" into the search box then I get one entry in the table. If I enter "W00" and hit enter then I get four entries. Is this not what you see or expect?

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allen.

    I mentioned that I leave it "working" (with a null not 0) for the customer to see.
    When you just looked at it it was "working" but still searches across all columns. Search for "Customer".
    Look at the "page source" to see which way it is".

    I will now put it back to "broken" for you and leave it attempting to fnFilter on waybill# 1st column=0

    On a more positive note, I do now have your server-side demo running on my site:
    http://www.open-sourced.com/test/server-side.html

    Please don't forget about my other questions.

    Cheers
    STephen
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    Hello Allen

    When I add the line "oSearch": {"sSearch": "Initial search"} to your server-side example:
    - The search box disappears.
    - The form stays stuck on "Processing".

    [code]

    $(document).ready(function() {
    $('#example').dataTable( {
    "oSearch": {"sSearch": "Initial search"}
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php"
    } );
    } );

    [/code]


    Cheers
    STephen
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    ...continuing along in the theme of Thread#289...

    I used your sDom example default code from http://datatables.net/examples/basic_init/dom.html
    [code]
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    [/code]
    in your server-side example I cloned at http://www.open-sourced.com/test/server-side.html.

    My expected result was that there would be no change as I am just staying with the sDom defaults and using just your example server-side code. Here is what I had in my code to be perfectly clear.

    [code]
    $(document).ready(function() {
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php"
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    } );
    } );
    [/code]

    The result was that the Search box is now missing and no results are displayed.

    I was hoping to proceed from the above by just removing the 'f' above to remove the Search box but keep filtering active. I also used Thread#37 to try to understand sDom.

    I will figure this out as your datatables is still better than almost anything else I see out there.

    Thank You
    STeve
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I'm afraid I'm getting a little bit lost here... Threaded discussions like this don't really lend themselves to lots of questions in an single thread :-).

    Regarding the last one about 'f' and the search box - the server-side.html file you link to doesn't have sDom defined in it - it would be useful if you could put up the code that is above, as that certainly should have the filtering input in the DOM.

    > - The form stays stuck on "Processing".

    That would be due to a JSON error: http://datatables.net/faqs#json

    > - The search box disappears.

    I don't understand why that would be. Again an example would be very useful :-)

    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan.

    OK.
    I have now left the example code "showing my exact sDom problem" at http://www.open-sourced.com/test/server-side.html. My apologies for not doing so up to this point. Please view the example and advise me on just this sDom issue. The server side example works great off my database but when I add in the following single line of code the table displays no Search Box or any data. It works fine if I take out this single line of code below.

    [code]
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    [/code]

    Thank you for your Patience.
    STeve
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    You've got a Javascript error on the page, which should be showing up in Firebug.

    [code]
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php"
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    } );
    [/code]
    You are missing a comma after sAjaxSource. It should be:

    [code]
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    } );
    [/code]
    Allan
  • hurrellshurrells Posts: 15Questions: 0Answers: 0
    edited June 2011
    Hello Allan

    OK. Thank You. It now works.
    BTW, I will be more careful in the future.

    Thank You Again
    STeve
This discussion has been closed.