Develop Reference

Multi-row selection on Lazy Loaded jQuery Datatable

I'm using a lazy loaded(Deferred) jQuery Datatable and trying to add multi-row selection too. However, when I click on another page of the datatable, the selected rows from the previous page was cleared.
// this is how to multi-select
$('#table tbody').on( 'click', 'tr', function()
{
$(this).toggleClass('selected');
});
Lint to deffered loading datatable: https://datatables.net/examples/server_side/defer_loading.html
Note* Instead of using the server-side processing script, I've created a php function for datatable ajax.
The result I wanted is to multi-row select the lazy loaded jQuery datatable on each pages without being cleared when navigated to another page.
Anyone experienced the same situation?

Okay, I found an answer already. There's jQuery datable callback called "createdRow". Made a conditional statement to acquire the result I needed.
Here's the link to it: https://datatables.net/reference/option/createdRow

VueJS Jquery Datatable Integration: Attach method to dynamic html element

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!

Hide grid Panel Column programmatically ExtJs 5

I want to hide a column in grid panel of ExtJs 5 when store associated with grid panel loads .

Depending on how your data store works.... there is onload event. Hide your column on that event.

Using the following syntax you can achieve it:
<yourGrid>.down('headercontainer').getGridColumns()[<columnIndex>].hidden = true;

If you know the index of the column to hide you can use this code after store load event fired
grid.getColumnManager().getHeaderAtIndex(indexOfColumn).hide()

You can find the api from manual [Ext.grid.column.Column-method-hide]: http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Column-method-hide
There is a fiddle for you: http://runjs.cn/code/qusp7pql

Remove jQuery plugin without reloading content

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();

Table drag and drop (holding only one column)

I wanted to do draggable table rows, I found TableDnD jQuery plugin and it works fine
$(function() {
$("table").tableDnD();
});
As you can see there:
http://jsfiddle.net/drBfS/1/.
But I wanted to make only one column draggable. I mean, whole row (tr) is moved like now, but you can move row only by dragging left column (td.drag), when trying to drag right column it should be no effect. Have you got any idea how it can be done?

It appears that this is an older plugin, where it might have been possible to do this at one point, according to this document: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
However, after looking through the source now, it is no longer possible. Instead, perhaps consider simply using jQuery UI sortable. If you wrap your rows in a tbody, this code will get you what you want:
jQuery(function () {
jQuery('table tbody').sortable({ handle:'.drag' });
});

Unfortunately, it's not possible with the TableDnD plugin. That plugin was designed to enable row dragging, not column dragging.
From the documentation:
This TableDnD plugin allows the user to reorder rows within a table