Is there a way to determine if a variable is an initialized DataTable or not? I assumed $.fn.dataTable.isDataTable() could be used, but this only works for table selectors, not for variables containing an initialized DataTable. This function is returning false for such variables:
var table = $("#table").DataTable(); // Valid initialized DataTable
console.log($.fn.dataTable.isDataTable("#table")); // Returns true
console.log($.fn.dataTable.isDataTable(table)); // Returns false...why?
Since $.fn.dataTable.isDataTable() cannot be used to check a variable, is there another way to see if such a variable is an initialized DataTable? I'm basically trying to do this:
if (isDataTable(variable)) {
// datatable ... do datatable stuff
} else {
// not a datatable... do other stuff
}
I asked this question to the creator of DataTables, and he suggested using instanceof:
var table = $("#table").DataTable(); // Valid initialized DataTable
if (table instanceof $.fn.dataTable.Api) {
// datatable ... do datatable stuff
} else {
// not a datatable... do other stuff
}
This approach works exactly as needed. He also went on to extend $.fn.dataTable.isDataTable() in this commit so that it will allow variable inputs.
You don't need to pass an JQuery instance to isDataTable().
isDataTable() requires an ID.
For more information : isDataTable()
Please check this:
How to check if DataTables are initialized
From Documentacion of DataTable:
https://datatables.net/reference/api/$.fn.dataTable.isDataTable()
This method provides the ability to check if a table (tag) node is already a
DataTable or not. This can be useful to ensure that you don't
re-initialise a table that is already a DataTable.
Related
The accessibility of a Tabulator Table by a global variable works fine, but i can't realy use global Variables, because i'm dynamically generating new Tables.
I just want to access the Tabels by their Container ID.
The code below shows accessability by global variable "table" and by ID, which is provided by the examples (http://tabulator.info/examples/4.3#adddel), but does not work.
See my JSFiddle example of this: https://jsfiddle.net/vs43re6p/41/
$('#button').click(function() {
table.addRow({});
});
$('#button2').click(function() {
$("#example-table").tabulator("addRow", {});
});
What am i doing wrong?
If you want to use jQuery selection you need to have the Tabulator jQuery wrapper installed:
http://tabulator.info/docs/4.3/install#setup-jquery
Maybe something like this...
$('#button2').click(function() {
const table = new Tabulator("#example-table");
table.addRow({});
});
or
(function() {
const table = new Tabulator("#example-table");
$('#button2').click(function() {
table.addRow({});
});
})();
As long as you are using Tabulator 4.5 or above you can lookup a table by the element ID by using the findTable function on the Tabulator prototype
var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table
The findTable function will return an array of matching tables. If no match is found it will return false
Full details can be found in the Options Documentation
I have below code
$.fn.dataTableExt.aoFeatures.push({
"fnInit": function (oSettings) {
oSettings.oScroll.sY = 5;
return { "oSettings": oSettings } ;
},
"cFeature": "T"
});
$.extend($.fn.dataTable.defaults, {
//"scrollY": 5,
"dom":"T"
});
I can see scrollY changed in function but no effect in datatable, How can overwrite the default setting using this function, since i have to put condition ono tableid,
otherwise I could have done below way which is working
$.extend($.fn.dataTable.defaults, {
"scrollY": 5,
});
I believe I am missing something on return statement which will override the things
fiddle reference
You code is not working for a few reasons. First, you are using an outdated API. $.fn.dataTableExt.aoFeatures.push is the old API used with $(...).dataTable(). By using $(...).DataTable() (note the capital "D") as you did in your fiddle, you are choosing to use the new API. (Read about converting code using the old API to use the new API here.) Using the current API is a great choice, but you then need to use $.fn.dataTable.ext.feature.push to set up your feature.
This works:
$.fn.dataTable.ext.feature.push({
"fnInit": function (settings) {
settings.oScroll.sY = 25;
},
"cFeature": "T"
});
However, the dom feature is intended to indicate the order of elements in the table. Using it to set style like scrollY is OK, but not exactly what they had in mind. The point being that if you are going to specify dom at all, you have to specify all the elements you want. In particular, you have to specify t for table or else the DataTable will not attach itself to the table at all. So you need to set up your table with something like this to trigger your scrollY "feature":
$(document).ready(function() {
var table = $('#example').DataTable({
"dom":"Tlftip"
});
Note that the order matters. The "T" has to come before the other elements that are affected by the changes made in the feature. "dom":"lftipT" will not have the desired effect.
I have datatable and table have ID example.
Now I need to destroy datatable and I write:
$('#example').dataTable().fnDestroy();
but I get:
Uncaught TypeError: Cannot read property 'style' of undefined
also this I get in console log:
What is the problem here? Why can't I destroy the datatable? How to solve this?
For latest version of datatables use:
$('#example').DataTable().destroy();
Refer to this for more: https://datatables.net/reference/api/destroy%28%29
For older versions use as stated by Hobo Sapiens:
$('#example').DataTable().fnDestroy();
Here's what eventually worked for me with v1.10.
// Define a variable for your dataTable object to use
var reportListDataTable = null;
// Then inside a function/method somewhere...
// Destroy the dataTable and empty because the columns may change!
if (reportListDataTable !== null ) {
// for this version use fnDestroy() instead of destroy()
reportListDataTable.fnDestroy();
reportListDataTable = null;
// empty in case the columns change
$('#reportListTableId').empty();
}
// Build dataTable with ajax, columns, etc.
reportListDataTable = $('#reportListTableId').dataTable({
//... Your dataTables code here
});
what worked for me is destroy the dataTable on click of a insert button rather on the fetch data button. So the button that destroys the dataTable is not recreating the table. And some other function that is called from other button click creates the dataTable.
code is simple :
Button that destroys dataTable:
var otable = $('#claimRecordTable').dataTable();
if (otable != null) otable.fnDestroy();
button that created dataTable:
$('#claimRecordTable').dataTable();
I'm trying to use tablesorter.js but im running into issues when using ajax to update my table. I followed the code on this page but it doesn't seem to be working properly. One thing i also notice is that the code doesnt work properly even on the example website. When i click "append new table data" it adds the data to the table but it isn't sorting it correctly. If i copy the javascript code and paste it into the console, it works fine and sorts the table correctly. The code im using is the following:
var updateTableSort = function(){
var table = $('#transaction-table')
//tells table sorter that table has been updated
table.trigger("update");
//re sorts after table has been updated based on
//current sort patern
var sorting=table.get(0).config.sortList;
table.trigger('sorton', [sorting]);
}
Again, if i copy and past this into console it works fine, but when i have it in my success ajax function, it doesnt sort the table properly. Any help figuring out what the issue is would be greatly appreciated
Try my fork of tablesorter. It automatically resorts the table after an update:
// pass anything BUT false and the table will resort
// using the current sort
$("table").trigger("update", [false]);
Here is the updated append data to the table using ajax demo:
$(function() {
$("table").tablesorter({ theme : 'blue' });
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
// the resort flag set to anything BUT false (no quotes) will
// trigger an automatic
// table resort using the current sort
var resort = true;
$("table").trigger("update", [resort]);
// triggering the "update" function will resort the table using the
// current sort; since version 2.0.14
// use the following code to change the sort; set sorting column and
// direction, this will sort on the first and third column
// var sorting = [[2,1],[0,0]];
// $("table").trigger("sorton", [sorting]);
});
return false;
});
});
I am trying to use a jQuery extension I came across (handsontable). I am having no problem creating the table
var spreadsheet = $("#dataTable").handsontable({
rows: 3,
cols: 15,
minSpareRows: 2
});
However after I create the table I want to call various helper functions I see declared in the javascript for the Handsontable object. The problem is the extension seems to return this.each(function() { ... }); and I don't understand how I can access the underlaying Handsontable object from this. The js for the extension can be found here and I put a small demo together on the following link
http://jsfiddle.net/7JTG2/7/
as you can see I would like get the data of one of the cells when I click a button.
The relevant code is in the end:
$.fn.handsontable = function (action, options) {
if (typeof action !== 'string') { //init
options = action;
return this.each(function () {
if($(this).data("handsontable")) {
instance = $(this).data("handsontable");
...
} else {
...
instance = new Handsontable($(this), currentSettings);
$(this).data("handsontable", instance);
}
});
}
}
That means, the code sets the Handsontable instances as a data attribute to the elements (and returns the selected set to be chainable). Having one element, you can easily extract it with instance = $el.data("handsontable"). If you have a set of elements, you will need to loop over it - e.g. with each().
Looks like you could just use the onChange method of the plugin to capture data every time it is entered automatically. No need for a button. A simple example to add to your code above.
onChange: function(data) {
$("#data").append(JSON.stringify(data));
}