Dynamic Dropdown in Datatable plugin - javascript

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;
}

Related

datatables dropdown combobox

Im using Datatables from https://datatables.net.
One of the columns on the datatable has a dropdown combobox as cell data.
When I push a button, I need to get the selected value of the combobox inside the selected row.
$.each($("#prize_selector tr.selected"), function () {
var row = prizes_table.row(this).data();
row[3].$('select').options[row[3].$('select').selectedIndex].id;
[...]
});
but no success. How can I access the DOM select inside the cell, without traversing all the input selects on the table? (there are a lot).
edit the console throws row[3].$ is not a function
I assume you're using Select extension to select rows.
Below is a correct way to access select element for each selected row:
table.rows({ selected: true }).every(function(){
var $select = table.$('select', this.node());
var $option = table.$('select option:selected', this.node());
console.log($select.val(), $option);
});
See this example for code and demonstration.

JQuery datatable get column attributes

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

jquery populating a dialog checkbox with the value of a table checkbox

I am attempting to populate a checkbox in a dialog based upon the checkbox in a selected table row. The page has multiple tables. The tables have the same columns and a variable number of rows. Each row has one checkbox. When clicking on the row's edit icon, I open a dialog window. I am attempting to set the property of the dialog property checkbox to the property of the row property and am not having success: I have read every jquery checkbox posting and tried the solutions. These are my last 2 tries:
$('.ui-icon-pencil').click(function(e) {
var initialRow = $(this).parent().parent();
var $thisFieldset = $("#bookmark-data-fieldset");
var urlid = $("td:first", initialRow).text();
/*default dialog checkbox to not checked*/
$('#dialoggoalstatus').removeAttr('checked');
var urlname = $("td:nth-child(2)", initialRow).text();
var newurlname = urlname.trim();
var goal_date = $("td:nth-child(3)", initialRow).text();
$('#bookmark-goaldate').val(goal_date);
/* populate the dialog checkbox with the property of the
row checkbox*/
$("#dialoggoalstatus").prop($("td:nth-child(4)",
initialRow).find(':checkbox').prop('checked'));
/* I also tried this*/
$("#dialoggoalstatus").prop($(initialRow).
find('td input:eq(4)').is(':checked'));
This did not work. Can you help me identify what I am missing?
In addition, I attempting to then populate the table with the selection of made in the dialog form.
I am using this:
var goalid = $("td:first", initialRow).text();
$("td:nth-child(2)",initialRow).text($("#namefield").val());
$("td:nth-child(3)", initialRow).text($("#datefield").val());
$("td:nth-child(4)", initialRow).
prop($( "#dialoggoalstatus").prop('checked'));
This also is not working.
Any help would be greatly appreciated.

dataTable search[Filter Plugin] doesn't work until change

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

Getting Value from GridView Input Control using JavaScript

i am using Asp.Net Grid View Control having Template Field Columns. Which have Asp.Net Literal,TextBox and CheckBox Controls. I want to add each row Received Amount value when checkbox is Checked in each row. Below is my GridView.
I have accessed the Received Amount columns by JavaScript, but it gives me the whole Textbox in Alert
I want to get Value of that Textbox having Id=txtFeeRecAmount, not whole Control..
Below is my Script..
<script type="text/javascript">
function AddAmount(lnk) {
var row = lnk.parentNode.parentNode;
var rowIndex = row.rowIndex;
alert(rowIndex);
var amount = row.cells[2].innerHTML;
alert(amount);
}
</script>
Any Help, I want to get Value of Received Amount Column, when the CheckBox is checked.
As, there can be multiple textboxes. there you need to get the current value by
using jquery, this should work;
var amount = $(row.cells[2]).find('input').val();
As you tagged this question with jQuery I assume you are using it:
I want to get Value of that Textbox having Id=txtFeeRecAmount
$("#txtFreeRecAmount").val();

Categories

Resources