Implementing custom search in datatables.net with angular 4 - datatables

I'm trying to implement a simple custom search on a column.
This is well documented at https://datatables.net/examples/plug-ins/range_filtering.html.
However my (so far) only problem is accessing the $.fn.dataTable.ext.search array, to add and later remove my custom search function.
What is the path for this array, when going through angular-datatables?
Thanks in advance for your help.
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance. <-- what goes here?
});

Was solved by the developer at https://github.com/l-lin/angular-datatables/issues/1111
It was because the typings were not complete, when using typescript in angular.
Correct reference is $.fn['dataTable'].ext.search

Related

Filtered array in PrimeVue datatable?

I am new in primevue. I am using the datatable with filtering. I face a problem.
I want to access the array after the filter applied. But do not find any API to do that.
Can anyone help me? Thank you.
I used a slightly different approach (using primevue 2.x). I added an event handler for the filter event. Then the filtered data is available in the event.filteredData property (this is documented in events section under the primevue Datatable documentation).
In a nutshell:
In datatable element in template, add v-on:filter="onFilter"
In code, add following handler:
onFilter: function(event) {
console.log(event.filteredValue);
},
Filters are stored as an object in your local state. Try using the Vue.js devtools extension to see the format of that object.

Vuejs directive masonry detect prepend to array and redraw properly

I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.

Polymer 1.0: I need a working example of <google-signin-aware>

Question:
Can someone please provide a working code example of how to use <google-signin-aware>?
I have a custom <paper-button> I'm trying to make a login button for Google.
Here is the user documentation.
Here is the Github repository.
Probably the best example for using google-signin-aware is the google-signin element itself.
Essentially what you have to do is to include google-signin-aware with the required attributes and then call the signIn method on this element.
<google-signin-aware
id="aware"
client-id="..."
scopes="..."
...
is-authorized="{{isAuthorized}}"
></google-signin-aware>
<paper-button on-tap="_signIn">Sign In</paper-button>
_signIn: function () {
this.$.aware.signIn();
}

Jquery with other libraries

I am getting an error message as element.dispatchEvent is not a function. I am using jQuery with prototype in rails 3 application. In my layout file, I have added the js files as below
javascript_include_tag 'jquery','jquery_ujs','prototype','shadowbox/shadowbox.js'
<script type="text/javascript">jQuery.noConflict();</script>
I have also added jQuery.noConflict as above and used jQuery instead of $ in jQuery functions. Any idea how to resolve this.?
In my another controller page action I have also mentioned the same thing as there are some js files which needs to be reloaded only for that particular page.
I am a newbie in js as well as rails also.
you should use jQuery.noConflict right after src to the jQuery library
Using jQuery.noConflict(); should be enough. Please check the code of the page in your browser so you can see when prototype is actually added.
You should have jQuery, then the .noConflict call, then prototype.
Besides adding the 'no conflict' method, I do this instead (though both would probably be best):
I'll 'preset' my custom script page. Let's say my prediction is that I will use maybe 5 blocks of code in a page - this is how I preset my page:
jQuery(document).ready(function($) {
// use $ in here like normal!
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
etc. etc.
Notice this uses the jQuery object itself to pass as the callback function to the .ready method so you can once again use the $ identifier within the functions. I can rename it so their will never be a conflict, and I can use the $ identifier within the function like I normally would. Hope that helps.

Joomla question about custom module

I'm very new to Joomla. I have a question about components/modules.
I'm doing the development of a site for a firm and they provided me with custom news releases component that's supposed to show on the home page. From what I've seen, I can call modules to a page with "" based on their position.
Do I do the same sort of thing to get this component to display? Can anyone help me out please. Let me know if I'm not being clear.
EDIT: I figured out that I have to add this as a menu item, but this makes it into it's own page. I want this just as a module on the right of the home page. What do I need to do to achieve this?
Thank you
if this is a component than you won't be able to display it in a module position. You will have to write a new module to do that or use some modules which wrap around other types of content. See here, maybe this plugin will fit.
If this is a component you can also use the Component Loader extension to load the component output in a module position.
http://extensions.joomla.org/extensions/core-enhancements/embed-a-include/10721