« Return to Thread: Adding a filterer to FilteringTable widget
Re: Adding a filterer to FilteringTable widget
by Malaney J. Hill
::
Rate this Message:
I have a couple of comments regarding your email below as well as what
I believe to be a bug to report.
Number 1, I think the idea of a Filtering Table should be to provide a solution
to dealing with large amounts of data. If you add paging to the table
it kinda defeats
the purpose because now you are no longer filtering all of the
results, merely the
ones that are shown on the page. At any rate, I think paging should
be left to the
server side language. Easy enough to do. I would focus on the
functionality that
the Filtering Table adds to web development... Filtering.
Secondly, I too have had better performance utilizing the JSON method
of populating
the table as opposed to the inline HTML table replacement.method.
However, I have
not been able to successfully set or apply filters to a JSON populated
table. Using the example from
http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable_programmatic.html
I am unable to call a setFilter action within the dojo.addOnload
function. Its seems that
when a widget is created on the fly only the first row is ever sent to
the filter for filtering.
To test this I added the following code to line 519 of
src/widget/FilteringTable.js which is the applyFilters function.
(Note: my version may be about a week old).
var row=rows[i];
// this is my debug line
alert('row='+i+' '+ this.store.getField( this.getDataByRow(row),
this.columns[1].getField() ) );
for(var j=0; j<this.columns.length; j++){
if(!this.columns[j].filterFunction(this.store.getField(this.getDataByRow(row),
this.columns[j].getField()))){
b=false;
break;
}
}
I then set up 10 rows of data to be loaded via JSON. The alerts
showed that the very first
row of data is being sent to the filtering function for all 10 rows!
I conclude that something is going wrong with the applyFilters
function of the FilteringTable widget when used with JSON ...
MJH
On 8/17/06, Tom Trenka <dojo-interest@...> wrote:
>
> Sorry about the double post before, something was weird with Nabble.
>
> So preliminary testing is telling me that a FilteringTable with 400+ rows is
> pretty slow to render, which I'm not surprised about. However, I can
> populate the SimpleStore behind it with 10,000 complex JSON objects very
> quickly (on my MacBook Pro, the 2.0GHz with 2GB RAM, FF 1.5+, it takes all
> of 73ms to fill the store; on Safari, it's about 440ms. I'd say that's more
> than acceptable performance :).
>
> So I'm thinking about adding the ability to page the table as well. If I
> do, it will be an optional flag, and you'll be able to specify the size of
> each page (probably I'll go with a default of 50), and I'll have to come up
> with a mechanism for doing the paging. I *don't* want to pull the infinite
> scrollbar trick for this widget for 0.4, but maybe we'll see what happens.
> Given that I'm not providing a UI for the filtering, perhaps I won't provide
> a UI for the paging either, and we can let others do some customization
> things that we can incorporate later.
>
> We'll see what happens. I won't be getting to the paging for at least a
> week and a half though, so don't expect anything too soon (other things on
> my plate, top one being the Chart).
>
> trt
>
>
> Malaney J. Hill wrote:
> >
> > Thanks for the optimization, works like a charm! However, I do wish
> > there was a way that I could pass the namefilter.value in as a parameter.
> >
> > Also, it probably helps to be realistic about the amount of data that the
> > browser can hold. I tested this puppy out with 250+ rows, each containing
> > 4 columns of string data (longest was 50 chars) and I started getting the
> > "Unresponsive script" warning in Mozilla. This was loading the data in
> > via
> > HTML, not sure if loading via JSON will improve things.
> >
> > MJH
> >
> > On 8/17/06, Tom Trenka <dojo-interest@...> wrote:
> >>
> >> Whoops, my apologies. It actually passes your filter function the value
> >> of
> >> the field for that particular column; I need to change the docs for that,
> >> thank you for the catch.
> >>
> >> You can optimize that function a little like so:
> >>
> >> function inspectRow(val){
> >> if (!val) return true;
> >> var filtText = document.myFilter.namefilter.value.toLowerCase();
> >> if (filtText) {
> >> return (val.toLowerCase().indexOf(filtText) >= 0);
> >> }
> >> return true;
> >> }
> >>
> >>
> >> trt
> >>
> >>
> >> Malaney J. Hill wrote:
> >> >
> >> > Wow, the filtering table is amazing!! I was able to cobble together a
> >> > filter without much
> >> > problem. I basically tied the "applyFilters" call to the onkeyup of a
> >> > textbox and specified a filter as you indicated. (Autocomplete="off"
> >> > helps big time). Here's my filter code, though know it is definitely
> >> > not optimized and doesn't deal with numeric values .... yet:
> >> >
> >> > ===============
> >> > function inspectRow(rowObj)
> >> > {
> >> > if (!rowObj) return true;
> >> > var filtText = document.myFilter.namefilter.value.toLowerCase();
> >> > if (filtText)
> >> > {
> >> > var rObj = rowObj.toLowerCase();
> >> > if (rObj.indexOf(filtText) >= 0)
> >> > {
> >> > return true;
> >> > }
> >> > else
> >> > {
> >> > return false;
> >> > }
> >> > }
> >> > else
> >> > {
> >> > return true;
> >> > }
> >> > }
> >> >
> >> > After getting this working, I wanted to try to filter more than one
> >> > row at a time. It was at this point that I realized I had to call a
> >> > seperate function to do this. It would be really nice to be able to
> >> > send parameters to the filter function. This way I don't have to
> >> > specify the filter input within the function itself. Could there
> >> > possibly already be a way to pass parameters to the filter call?
> >> >
> >> > Another minor detail is that you said that my filter would receive an
> >> > HTML Row as input when in fact it receives the data contained in the
> >> > column (i.e. Adam, David, etc ...). This is actually much easier to
> >> > parse than a row so I vote you keep it as is.
> >> >
> >> > Other than that, FilteringTable is definitely a marvelous piece of
> >> code.
> >> >
> >> > Bravo,
> >> >
> >> > Malaney
> >> >
> >> > On 8/15/06, Tom Trenka <dojo-interest@...> wrote:
> >> >>
> >> >> Right now, there aren't. But that's a relatively new piece of
> >> >> functionality,
> >> >> and I need to add that as a part of the test suite at some point.
> >> >>
> >> >> But here's the basics of it: a filter function return a boolean
> >> value,
> >> >> true
> >> >> if it satisfies your condition, and false if it doesn't. A custom
> >> >> filtering
> >> >> function should take an HTML Row as the argument, which you can
> >> inspect
> >> >> in
> >> >> any way you see fit.
> >> >>
> >> >> When you've written your filtering function, there are several ways of
> >> >> adding it to the widget:
> >> >>
> >> >> 1. in the column in question, like so:
> >> >>
> >> >> <th field="myField" filterusing="myFilterFunction">my field</th>
> >> >>
> >> >> Note that this is a reference (i.e. no parenthesis).
> >> >>
> >> >> 2. using [widget].setFilter:
> >> >>
> >> >> dojo.widget.byId("myTable").setFilter("myField", myFilterFunction);
> >> >>
> >> >> And to perform the filtering:
> >> >>
> >> >> dojo.widget.byId("myTable").applyFilters();
> >> >>
> >> >> This is all pretty new and it might change based on usage (so feedback
> >> is
> >> >> encouraged), but I think the API is pretty stable now.
> >> >>
> >> >> trt
> >> >>
> >> >>
> >> >> Malaney J. Hill wrote:
> >> >> >
> >> >> > Hello,
> >> >> >
> >> >> > I'm wondering if there are any examples available of adding
> >> filterers
> >> >> > to the FilteringTable widget. I'd like to be able to show/hide rows
> >> on
> >> >> > based on input received via text box.
> >> >> >
> >> >> > Thanks,
> >> >> >
> >> >> > MJH
> >> >> > _______________________________________________
> >> >> > Dojo FAQ: http://dojo.jot.com/FAQ
> >> >> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> >> > Dojo-interest@...
> >> >> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >> >
> >> >> >
> >> >>
> >> >> --
> >> >> View this message in context:
> >> >>
> >> http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5821097
> >> >> Sent from the Dojo forum at Nabble.com.
> >> >>
> >> >> _______________________________________________
> >> >> Dojo FAQ: http://dojo.jot.com/FAQ
> >> >> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> >> Dojo-interest@...
> >> >> http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >>
> >> > _______________________________________________
> >> > Dojo FAQ: http://dojo.jot.com/FAQ
> >> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> > Dojo-interest@...
> >> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >
> >> >
> >>
> >> --
> >> View this message in context:
> >> http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5855323
> >> Sent from the Dojo forum at Nabble.com.
> >>
> >> _______________________________________________
> >> Dojo FAQ: http://dojo.jot.com/FAQ
> >> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> Dojo-interest@...
> >> http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >>
> > _______________________________________________
> > Dojo FAQ: http://dojo.jot.com/FAQ
> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> > Dojo-interest@...
> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >
> >
>
> --
> View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5857861
> Sent from the Dojo forum at Nabble.com.
>
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest@...
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@...
http://dojotoolkit.org/mailman/listinfo/dojo-interest
I believe to be a bug to report.
Number 1, I think the idea of a Filtering Table should be to provide a solution
to dealing with large amounts of data. If you add paging to the table
it kinda defeats
the purpose because now you are no longer filtering all of the
results, merely the
ones that are shown on the page. At any rate, I think paging should
be left to the
server side language. Easy enough to do. I would focus on the
functionality that
the Filtering Table adds to web development... Filtering.
Secondly, I too have had better performance utilizing the JSON method
of populating
the table as opposed to the inline HTML table replacement.method.
However, I have
not been able to successfully set or apply filters to a JSON populated
table. Using the example from
http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable_programmatic.html
I am unable to call a setFilter action within the dojo.addOnload
function. Its seems that
when a widget is created on the fly only the first row is ever sent to
the filter for filtering.
To test this I added the following code to line 519 of
src/widget/FilteringTable.js which is the applyFilters function.
(Note: my version may be about a week old).
var row=rows[i];
// this is my debug line
alert('row='+i+' '+ this.store.getField( this.getDataByRow(row),
this.columns[1].getField() ) );
for(var j=0; j<this.columns.length; j++){
if(!this.columns[j].filterFunction(this.store.getField(this.getDataByRow(row),
this.columns[j].getField()))){
b=false;
break;
}
}
I then set up 10 rows of data to be loaded via JSON. The alerts
showed that the very first
row of data is being sent to the filtering function for all 10 rows!
I conclude that something is going wrong with the applyFilters
function of the FilteringTable widget when used with JSON ...
MJH
On 8/17/06, Tom Trenka <dojo-interest@...> wrote:
>
> Sorry about the double post before, something was weird with Nabble.
>
> So preliminary testing is telling me that a FilteringTable with 400+ rows is
> pretty slow to render, which I'm not surprised about. However, I can
> populate the SimpleStore behind it with 10,000 complex JSON objects very
> quickly (on my MacBook Pro, the 2.0GHz with 2GB RAM, FF 1.5+, it takes all
> of 73ms to fill the store; on Safari, it's about 440ms. I'd say that's more
> than acceptable performance :).
>
> So I'm thinking about adding the ability to page the table as well. If I
> do, it will be an optional flag, and you'll be able to specify the size of
> each page (probably I'll go with a default of 50), and I'll have to come up
> with a mechanism for doing the paging. I *don't* want to pull the infinite
> scrollbar trick for this widget for 0.4, but maybe we'll see what happens.
> Given that I'm not providing a UI for the filtering, perhaps I won't provide
> a UI for the paging either, and we can let others do some customization
> things that we can incorporate later.
>
> We'll see what happens. I won't be getting to the paging for at least a
> week and a half though, so don't expect anything too soon (other things on
> my plate, top one being the Chart).
>
> trt
>
>
> Malaney J. Hill wrote:
> >
> > Thanks for the optimization, works like a charm! However, I do wish
> > there was a way that I could pass the namefilter.value in as a parameter.
> >
> > Also, it probably helps to be realistic about the amount of data that the
> > browser can hold. I tested this puppy out with 250+ rows, each containing
> > 4 columns of string data (longest was 50 chars) and I started getting the
> > "Unresponsive script" warning in Mozilla. This was loading the data in
> > via
> > HTML, not sure if loading via JSON will improve things.
> >
> > MJH
> >
> > On 8/17/06, Tom Trenka <dojo-interest@...> wrote:
> >>
> >> Whoops, my apologies. It actually passes your filter function the value
> >> of
> >> the field for that particular column; I need to change the docs for that,
> >> thank you for the catch.
> >>
> >> You can optimize that function a little like so:
> >>
> >> function inspectRow(val){
> >> if (!val) return true;
> >> var filtText = document.myFilter.namefilter.value.toLowerCase();
> >> if (filtText) {
> >> return (val.toLowerCase().indexOf(filtText) >= 0);
> >> }
> >> return true;
> >> }
> >>
> >>
> >> trt
> >>
> >>
> >> Malaney J. Hill wrote:
> >> >
> >> > Wow, the filtering table is amazing!! I was able to cobble together a
> >> > filter without much
> >> > problem. I basically tied the "applyFilters" call to the onkeyup of a
> >> > textbox and specified a filter as you indicated. (Autocomplete="off"
> >> > helps big time). Here's my filter code, though know it is definitely
> >> > not optimized and doesn't deal with numeric values .... yet:
> >> >
> >> > ===============
> >> > function inspectRow(rowObj)
> >> > {
> >> > if (!rowObj) return true;
> >> > var filtText = document.myFilter.namefilter.value.toLowerCase();
> >> > if (filtText)
> >> > {
> >> > var rObj = rowObj.toLowerCase();
> >> > if (rObj.indexOf(filtText) >= 0)
> >> > {
> >> > return true;
> >> > }
> >> > else
> >> > {
> >> > return false;
> >> > }
> >> > }
> >> > else
> >> > {
> >> > return true;
> >> > }
> >> > }
> >> >
> >> > After getting this working, I wanted to try to filter more than one
> >> > row at a time. It was at this point that I realized I had to call a
> >> > seperate function to do this. It would be really nice to be able to
> >> > send parameters to the filter function. This way I don't have to
> >> > specify the filter input within the function itself. Could there
> >> > possibly already be a way to pass parameters to the filter call?
> >> >
> >> > Another minor detail is that you said that my filter would receive an
> >> > HTML Row as input when in fact it receives the data contained in the
> >> > column (i.e. Adam, David, etc ...). This is actually much easier to
> >> > parse than a row so I vote you keep it as is.
> >> >
> >> > Other than that, FilteringTable is definitely a marvelous piece of
> >> code.
> >> >
> >> > Bravo,
> >> >
> >> > Malaney
> >> >
> >> > On 8/15/06, Tom Trenka <dojo-interest@...> wrote:
> >> >>
> >> >> Right now, there aren't. But that's a relatively new piece of
> >> >> functionality,
> >> >> and I need to add that as a part of the test suite at some point.
> >> >>
> >> >> But here's the basics of it: a filter function return a boolean
> >> value,
> >> >> true
> >> >> if it satisfies your condition, and false if it doesn't. A custom
> >> >> filtering
> >> >> function should take an HTML Row as the argument, which you can
> >> inspect
> >> >> in
> >> >> any way you see fit.
> >> >>
> >> >> When you've written your filtering function, there are several ways of
> >> >> adding it to the widget:
> >> >>
> >> >> 1. in the column in question, like so:
> >> >>
> >> >> <th field="myField" filterusing="myFilterFunction">my field</th>
> >> >>
> >> >> Note that this is a reference (i.e. no parenthesis).
> >> >>
> >> >> 2. using [widget].setFilter:
> >> >>
> >> >> dojo.widget.byId("myTable").setFilter("myField", myFilterFunction);
> >> >>
> >> >> And to perform the filtering:
> >> >>
> >> >> dojo.widget.byId("myTable").applyFilters();
> >> >>
> >> >> This is all pretty new and it might change based on usage (so feedback
> >> is
> >> >> encouraged), but I think the API is pretty stable now.
> >> >>
> >> >> trt
> >> >>
> >> >>
> >> >> Malaney J. Hill wrote:
> >> >> >
> >> >> > Hello,
> >> >> >
> >> >> > I'm wondering if there are any examples available of adding
> >> filterers
> >> >> > to the FilteringTable widget. I'd like to be able to show/hide rows
> >> on
> >> >> > based on input received via text box.
> >> >> >
> >> >> > Thanks,
> >> >> >
> >> >> > MJH
> >> >> > _______________________________________________
> >> >> > Dojo FAQ: http://dojo.jot.com/FAQ
> >> >> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> >> > Dojo-interest@...
> >> >> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >> >
> >> >> >
> >> >>
> >> >> --
> >> >> View this message in context:
> >> >>
> >> http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5821097
> >> >> Sent from the Dojo forum at Nabble.com.
> >> >>
> >> >> _______________________________________________
> >> >> Dojo FAQ: http://dojo.jot.com/FAQ
> >> >> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> >> Dojo-interest@...
> >> >> http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >>
> >> > _______________________________________________
> >> > Dojo FAQ: http://dojo.jot.com/FAQ
> >> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> > Dojo-interest@...
> >> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >> >
> >> >
> >>
> >> --
> >> View this message in context:
> >> http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5855323
> >> Sent from the Dojo forum at Nabble.com.
> >>
> >> _______________________________________________
> >> Dojo FAQ: http://dojo.jot.com/FAQ
> >> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> >> Dojo-interest@...
> >> http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >>
> > _______________________________________________
> > Dojo FAQ: http://dojo.jot.com/FAQ
> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> > Dojo-interest@...
> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
> >
> >
>
> --
> View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf2110294.html#a5857861
> Sent from the Dojo forum at Nabble.com.
>
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest@...
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@...
http://dojotoolkit.org/mailman/listinfo/dojo-interest
« Return to Thread: Adding a filterer to FilteringTable widget
| Free embeddable forum powered by Nabble | Forum Help |
