JQuery DataTable Cell from a row click - javascript

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.

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

JQuery DataTables - Hide Table Until Searching

I'm using DataTables with JQuery to show some data on my site. I use the search feature to filter the data, and give me the intended results. What I'd like to do is to hide the table until a user begins typing a search in the box, and only then display the proper results. Here's my DataTables code right now:
function renderTable() {
jQuery('.dataTable').show();
jQuery('.dataTables_info').show();
jQuery('.dataTables_paginate').show();
}
function hideTable() {
jQuery('.dataTable').hide();
jQuery('.dataTables_info').hide();
jQuery('.dataTables_paginate').hide();
}
jQuery('.dataTables_filter input').keypress(function() {
if (jQuery('.dataTables_filter input').val() != '') {
renderTable();
} else {
hideTable();
}
});
jQuery(document).ready(function() {
jQuery('#resultsTable').DataTable({
"paging": true,
"pageLength": 25,
"lengthChange": false,
"pagingStyle": "simple_numbers",
"language": {
"search": "",
"searchPlaceholder": "Search for an entry"
},
"order": [1, 'asc']
});
hideTable();
} );
It successfully hides everything from the DataTable but the searchbox on document.ready, but I can't get it to call my renderTables() function when a user clicks in the box and types. I'm not sure if I'm targeting it correctly with: '.dataTables_filter input'. The search input that DataTables renders doesn't have any unique ID I can target, so I have to refer to it from the filter element which contains it.
Try some thing like this:
Make a function to render the datatable with the required filter parameter and call it on search functionality. So that it cannot render table on page load. When your search functionality is initiated it will render the table with the filter parameter.
Ex:
$(document).ready(function(){
$('#search_box').keyup(function(){
var searchStr = $(this).val();
if((searchStr).length)
{
filterData(); // call the filter function with required parameters
}
else
{
// empty the table body
}
});
});
function filterData()
{
// your code
}
You can use the rendered filter input box, then use the drawback function. This is how I did it.
drawCallback: function(settings){
if($('#yourtableid_filter input').val().length > 0) --this is generated by datatable
{
$('#yourtableid tr').show();
} else {
$('#yourtableid tr').hide();
}
}
once the filter input is empty, it will hide everything again.

Cannot retain checkbox value using jquery.cookie

