Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ampersand-collection-jquery-datatable
Advanced tools
Readme
add
, remove
, update
), and be displayed immediately, without having to get into the dataTable API on your own. This library updates DataTable rows and columns as their corresponding collections change. However, you are technically not required to use collections for either (rows/columns), and instead may use arrays.How refreshing.
var CollectionTable = require('ampersand-collection-jquery-datatable'); // long name :)
// Generate a config of the following form:
var config = {
el: raw_DOM_node_for_table, // e.g. this.queryByHook('my-table')
collection: myCollection, // OR ...
dtOptions: {
// datatable constructor options
},
dtClasses: 'display compact' // sugar for adding some styles
};
...
// inside a view
render: function() {
var myCollDataTable = new CollectionTable(config)
}
...
To see other options, check the contructor DocBlock. The latest should always be maintained here, too:
/**
* Constructor
* @param {options} object {
* collection: {AmpersandCollection}, // assumes `rows`, OR use...
* collections: {
* rows: {AmpersandCollection|Array},
* cols: {AmpersandCollection|Array} // overrides dtOptions.columns. Contained
* // states should have .title, .data, & .id attr
* }
* el: {Element}, // dataTable target
* dtOptions: {Object}, // dataTable config. Set the `data` (rows) and `columns` props as reqd
* dtClasses: {String=}, // class(es) to be applied to the target element/table
* noToolbar: {Boolean=}, // hide the datatable toolbar
* renderer: {Function=} // delegate a custom function to init the dataTable.
* // renderer receives `($el, modified-dtOptions)`,
* // and should return the result of `$el.DataTables(...)
* }
* @return {CollectionDataTable}
*/
stateNodes
- Access the row DOM node for you state/model by peeking at yourCollectionTable.stateNodes[yourModel.cid]
var jQuery = window.jQuery = require('jquery'),
Collection = require('ampersand-collection'),
Model = require('ampersand-model'),
TestModel = Model.extend({ props: {a: 'string', b: 'string'} }),
CollectionTable = require('../../ampersand-collection-jquery-datatable'),
datatables= require('datatables'),
domready = require('domready');
var colDefs = [{title: 'a', data: 'a'}, {title: 'b', data: 'b'}];
var dummyData = [
new TestModel({a: 'a1', b: 'b1'}),
new TestModel({a: 'a2', b: 'b2'})
];
domready(function() {
var $myDt = jQuery('#myTable');
var TestCollection = Collection.extend({
indexes: ['a', 'b'],
model: TestModel
});
var dummyCollection = new TestCollection();
var acjd = new CollectionTable({
collection: dummyCollection,
el: $myDt[0],
dtOptions: {
data: dummyData,
columns: colDefs
}
});
// Test add/remove/update
var newObj = new TestModel({a: 'new', b: 'new'});
dummyCollection.add(newObj); // dataTable responds, adds row!
// remove obj
var removeObj = new TestModel({a: 'REMOVE', b: 'REMOVE'});
dummyCollection.add(removeObj);
dummyCollection.remove(removeObj); // dataTable responds, removes row!
// change
dummyCollection
.add({a: 'needs-to-be-updated', b: 'needs-to-be-updated'});
var toChange = dummyCollection.get('nees-to-be-updated', 'a');
toChange.a = 'updated-successfully';
toChange.b = 'updated-successfully';
// dataTable responds, deletes old row, adds row with new data back in
// as your model changes. Note: if your model changes a lot, this is expensive
// re-drawing. A debounce may worth implementing, or simply refreshing the row
// from an updated data source
});
init.dt
event and initComplete
options may yield unexpected behavior. Post-initialization of a ACJD, an empty table is drawn. CollectionTable then immediately adds row data, and re-draws. Your defined initComplete
is executed then. The init.dt
(or similair) event is not rethrown. PRs are welcome in this regard.deferRender
in dtOptions
prevents CollectionTable.stateNodes
from storing valid DOM nodes, as DOM nodes aren't built immediately!reset
event from collection as well and re-draws datatable with new data.deferRender
is activated, still be able to locate data to update, regardless if a DOM node is built or not. (handle no node in cid
store)options.dtOptions
(all pass in of read-only .dtOptions
)classes
from old tr
to new tr
onchange. Additional attrs may need consideration as wellchange
on the collection--rows are no longer deleted and re-added. Instead, the .data()
setter is used, even if the data pointer is the same as the original, which triggers a view update on that row.initComplete
handling update. initComplete must be called after the table is instantiated due to the way that the table data is populated in CollectionTable. Additionally, .$dt
now points to the actual DT instance, and .$api
points to a .$dt.api()
..stateNodes
.renderer
option. some users have pre-defined utilities to pipe table options thru prior to initializationFAQs
Renders ampersand-collections via jQuery DataTables
The npm package ampersand-collection-jquery-datatable receives a total of 22 weekly downloads. As such, ampersand-collection-jquery-datatable popularity was classified as not popular.
We found that ampersand-collection-jquery-datatable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.