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'));
} );
Related
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.
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
I have an asp.net web application that has the option to provide pseudo-realtime data about an automation machine. I am using the JQuery Datatables with an ajax datasource. I have an interval that reloads the data source every set amount of time (which updates my datatable asynchronously from the db) and then redraws the table.
I am also using the responsive plug in for the table, so the web app can be accessed well from phone sized devices. I have set this up so that it drops all of the columns but the first(primary) column and adds the other columns a child (detail) record. This is where my app breaks and my phone users loose usability. This is because whenever the table redraws detail records snaps close. Therefore if a phone user is looking at the table and has expanded the detail of a record the record will snap shut as soon as the table is redrawn.
My solution would be to capture the opened detail and then at the time of redraw re-open the detail. I believe I have captured the detail successfully but everything I have found to try to programmatically expand it has not worked.
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '#Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
If you can tell why the detail isn't expanded or a better way solution please let me know. I do have a temporary solution in place that just pauses the interval when the detail button is clicked but this makes my phone users table not update.
If you're using Datatables 1.9 and earlier use fnDrawCallback().
If you're using Datatables 1.10+ use drawCallback().
Both of these callbacks go in your datatables initializer and can take your row detail opening code.
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );
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");
--
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.