I use jQuery DataTable and there is a checkbox on the toolbar that is used for retrieving all records or not. As stateSave feature of DataTable does not work properly, I tried to use jquery.cookie in order to keep the checkbox value after reloading the DataTable (because the checkbox is redrawn dynamically on every reload) as shown below:
$(document).ready(function() {
$('#example').DataTable( {
//code omitted for brevity
"serverSide": true,
"ajaxSource": "/Student/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */
aoData.push({ "name": "isAll", "value": $("#cbIsAll").is(":checked") });
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"fnDrawCallback": function() {
$("div.toolbar").html('<input type="checkbox" id="cbIsAll" name="demo" /> Get all records');
}
});
$(document).on('change', '#cbIsAll', function () {
var isClicked = $('#cbIsAll').is(':checked') ? true : false;
$.cookie('clicked', isClicked, { expires: 1 }); // expires in 1 day
table.ajax.reload();
$('#cbIsAll')[0].checked = ($.cookie('clicked') == "true") ? true : false;
});
});
After debugging the code I saw that although the $('#cbIsAll')[0].checked line is executed properly as true, the checkbox lost value later than this line. Could you please clarify me about where the mistake is? Or is there a better and smart way to keep the checkbox value?
There is no reason to use $.cookie in your case. In the checkbox change event, you can simply store the value of the checked state and use that to set the checked property of the new checkbox generated when you reload the table
var isChecked;
$(document).on('change', '#cbIsAll', function () {
// Store the current value
isChecked = $(this).is(':checked');
....
Then in the datatable's callback function, set the checked state of the checkbox
$('#cbIsAll').prop('checked', isChecked);

how to enable and disable paging from jquery dataTables on button click

Following is the code found in data table website in order to remove the paging.
$(document).ready(function() {
$('#example').DataTable( {
"paging": false
} );
} );
My question is how to enable and disable paging on button click.
as when i call DataTable function second time to same table. It shows error that data table is already initiated and im calling it second time.
simply recreate the dataTable using destroy: true and paging:
I wanted to show only the first 10 rows of the table, but still be able to sort the whole table. But I also wanted the ability to click a link and show the whole table.
Here's what I did: (my table is "ka_ad")
First, turn on paging
table_ad = $('#ka_ad').DataTable({
paging: true,
});
Second (optional: I didn't want to display the datatable pagination links and element, so I hid them with css
#ka_ad_length{display: none;}
#ka_ad_paginate{display: none;}
Lastly, toggle the bPaginate setting (I have a button with an ID of "test"):
$('#test').click( function () {
//console.log(mytable.settings()[0]['oFeatures']['bPaginate'] );
if(table_ad.settings()[0]['oFeatures']['bPaginate'] == false)
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = true;
$('#test').html('Show All Rows');
}
else
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = false;
$('#test').html('Show Fewer Rows');
}
table_ad.draw();
});
Try like this.
var oTable;
$(document).ready(function() {
oTable = $('#example').DataTable( {
"paging": false
} );
$('.btn').click( function () {
oTable.paging= false;
oTable.fnDraw();
});
} );
try this:(but i don't guarantee, because, i haven't tested)
var oTable = $('#example').dataTable();
// get settings object after table is initialized
var oSettings = oTable.fnSettings();
oSettings.paging = false;
$(".button").click(function(){
oSettings.paging = !oSettings.paging;
});
https://www.datatables.net/forums/discussion/16373/enable-disable-features-after-initializing-the-table

JQuery DataTables: Show/hide row details with multiple tables

I'm aware there's a similar question on here JQuery DataTables: How to show/hide row details with multiple tables? but that doesn't apply to my current problem completely.
I have the code:
var oTable = $('.dataTable').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,3,4 ] },
{ "bVisible": false, "aTargets": [ 4 ] }
],
"aoColumns": [
null,
null,
null,
null,
{ "sType": "html" }
],
"aaSorting": [[1, 'asc']],
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('.dataTable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (oTable.fnIsOpen(nTr)) {
// This row is already open - close it
this.src = "css/images/details_open.png";
oTable.fnClose(nTr);
} else {
// Open this row
this.src = "css/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
} );
}
});
That works if there's only one if I add the dataTable class to a second table, then they work as datatables but the show/hide buttons fail in both tables. Both tables have the same count of fields and content, just for the sake of making it work, but still no success.
On the similar post, the person suggests adding:
tbl = $(this).parent().parent().dataTable();
to the click function but I have tried that and it didn't work.
What am I missing??
In short: get rid of the fnInitComplete, and move the "live" call to below the dataTable call.
As an example, if you have three tables, after each table is completed, your current code will execute the fnInitComplete method - so fnInitComplete gets called 3 times. Your fnInitComplete uses a selector to "live" the click event to an img, and the selector will "live" to all tables. This results in multiple bindings. See this jsfiddle, http://jsfiddle.net/KeVwJ/, which duplicates your method. (Note that I'm not using images so only capturing click on the td cell, not an image).
var oTable = $('.dataTable').dataTable( {
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
$('.dataTable tbody td').live('click', function () {
var nTr = this.parentNode;
alert(nTr);
} );
}
});
If you click on any row in the table, you will get 3 alert boxes, because 3 tables are created and they each "live" click for all tables at fnInitComplete.
To fix, remove the fnInitComplete, and put the code for "live" after the call to dataTable. That should solve it. See this jsfiddle: http://jsfiddle.net/rgMNu/ Click on any row in the table and it will identify the correct table class. Again since I am capturing the click on td, I only have to do this.parentNode.parentNode.parentNode. I think you'll have to do another level.
$('.dataTable tbody td').live('click', function ()
{
var t = this.parentNode.parentNode.parentNode;
alert(jQuery(t).attr('class'));
} );

Categories