Using Search Feature
Using Search Feature
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
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
This discussion has been closed.
Replies
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]
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
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
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
- 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
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
Allan
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
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
...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
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
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
[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
OK. Thank You. It now works.
BTW, I will be more careful in the future.
Thank You Again
STeve