I'm initializing the .dataTable() the following way:
$(document).ready(function(e) {
var articles_table = $("table#datatable-articles").dataTable({
'bProcessing': true,
'bServerSide': true,
'rowHeight': 'auto',
"bAutoWidth": true,
'sAjaxSource': '/admin/articles/data',
sPaginationType: "full_numbers",
});
Then, I'm trying to get the id value that is in the tbody > tr > td:first and save it in a variable, and then hide the field. No luck, everything that I tried, didn't work.
var ex = $('table#datatable-articles');
if ( $.fn.DataTable.fnIsDataTable( ex ) ) {
console.log(ex.find('tbody tr td:first'));
ex.find('tbody tr td:first').css('backgroundColor', 'blue');
}
/
articles_table.$('tbody tr:odd').css('backgroundColor', 'blue');
console.log(articles_table.find('tbody tr td:first').val());
articles_table.find('tbody tr td:first').html('1');
All the above executes on dom ready, but then the dataTable is initialized and replaces everything with its data
The basic question is: How to obtain the id value from the table data and then hide it?
This is what I ended up with, and it works...
inside dataTable() have added the following
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
return nRow;
}
Related
I have this function
var table = $(tableId);
var datatable = table.dataTable();
table.on('click', 'i.pointerCursor', function() {
var $this = $(this),
tr = $(this).closest( 'tr' ).get(0);
if ( datatable.fnIsOpen(tr) ) {
$this.removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' );
datatable.fnClose( tr );
} else {
$this.removeClass( 'fa-plus-square-o' ).addClass( 'fa-minus-square-o' );
console.log(tr);
console.log(datatable.fnGetData(tr));
datatable.fnOpen( tr, self.dataTableFormatRow( datatable,tr,$this[0].attributes[0].textContent), 'details' );
}
});
I am logging out the tr and the datatable.fnGetData(tr), because I would need the row as an object. The tr returns the actual row, but when I pass this tr to the datatable.fnGetData(), it always returns a totally different object. And this object seems always the same, even if I click on a different row.
I can't figure it out, why this is. How could I fix this? Or should I replace the code?
I have a DataTable where I need to insert/append data dynamically from an AJAX call. Searching and Sorting on this kind of DataTable does not seem to work as intended. Here is my JSFiddle
Code:
$('#example').DataTable( {
"iDisplayLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaData": md,
"aaSorting": [[1, 'asc']],
"createdRow": function (row, data, index) {
$('td', row).eq(0).append('<u><a target="_blank" href="' + data["Data"][0].Link + '">' + data["Data"][0].Value + '</a></u>');
$('td', row).eq(1).append(data["Data"][1].Value);
$('td', row).eq(1).prop('title', data["Data"][1].Value);
for (var i = 2; i < data["Data"].length; i++) {
if (data["Data"][i].Value == "green") {
$('td', row).eq(i).addClass('highlight1');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "red") {
$('td', row).eq(i).addClass('highlight3');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "blue") {
$('td', row).eq(i).addClass('highlight2');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else{
$('td', row).eq(i).append(data["Data"][i].Value);
}
}
},
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {
"leftColumns": 2,
},
"sScrollXInner": "150%",
"fixedHeader": true,
"columnDefs": [{
"defaultContent": "",
"targets": "_all",
"data": null,
"render": {
// "_":spData[0].Cells[2].Value,
}
}],
} );
Any Solutions or ideas to this issue?
I do not believe createdRow is doing what you intend. According to the DataTables documentation:
This callback is executed when a TR element is created (and all TD child elements have been inserted), or registered if using a DOM source, allowing manipulation of the TR element.
Your <td> child elements are being rendered by createdRow and the searching and sorting features are not aware of their existence.
You should, instead, use row.add() if you want to add your rows after DataTable() has initialized. More information on it can be found in the DataTable doucmentation. But here is an updated JSFiddle based on your original link using row.add() to add your rows to the table, allowing the searching and sorting to now work on them.
I have the following javascript in my website:
$('#example tbody').on( 'click', 'input', function () {
var data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
$(".iframe2").click(function() {location.href = "record_dt.php?ID="+data[0]});
});
} );
When clicking the respective buttons on my datable 'iframe' and 'iframe3' work fine with a normal single click. However, when i click on the respective button for iframe2 I have to click twice for the button to respond. Not necessarily double click but one click and then another. Any idea why this is happening? Since 'iframe' and 'iframe3' are associated with colorbox this is the respective code:
FULL CODE:
<script>
$(document).ready(function()
{
$(".iframe").colorbox({iframe:true, width:"700px", height:"80%"});
$(".iframe3").colorbox({iframe:true, width:"300px", height:"20%", onLoad: function() {
$('#cboxClose').remove();
}});
});
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<input type='image' src='delete.png' id='button' >"
},
{
"targets": -2,
"data": null,
"defaultContent": "<input type='image' src='edit.png' id='button' >"
},
{
"targets": -3,
"data": null,
"defaultContent": "<input type='image' src='edit.png' id='button'>"
}
],
"order": [[ 0, "desc" ]]
} );
var data = false;
$('#example tbody').on('click', 'input', function(){
// on input click, set the data to new value
data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
});
$(".iframe2").click(function()
{
if(data) {location.href = "record_dt.php?ID="+data[0];}
});
});
</script>
These are working fine with a single click. The problem is 'iframe2'.
Simply move your click event trigger to outside the other event trigger for your tbody:
// Since the table2 click event needs to know about the data value as well,
// set it as a global, shared variable.
var data = false;
$('#example tbody').on('click', 'input', function(){
// on input click, set the data to new value
data = table.row( $(this).parents('tr') ).data();
$(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});
$(".iframe3").colorbox({href:"delete.php?ID="+data[0]});
});
$(".iframe2").click(function(){
// check if data is not false (aka unset), if not, execute location change
if(data) location.href = "record_dt.php?ID="+data[0]});
});
Now the click event is attached on load and not after the initial click on tbody, which resulted in your initial need to click twice.
You are defining iframe2 click event inside $('#example tbody') click event.
So on first click it binds click event and then second time it works.
When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );
I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );
I can't get my pagination to work after I added a date filtering plug-in to datatables.
The original code was like this and it was picking up the pagination fine.
$(document).ready(function() {
$('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
this is my current one with the plug in variables
$(document).ready(function() {
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
Thanks in advance.
Well, in your current function, this part:
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
should be written like this:
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
Edit
In case it wasn't clear, the full jQuery code should look like this:
$(document).ready(function() {
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});