I integrated Jquery Datatables with VueJS Here is my Code
I want to attach a method of my Vue compoenent to the button My Button:
row.push('<button #click="vm.buttonPressed()">My Button</button>'); //Add a method when button is pressed
How would I do that?
The idea behind a wrapper component is to separate the parts of the DOM that Vue gets to control from those that something else will control. Inside the data-table component, jQuery is in control of the DOM. Handle your events accordingly:
$(this.$el).on('click button', (event) => {
this.buttonPressed();
});
Have you ever tried building your table using Vue v-for directive for rendering the rows and then just invoking DataTable method on the resulting table?
That would be:
Build your table and rows as you would normally do by using Vue components.
Create a "DataTable" from it like so: $('#example').DataTable();
Take a look at this modified version I made from yours:
https://codepen.io/feload/pen/PJKoJP?editors=1010
Good luck!
Related
I am trying to implement a SAPUI5 App and I want to use the SmartVariantManagement.
I've implemented my app based on the following sample:
https://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smartfilterbar.SmartFilterBar/sample/sap.ui.comp.sample.smartfilterbar.example2/code
I know that I have to set the ID of the SmartVariantManagement for the SmartFilterBar as well as the SmartTable.
The problem is, that my FilterBar and the Table are wrapped inside different Fragement so I cannot refer to that ID.
So I tried to set the ID of the SmartVariant during runtime with the method "setSmartVariant" like this:
var oSmartVariantManagement = this.getView().byId("SmartVariantManagement");
oSmartFilterBar.setSmartVariant(oSmartVariantManagement.getId());
I am doing this in the init event of the filterBar but somehow it is not working and the Smart Variant doens't show any value.
Does anyone know if I have to set the ID in a different event?
I am using Angular 2 in my application to render a data table (table-component). there is situation where we need to insert more rows in the table between existing rows on click of a button.
We have Created a separate component (alternates) that calls the rest service and create the template of rows to be inserted.
<tbody [attr.id]="'alt_'+i" [style.display] = "displayRow != null && displayRow[i] && displayRow[i] === true ? '' : 'none'">
<alternates (success)="changeRowColor($event)"></alternates>
</tbody>
We are calling this component from table-component and able to load the Component on runtime, but the problem is all the table rows gets fit into single column (don't know why)
The weird thing is if we change something in dom it looks fine, so to fix this problem we manipulates the dom and replace the HTML with same html,
$("#rowid").html($("#rowid").html());
this way we fix the UI problem but after doing that we are not able to call any click event present in the alternates component.
Can you please give me any suggestion? How can I fix this problem.
In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!
In one of my projects I am using a Bootstrap table for displaying and manipulating data. I also use data-show-columns="true" in order to allow the user to show/hide needed columns in the table.
When it is used it messes up some of the styling in the table.
Is there any way that I can trigger the jQuery event or call JavaScript function when I use data-show-columns functionality of Bootstrap table?
This is a good example of a table with data-show-columns functionality. It is not my code. All I need is to somehow trigger the jQuery event on columns show/hide.
Thank you,
It should be:
$("#yourTableId").on("column-switch.bs.table", function() {
....
....
});
Say I have two different functionalities/filters (e.g. calculation and sorting) in form of plugins for a table. The user can choose which one he wants to use right now. But both together have conflicts and therefore when one is chosen, the other should be stopped/removed (without reloading the table itself). How can I achieve that?
For example I use the dataTable jQuery plugin which is initialized by
$('#myTable').dataTable();
But when the user chooses a different filter, I somehow need to 'deactivate' this plugin for the other filter to work without conflict. I tried the unbind event handler, but without success.
In general the logic would look like this:
$('.js_trigger').on('click', '.calculation' function() {
//Deactivate
$('#myTable').dataTable();
//Activate
$('#myTable').dataCalculation();
}
$('.js_trigger').on('click', '.sorting' function() {
//Deactivate
$('#myTable').dataCalculation();
//Activate
$('#myTable').dataTable();
}
I hope you get what I mean and that this question is not to broad.
Solution:
With the hint of #V31, I made use of the empty() function.
1.) On page load I put all the content from the table in a variable before any additional scripts change the table.
tableContent = $('#myTableContainer').html();
2.) When a different plugin needs to be loaded I empty the container and add the content of the variable before I execute the plugin.
$('#myTableContainer').empty();
$('#myTableContainer').html(tableContent);
$('#myTable').dataTable();
You can empty the parent div (of that element) so that the binding is removed. Something like this:
$('#myTable').empty();