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();
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'm new to JQuery and I'm trying to define a JQuery function with the purpose of edit a table row: a modal asks for the new values and then, the function update the table row content. But when I select the row I want to edit, the variable in which the row was stored "accumulates" all the previous rows that have been edited in the same object and when I try to update the new values to this single row, all the rows edited before receive and show the same value. Why is this happening?
I'll show you the code:
$("#table").on("click", ".edit", function() {
var table = $("#table").DataTable();
var row = $(this).closest("tr");
//getting the <tr> content with Datatables API:
var values = $table.row(row).data();
$("#name").val(values[0]);
$("#surname").val(values[1]);
$("#city").val(values[2]);
$("#myModal .modal-footer").on("click", "#confirm", function() {
var newValues = []
//getting the <tr> content with Datatables API:
//this alert appears as many time as many rows have been changed
alert($table.row(row).data());
//deleting the old data from the server...
//getting the new values:
newValues.push($("#name").val());
newValues.push($("#surname").val());
newValues.push($("#city").val());
//adding the new date to the server...
$("#myModal").modal("hide");
//update the html table:
table.row(row).data([newValues[0], newValues[1], newValues[2]]);
});
});
As I've explained before, the variable "row" in the .on("click")
function "accumulates" all the rows that have been edited before.
I thought it was a scope probelm, so I've also tried to call an extern function which basically did the same things and took advantage of the event.data object:
$("#confirm").on("click", {table: table, row: row}, edit);
but with no luck. If any one can help me or even provide me some advice or documentation, it would be very appreciated.
You have to use two different and independent functions using an external variable to connect them; you can't use .on() in a nested way
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.
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;
});
});
Im trying to refresh the Drop Down List after another DropDownList is Change But the Refresh() method is Undefined Error Is Promoting.There For I Tried the Read the DataSource again and it shows it loading but the data is still the same.Help to Solve this Issue please.
Code:
$("#DropDownList1").change(function () {
custCode = $("#DropDownList1").val();
$("#titles").data("kendoDropDownList").dataSource.read(); //shows list Loading But Same Data Is present .
$("#titles").data("kendoDropDownList").refresh(); //NOT Working
});
1- Try adding cache: false to disable the cache in Kendo DropDownList's datasource read property:
read: {
url: <<"url">>,
cache: false
}
2- Then call read(),
$("#ddl").data("kendoDropDownList").dataSource.read();
It worked for me :)
For me just this line did the job:
$("#myDropDownList").data("kendoDropDownList").dataSource.read();
You might find passing parameters to the ".data()" of the dataSource useful.
Example:
var myDataSource={bookId: 10, Name: "Kendo"}
$("#titles").data("kendoDropDownList").dataSource.data(myDataSource);
However, you could also try the cascadingFrom attribute of the DropDownList when you want to update one DropDownList based on the selection of another DropDownList
//Houdini
on your read url add '?myDate=' + new Date(). This will refresh the data. Without it (unless you have meta tags to prevent caching) it will give you that data it has already read.
In my case I commented the line
//cascadeFrom: "dropdown1_id"
on the second kendo dropdown and it worked, for some reason it was messing with the data source updates.
Looks like the Kendo dropdownlist has changed. Now the answer is:
var dataSource = new kendo.data.DataSource({
data: my_new_json_list
});
var dropdownlist = $("#products").data("kendoDropDownList");
dropdownlist.setDataSource(dataSource);
Reference: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/setdatasource