Yep, it was a rewrite - the new one has bundles more functionality and configuration options. Another option for you is to stay with the previous SearchPane if that works for you, it won't be supported or developed further, but it won't be removed either.
Just a note here for people who would stumble on the previous discussions about rebuilding the panes after and AJAX reload, using searchPanes.rebuildPane() as proposed here certainly works, but is not optimal as it will essentially double the initialization work, which is already triggered by the xhr event listener.
There is a small bug preventing the panes from being displayed in some situations, but a fix (PR) has been propsed and I'm awaiting maintainers comments on it.
Hi, I was trying to implement searchpanes with serverside proccessing but i am not sure if it is supported. Could you confirm if this is so?
If so, could you send me some examples please ?
Thanks !
I am trying to implement searchPane in Office 365 SharePoint list, but I am getting this error "Unable to set property 'select' of undefined or null reference" in
dataTables.select.min.js (24,304)
Could you please help, this feature would save me lot of time.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Search panes are excellent, however there are a few refinements which I believe will make a significant difference to some people using them
We have some large tables (3000 rows ish, and 40 columns wide!), so search panes can take 2-3 seconds to do its thing.
Given alot of time filters are not in play by the user, and that we hide the searchpanes by default it would make more sense if the search panes load was not performed on load of the table, but on click of the 'filters' button (e.g. when the user wants to use it)
This would not be the case when save state is in play and a state for the searchpanes is active.
Thanks for the feedback. You can see the code that SearchPanes uses for it's buttons here. We can take this and edit it slightly to get the behaviour that you are looking for. Take a look at this example.
What I have done is move the SearchPanes initialisation outside of the init function and into the action function. I've also added a check to make sure that SearchPanes only initialises once.
Hello, I try use searchPane with Angular, I install extension by NPM and add dependency angular.json. I config button for use searchPane but when start I receive back this message "SearchPane requires Select at new SearchPanes".
Have you any idea what I forget ?
I tried it but it didn't work, in fact, columns are shown but only two are shown (while three are expected).
I thought it is about threshold as the third column is always unique, so I set it to 0 (right ?). so even with threashold 0 the third column is not shown. See the capture please.
ps: At least, if not present in search pane, at least I want the third column to display in table.
thank you @kthorngren for your help,
bizarre because the capture works for me. ok, but my data is not Ajax sourced. it is a plain array of arrays see my comment above.
Strange that it doesn't show for you Kevin! I can see the capture and it looks like you are using the oldest version of SearchPanes that this post originally discussed. Since then it has been developed into a fully supported extension. Because you are using such an old version, none of the current initialisation options will work on it.
Take a look at this page to get it set up properly.
I lost somehow the search pane when re-setting assets as suggested by @sandy
but thanks to the example of @colin I added dom: 'Plfrtip' which showed a very nice updated searchpane (with sort and other stuff I didn't see before updating assets).
Now, again, my data sourced example AND also tried the example of @kthorngren but with search panes, I have an error when specifying columns, (probably it has to do with JQuery version or something); but with columnDefs.searchPanes.show = true, no errors but always only 2 columns. I will work on a reproducible example tomorrow and post it on JS Bin.
Thank you all for your help !!
also this is very important I think , @colin your example worked as expected with my setup, so I think the only difference is with the source of data. In your example is dom itself, in mine it is an array. So the source of the problem is probably "search pane with array data source" ... I will try to confirm this with an example tomorrow
Hi @colin
This is based on your example, I cleaned "dom" from table content and added a dataset.
Here are results:
1- A table without any search-pane, with "columns" defined.
2- Nothing showing at all when columns are not defined.
Always with columnDefs#searchPanes = true link
with my setup is the same behavior
Oh thanks you all, I finally made it work with this config
$('#table_id').DataTable(
{
data: result.tags,
dom: 'Plfrtip',
// data: dataSet,
columns: [
{ title: "EMAN" },
{ title: "Position" },
{ title: "Office" }
],
columnDefs: [{
targets: '_all',
searchPanes: {
show: true
}
}]
}
);
On my table in dom it was not empty, I have the header defined and that messed with the data sources method. I am sorry for this dump fault of mine,
so thank you all and sorry for a lot of comments meanwhile. have a nice day
The search pane is awesome but
Can you please implement the search pane on button press
as in in set the filter then click on button and then it shows me the data.
Incase this is already implemented please guide me on the same
This is the first request we have had for something along those lines. It's also not something we can see a lot of use for as that isn't too dissimilar from just selecting the row. Because of this we aren't planning on integrating any behaviour like that.
When you select Accountant there are 2 results. Now, additionally select Chief Executive Officer (CEO). You'll see 3 results. I'd like to see 0 results since there are no Accountants that are also CEO's.
Replies
Yep, it was a rewrite - the new one has bundles more functionality and configuration options. Another option for you is to stay with the previous SearchPane if that works for you, it won't be supported or developed further, but it won't be removed either.
Colin
Just a note here for people who would stumble on the previous discussions about rebuilding the panes after and AJAX reload, using searchPanes.rebuildPane() as proposed here certainly works, but is not optimal as it will essentially double the initialization work, which is already triggered by the
xhrevent listener.There is a small bug preventing the panes from being displayed in some situations, but a fix (PR) has been propsed and I'm awaiting maintainers comments on it.
Hi, I was trying to implement searchpanes with serverside proccessing but i am not sure if it is supported. Could you confirm if this is so?
If so, could you send me some examples please ?
Thanks !
Hi @alecko,
It is not supported in version 1.0.1 but it will be in 1.1, which isn't far away from being released.
Thanks,
Sandy
I am trying to implement searchPane in Office 365 SharePoint list, but I am getting this error "Unable to set property 'select' of undefined or null reference" in
dataTables.select.min.js (24,304)
Could you please help, this feature would save me lot of time.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi all
Search panes are excellent, however there are a few refinements which I believe will make a significant difference to some people using them
We have some large tables (3000 rows ish, and 40 columns wide!), so search panes can take 2-3 seconds to do its thing.
Given alot of time filters are not in play by the user, and that we hide the searchpanes by default it would make more sense if the search panes load was not performed on load of the table, but on click of the 'filters' button (e.g. when the user wants to use it)
This would not be the case when save state is in play and a state for the searchpanes is active.
This is our table in its loaded format:
https://i.imgur.com/6vPrK4b.png
And then when you press the filters button:
https://i.imgur.com/W4HWdxv.png
Anyone got any pointers on how we could impliment this, or appraches to help out with
Hi @matt_senses ,
Thanks for the feedback. You can see the code that SearchPanes uses for it's buttons here. We can take this and edit it slightly to get the behaviour that you are looking for. Take a look at this example.
What I have done is move the SearchPanes initialisation outside of the init function and into the action function. I've also added a check to make sure that SearchPanes only initialises once.
Hope this helps,
Sandy
Hello, I try use searchPane with Angular, I install extension by NPM and add dependency angular.json. I config button for use searchPane but when start I receive back this message "SearchPane requires Select at new SearchPanes".
Have you any idea what I forget ?
Thanks
M.
As the message said, you need to also install the Select extension - SearchPanes is dependent upon it.
Colin
Hi @allan
This plugin is amazing so thank you very much for this gift.
I have a small problem though as it doesn't seem to include all columns. So my data is like
0: Array(3) [ "Animals & Pet Supplies", "Pet Supplies", "Bird Supplies" ]
1: Array(3) [ "Animals & Pet Supplies", "Pet Supplies", "Cat Supplies" ]
2: Array(3) [ "Animals & Pet Supplies", "Pet Supplies", "Dog Supplies" ]
3: Array(3) [ "Animals & Pet Supplies", "Pet Supplies", "Fish Supplies" ]
4: Array(3) [ "Animals & Pet Supplies", "Pet Supplies", "Pet Agility Equipment" ]
but with thousands of entries.
I want the table to include three columns, so this is how I set configs:
searchPane: true
threshold: 0
However I am getting only the first two columns.
Is there a problem in my data or configurations ?
Thanks @allan
@bacloud14 The easiest way would be use
columns.searchPanes.showto force the panes to be displayed, see example hereColin
thank you @colin for your help,
I tried it but it didn't work, in fact, columns are shown but only two are shown (while three are expected).
I thought it is about threshold as the third column is always unique, so I set it to 0 (right ?). so even with threashold 0 the third column is not shown. See the capture please.
ps: At least, if not present in search pane, at least I want the third column to display in table.
thanks
@bacloud14
Your image link doesn't show the image. Do you have three columns defined in your
thead? See this example of using arrays:https://datatables.net/examples/data_sources/ajax.html
Kevin
thank you @kthorngren for your help,
bizarre because the capture works for me. ok, but my data is not Ajax sourced. it is a plain array of arrays see my comment above.
thanks
@bacloud14
Ok. Here is a Javascript sourced array example. It shows the same thing with the
theadhavingth's defined for each column. Is this what you have?This is what I see:
As per the forum rules please post a link to your page or a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi @bacloud14 ,
Strange that it doesn't show for you Kevin! I can see the capture and it looks like you are using the oldest version of SearchPanes that this post originally discussed. Since then it has been developed into a fully supported extension. Because you are using such an old version, none of the current initialisation options will work on it.
Take a look at this page to get it set up properly.
Thanks,
Sandy
@sandy ok, then I will try to setup again and come back;
thanks Sandy
I lost somehow the search pane when re-setting assets as suggested by @sandy
but thanks to the example of @colin I added dom: 'Plfrtip' which showed a very nice updated searchpane (with sort and other stuff I didn't see before updating assets).
Now, again, my data sourced example AND also tried the example of @kthorngren but with search panes, I have an error when specifying columns, (probably it has to do with JQuery version or something); but with columnDefs.searchPanes.show = true, no errors but always only 2 columns. I will work on a reproducible example tomorrow and post it on JS Bin.
Thank you all for your help !!
also this is very important I think , @colin your example worked as expected with my setup, so I think the only difference is with the source of data. In your example is dom itself, in mine it is an array. So the source of the problem is probably "search pane with array data source" ... I will try to confirm this with an example tomorrow
@bacloud14 Without seeing it, it's hard to say. If you could update my example to demonstrate the issue, we can take a look,
Colin
Hi @colin
This is based on your example, I cleaned "dom" from table content and added a dataset.
Here are results:
1- A table without any search-pane, with "columns" defined.
2- Nothing showing at all when columns are not defined.
Always with
columnDefs#searchPanes = truelink
with my setup is the same behavior
Oh thanks you all, I finally made it work with this config
$('#table_id').DataTable(
{
data: result.tags,
dom: 'Plfrtip',
// data: dataSet,
columns: [
{ title: "EMAN" },
{ title: "Position" },
{ title: "Office" }
],
columnDefs: [{
targets: '_all',
searchPanes: {
show: true
}
}]
}
);
On my table in dom it was not empty, I have the header defined and that messed with the data sources method. I am sorry for this dump fault of mine,
so thank you all and sorry for a lot of comments meanwhile. have a nice day
No worries, glad all sorted!
Colin
The search pane is awesome but
Can you please implement the search pane on button press
as in in set the filter then click on button and then it shows me the data.
Incase this is already implemented please guide me on the same
Hi @valredr ,
This is the first request we have had for something along those lines. It's also not something we can see a lot of use for as that isn't too dissimilar from just selecting the row. Because of this we aren't planning on integrating any behaviour like that.
Thanks,
Sandy
Can SearchPanes be configured to allow an AND condition vs. an OR?
Given the example at https://datatables.net/extensions/searchpanes/examples/initialisation/simple.html
When you select Accountant there are 2 results. Now, additionally select Chief Executive Officer (CEO). You'll see 3 results. I'd like to see 0 results since there are no Accountants that are also CEO's.
Hi @brandons,
Yes it is possible using the
columns.searchPanes.combinerinitialisation option.Thanks,
Sandy
Awesome. Works great. Can't believe I missed that in the documentation. Thanks!
Hi, @colin
I'm still hoping for accessibility for the search pane input box. **SiteImprove **says that the input box has no description.
It also says that the column headers Element is not highlighted on focus. That may be only if the columns are sortable.
I'm using the chrome extension, SiteImprove, to do the accessibility scanning.
Cheers,
Ray