jQuery DataTables - add jquery generated element with events to a table cell - javascript

I'm using jQuery DataTables ( http://www.datatables.net ) to generate a table. I want to insert in certain cells(from a column) a jquery generated html element witch has some events attached to it. (onClick for example).
I was thinking about mRender but I found that I need to return a string instead of an object.
here is the code:
table.dataTable({
"aoColumns": [{
"mRender":function() {
var element=$("<div></div>").on("click",function(){
alert("do something");
});
return element;
}
},
{"sWidth": "350px"}]
});
The code is not working because what I see rendered is
[Object]
I can get the html code of the element using jQuery.html() but then I will loose the events attached to the element.
Is there any solution? Is this a design flaw in DataTables or am I missing something?

You can insert placeholder elements via mRender or sDefaultContent and add the actual content and events during the fnRowCallback events. Something like this:
table.dataTable({
"aoColumns": [{
"sDefaultContent": '<div class="stuff"></div>'
"sWidth": "350px"
}],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var element = $(nRow).find("div.stuff");
// do stuff
element.on("click",function() {
alert("do something on row: " + iDisplayIndex);
});
}
});

Related

jQuery Datatable access row data ( render parameter ) on jQuery click event

I have created link in datatable as:
$('#example').dataTable( {
"columnDefs": [ {
"targets": 1,
"render": function ( data, type, full, meta ) {
return 'Download';
}
} ]
} );
I can access id on clicking <a> tag using jQuery click event, but I have several fields to access. And I don't want to use data- attribute to access each field.
How can I access row object i.e.(full) , in jQuery event ?
What I have tried is:
"render": function ( data, type, full, meta ) {
alert(full);
return 'Download';
}
In jQuery event alert( $(this).data('full') ); I can see only [Object object].
I have tried to convert it to String but no success.
Use row().data() API method to get data for any given row.
For example:
$('#example').on('click', 'tbody a', function(){
var $tr = $(this).closest('tr');
var data = table.row($tr).data();
console.log(data);
});
See this example for code and demonstration.
Try jquery .data() to set / get data
$(your_component).data("full", full)
or
JSON.stringify(full) // convert json to string

Custom pasting into empty datatable

When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.
I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70

Jquery Datatables Colvis fires preDrawCallback and DrawCallback twice on column item click

Please refer to my test case
https://jsfiddle.net/1c3Lmace/13/
This is my code
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
"fnPreDrawCallback": function( oSettings ) {
alert('pre');
},
"fnDrawCallback" : function() {
alert('+++++');
}
} );
} );
When you go to Show/Hide Columns and click on any column item you will see that each preDrawCallBack and drawCallback event fires twice.
Does anyone having any idea why it happens.
I want to show a loader before data loads and hide it and when data is successfully loaded. Any help is appreciated
Thanks
Indeed the events are fired twice but only when sorted column visibility is being toggled.
I see no point in showing loading indicator for client-side processing, column visibility changes occur very fast. For server-side processing, there is processing option already available.
You can do something like this. But I had to put an alert() because columns are toggled very fast and Processing... message disappears quickly.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
processing: true,
drawCallback : function() {
$('.dataTables_processing', $('#example').DataTable().table().container()).hide();
}
} );
} );
$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
$('.dataTables_processing', $('#example').DataTable().table().container()).show();
alert('Column visibility is toggled');
} );
See this jsFiddle for code and demonstration.

writing to tr td with onClick()

I am trying to get an onClick function to highlight a table row (within a dynamicTable) and also write "test read" to the clicked td[0] within this row.
this is what i have (found and tweaked from the net / stackOverflow)
$("#dynamicTable tr").click(function() {
var selected = $(this).hasClass("highlight_tr");
$("#dynamicTable tr").removeClass("highlight_tr");
if(!selected)
$(this).addClass("highlight_tr");
});
try{
$('#dynamicTable').dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"sCookiePrefix": "my_datatable_",
"aaSorting": [[ 2, "desc" ]],
"aoColumns": [
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "string" },
{ "sType": "html" },
{ "sType": "html" },
null
]
});
} catch (e){
errorMessage(e);
}
this works fine with highlighting the row and of course the dynamicTable
i can not work out what to add in order to get add HTML to the table cell though
i have tried as a test
$(this).innerHTML("test read");
thinking this will write to the full row, but it does nothing.
I have also tried a few other things but none work down to my lack of javaScript knowledge...
I am not very good with javaScript as you can see..., but can usually cobble something together with help from the net, but this one is making my head ache. Any help is greatly appreciated!
jQuery does not have an innerHTML method, this is a property of native DOM nodes, not jQuery collections.
Perhaps you mean something like this?
this.innerHTML = "test read";
The jQuery equivalent of this is the html method.
$(this).html("test read");
However, if you want only plain text, and not HTML, you should use the text method.
$(this).text("test read");
For completeness, the native DOM node equivalent for plain text would be textContent.
this.textContent = "test read";
You cannot write directly inside tr element but write in td:
$(this).find('td:eq(0)').text("test read");//writes text in first td
If you want to write in all td of the tr then just remove eq() method.
You can always see the documentation like eq, text, html
or try
$("td:first").text("test read");
--

JQuery DataTable Cell from a row click

I am trying to implement a function on jquery datatable, that returns the 1st and the 4th column of a clicked row
i am following this example, which allows me to manipulate a clicked row
http://datatables.net/examples/api/select_single_row.html
thinking that i can change this handler to do the read cell value procedures and use the value on my own logic
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
i have also come over with this little code segment from dataTable forum http://datatables.net/forums/comments.php?DiscussionID=1384&page=1#Item_0
$('#example tbody tr').click( function () {
// Alert the contents of an element in a SPAN in the first TD
alert( $('td:eq(0) span', this).html() );
} );
may i have any pointer so i can get the 1st and 4th column of the clicked field?
next part
I have the above solved, thanks nick
however i have the next part of the problem. when i init the table
i use
/* Init the table */
oTable = $('#filetable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/crvWeb/jsonFileList.do",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
my servlet takes a dir request parameter and returns a listing to the datatable as json response.
/crvWeb/jsonFileList.do
how can i add and get serlvet response with post request so i can have my table updated?
You can use .delegate() easiest here, like this:
$("#example tbody").delegate("tr", "click", function() {
var firstCellText = $("td:first", this).text();
var fourthCellText = $("td:eq(3)", this).text();
});
You can try out a demo here
With .delegate() this refers to the <tr> since that's the click we're handling, making things quite a bit cleaner..and it's still only one event handler at the <tbody> level, not one per <tr>.
This should do the trick, if I'm reading your code correctly:
$("tr.row_selected td:nth-child(1), tr.row_selected td:nth-child(4)");
It should return the first and fourth child of all tr elements with the class row_selected.

Categories