I am creating datatable and adding rows through jQuery like below. First column in the datatable is radio button.
var hostTable = $('#hostTable').DataTable();
var newRow = "<tr><td><input name='hosts' type='radio' value='-1'/></td><td>test</td><td>test</td><td>test</td></tr>";
hostTable.row.add($(newRow)).draw(false);
On button click, I would like to get name for the radio button. I have following code, but getting
TypeError: settings.aoColumns[column].attr is not a function
Here is the code:
hostTable.columns().iterator('column', function (settings, column) {
alert(settings.aoColumns[column]);
var tempId = settings.aoColumns[column].attr('name');
alert(tempId);
});
How can I get attr of a first td from datatable? Any help would be appreciated.
Note: I am using latest datatable, so not using any fn.. functions.
The problem is that .attr() is a jQuery method. Make sure you include this library in your project and try wrapping your element in a jQuery object before calling the function.
var tempId = $(settings.aoColumns[column]).attr('name');
Related
I think this is a repeated question, but I see all the answers and nothing clear?
I used data tables in my MVC app and everything works perfectly, till I add a new row to this datatable using
table.api().row.add
after that, I assigned row id using two methods then draw
1-
row.nodes().to$().attr('id', ID)
2-
row.node().id = ID
When I try to get the newly added row id using row.id its undefined and row.data not contain dt_rowid at all.
In HTML I can see the id correctly added
How to get the id for the newly added row
Please help me
var table = $('#myTable').DataTable();
table.rows().every(function () {
var data = this.data();
var id = this.id();
console.log('Data id: ' + id);
});
Try this. Please refer this link
https://datatables.net/reference/api/rows().every()
Im currently using the tabulator library to create tables based on json data.
I am trying to use a custom cell formatter to add a button into a cell.
Here is my method:
var graphButton = function(cell, formatterParams, onRendered){
var button = '<button onclick="customMethod(cell.getRow().getData())">myLabel</button>';
return button;
};
I then pass graphButton into the table's definition.
The button is displayed correctly. However, when I click the button, I get an error stating: can't find variable: cell.
How do I correctly pass the cell variable into customMethod?
try to use this way not sure but as per standards this will be work
var graphButton = function(cell, formatterParams, onRendered) {
var button = `<button onclick="customMethod('${cell.getRow().getData()}')">myLabel</button>`;
return button;
};
I am currently using the datatable with datatable plugin.I also added the checkbox and dynamic dropdown with it.Now when i click the checkbox i can't able to get the selected value from datatable
it brings the html code?How can i get the value?
Please called below function on onchange event of checkbox.
onChangeCheckBox(_id)
In function pass same id of dropdown i.e. '_id'.
function onChangeCheckBox(e) {
var id = e.id;
var val = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
}
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
I have the following jsfiddle that generates a YUI Datatable with checkboxes, but i have a problem getting the data of ids from the table after i click the Get Records button.
anyway to call the table from the javascript?
P.S : I am using YUI2 library as my project is using that
Using Checkbox Listeners
I hope this codes show what you need http://yuilibrary.com/yui/docs/datatable/datatable-chkboxselect.html
Edit:
I update your code for adding checkboxClickEvent for handling checkbox event in each of data row and use an array to keep all of the checked record id.
var selectedID = [];
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
alert("check box clicked");
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
selectedID.push(oRecord.getData("id"));
}
else {
selectedID.pop(oRecord.getData("id"));
}
oRecord.setData("check",elCheckbox.checked);
});
Detail of working code is here.