Develop Reference

jquery: How do I access the underlying DataTable inside a createdRow() callback?

When a row is created, I would like to add a child row containing a <table>, for later population via on.click() + DataTable() + ajax. Pretty simple. The createdRow() callback seems like a great place to do this ... if I could get it to work.
createdRow() takes 4 parameters which appear to be the following.
row - HTML element of the created row
data - plain ol' JSON of the new row's data
dataIndex - the row # within its table
cells - DOM elements for the <td>s that make up the row
None of these are DataTables or child objects. Not only that, I do not seem to have a way to get at the underlying <table> element. Neither $(row).closest('table') nor $(cells[0]).closest('table') seem to return anything, and $(row).parent() doesn't work either. It seems as though the row isn't inserted into the table yet.
If the row really hasn't been inserted into the table when createdRow() is called, then I guess I just need to use another callback, like initComplete(), and iterate over rows. But createdRow() would be perfect, since all the data is right there in the args, so I hope I am just missing something simple and createdRow() can be made to work.
Thanks!

You can access a table's API object from within the table itself using one of the approaches shown here. So, for example,
$('#your_table_id_here').DataTable()
With this, you can do the following to create a child row:
$('#example').DataTable( {
"createdRow": function( row, data, dataIndex, cells ) {
var myTable = $('#example').DataTable();
myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
}
} );
This basically uses the row() API call with the row index number to get the row as a DataTables object (instead of a <tr> element).
If you are adding a new row via the DataTables API using row.add(), then you can use the row object which is returned from that function, without needing to create a new instance of the DataTable's API:
var row = table.row.add( ['John Doe', 'more info', ...] ).draw();
row.child( '<table><tr><td>some data</td></tr></table>' ).show();
The above example assumes that table is the variable assigned to your DataTable when the DataTable is created:
var table = $('#example').DataTable( {
// your usual DataTable options here
} );
Adding a child to a row is typically done when the table is initially rendered, without using the createdRow option. I think this is the easiest way to handle things such as the open/close buttons (if you want those).
Update regarding a comment about not having access to the HTML table's ID.
Inside the createdRow callback function you can use this as a selector also: var myTable = $( this ).DataTable();. In this case, there is no need to know the ID of the table.
Using this, my earlier example becomes the following:
$('#example').DataTable( {
"createdRow": function( row, data, dataIndex, cells ) {
var myTable = $( this ).DataTable();
myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
}
} );

Get HTML element by JavaScript

How can I reach the first row and the first column (using javaScript) from a table in specific URL?
for example in the following URL:
https://www.w3schools.com/jsref/dom_obj_table.asp
In 'Table Object Methods', I want to get "createCaption()" .
Thanks!

you can try this...
you get value into rows of table HTML.
var row = document.getElementById("myTable").rows[0].innerHTML;

Using css you can do
var elem = element.all(by.css('table tr:nth-child(2) td:nth-child(1)').last();
This selects the first column from the second row that is in a table.
Using element.all because there are 3 tables it could apply to, which is why you need the .last() because the table you wanted referenced was the last table. Would work better if the table has an unique ID to reference it with.

X-Editable and Bootstrap datatables

I've tried with no success to implement x-editable in bootstrap datatables, the reason being when i update an element from x editable, the datatable fails to recognize those changes.. i've tried updating the table, destroying it, hidden tags, but the main problem seems to be that the datatables fails to recognize any change after the initialization..
I add the rows via button click, when they get to the table, i run .editable on those elements. they become editable but the sorting and search of the datatables doesnt work..
Can anyone help me?

The problem is that for performance reasons, Datatables caches the table into memory so actually the DOM table is different from the in-memory table. And when you modify the DOM, it doesn't change the table in-memory.
Therefore, Datatables created a function helper : invalidate() that you can apply on a row http://datatables.net/reference/api/row%28%29.invalidate%28%29 (there is a multiple rows version too).
Or you can still use the function data() which is less CPU consuming (recommended).
I would do something like this :
$('.xeditable').on('save', function(e, params) {
var $tr = $(e.target).closest('tr');
var newValue = params.newValue;
//If you didn't save the datatable into a var table, you need to call this line :
//var table = $('#example').DataTable();
table.row(tr).data(newValue);
//Or table.row(tr).invalidate(); which should read from the DOM directly
});

Add new row to Datatable from table values?

I have a Datatable with information, and a fieldset with a table full of text inputs. The user should be able to add new rows according to the information values, but these rows are not correctly adding. Clearly the tr is being cloned and added (emptied where needed), the corresponding values are appending but the pagination is not being updated for Datatables. I cannot figure out how to correctly use .fnAddData() to get the job done here. On top of that, I don't know how to go about the "Permissions" column - getting checkboxes to convert to text for the table. Any ideas? Thanks in advance.
http://jsfiddle.net/BWCBX/28/
jQuery
$('#addRow').click(function () {
var tbody = $('#example tbody');
var tr = tbody.find('tr:first').clone();
tr.find('td:first').text($(".engine").val());
tr.find('td:eq(1)').empty();
tr.find('td:eq(2)').empty();
tr.find('td:eq(3)').text($(".version").val());
tr.find('td:eq(4)').empty();
tr.appendTo(tbody);
});

There are good examples on how to use fnAddData in the API docs.
I have rewritten your JS according to example provided in docs. I've extracted checkboxes checking into separate function to mantain high readability. The updated fiddle is here.

Delete one row from DOM built table

I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.

Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});

You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});

var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.

You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo

you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/