We Keep Coding

Isnull function and how to display the correct set of data through javascript to a html table

I have this set of javascript script on datatable:
<script>
$(document).ready(function() {
var table = $('#elogbooktable').DataTable( {
"ajax": {url: "testing_getdetaildata.php", dataSrc: ""},
'columnDefs': [ {
'targets': 3,
'createdCell': function(td, cellData, rowData, row, col) {
if(rowData[4]) {
$(td).html(rowData[4]);
}
}
} ],
'filterDropDown': {
columns: [
{
idx: 5
}
],
bootstrap: true
},
rowCallback: function(row, data, index){
if(new Date(data[42]) < Date.now()){
$(row).find('td:eq(42)').css('background-color', '#f8d7da');
}
},
})
<?php $i=13;
foreach($columns as $id=>$value) {
print "showHideColumn($id, $i);\n";
$i++;
}
?>
//Add a text search box to each footer cell
table.columns().every( function () {
$(this.footer()).html("<input type='text' style='width:100%;' placeholder='Search'/>");
});
//Full table search functionality
// Column search function
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that.search( this.value, true ).draw();
}
});
});
var buttons = new $.fn.dataTable.Buttons(table, {
'buttons': ['pageLength','copyHtml5',
{
extend: 'excelHtml5',
},
{
extend: 'print',
}]
}).container().appendTo($('#envdetail_wrapper .col-sm-6:eq(0)'));
setInterval( function () {
table.ajax.reload();
}, 300000 );
});
function showHideColumn(id, number) {
var dtable = $('#elogbooktable').DataTable();
if(dtable.column(number).visible() === true) {
if($(id).attr("class").includes("btn-primary")) {
$(id).removeClass("btn-primary");
$(id).addClass("btn-default");
}
dtable.column(number).visible(false);
}
else {
if($(id).attr("class").includes("btn-default")) {
$(id).removeClass("btn-default");
$(id).addClass("btn-primary");
}
dtable.column(number).visible(true);
}
}
</script>
The MySQL query is like this from testing_getdetaildata.php:
select *, ifnull(Board_ID,'') as Board_ID1 from Lab_WIP_History a LEFT join chamber_data b ON
a.LOT_LOCATION = b.Testtag LEFT JOIN chamber_data_1 c
ON a.LOTID = c.lotid;
And the query table is like this:
LOT_LOCATION, Zone, LOT_ID, DESIGN_ID, BOARD_ID, BOARD_ID1
SGBAKE.0012, '', CVN4BL2.11, NM112, NULL, ''
In the webpage, esp for
'targets': 3,
'createdCell': function(td, cellData, rowData, row, col) {
if(rowData[4]) {
$(td).html(rowData[4])
, the printed result in the webpage is like this:
LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '', CVN4BL2.11, NM112
Which is not what i want since I want the Board_ID value in the table displayed to be replaced by BOARD_ID1. So, what I want is like this:
LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '', CVN4BL2.11, ''
Does anyone know how to solve this table display issue? Any help is appreciated thank you!

How to change value in an xml file onclick using DataTable

I have the following code I have been working on using DataTable. When I click on the ACK button, it updates the DOM but not the xml file. I want it to update the xml file so that anyone else who accesses the site won't have to ACK it again.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var addButton = function(){
$('#alert-table tr td').each(function(){
if($(this).index() == 3 && $(this).html() == "0")
{
$(this).html($('<input type="button" value="ACK" onclick="$(this).parent().html(1);">'));
}
});
}
var refreshAlertTable = $('#alert-table').dataTable( {
"bInfo": false,
"sAjaxSource": 'ajax/alert_json.xml',
"bServerSide": true,
"bJQueryUI": true,
"bLengthChange": false,
"bPaginate": false,
"bFilter": false,
"aaSorting" : [[2, "desc"]],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[2] == "5" )
{
$('td', nRow).css('background-color', 'Red');
}
else if ( aData[2] == "4" )
{
$('td', nRow).css('background-color', 'Orange');
}
},
"fnDrawCallback": function ( oSettings ) {
addButton();
}
});
setInterval (function() {
refreshAlertTable.fnDraw();
}, 5000);
} );
</script>
Thanks

Check below :
var table1 = $('#youtblename').DataTable();
var pathp = "/server_processing_pie.php";
tablel.clear();
tablel.draw();
tablel.ajax.url(pathp).load();

jQuery DataTable Undefined

I have two DataTables defined in $(document).ready() as follows:
oProdTable1 = $('#productstable1').dataTable( {...} );
oProdTable2 = $('#productstable2').dataTable( {...} );
Outside of $(document).ready(), I try to reload them. When I put a breakpoint in the following success function, I find that oProdTable1 is defined, but oProdTable2 is undefined:
function addProduct(productLine) {
$.ajax({
type: "POST",
url: 'ajax-add-product.php',
data: { productLine: productLine},
success: function(data) {
oProdTable1.fnReloadAjax();
oProdTable2.fnReloadAjax();
}
});
}
I can't find a difference between the definitions of these two tables. I also am wondering why oProdTable1 does not need to be declared with "var", yet is defined. Any ideas?
EDIT: I should note that oProdTable1 appears correctly, but oProdTable2 requires me to click to sort by a column for the rows to appear.
EDIT2: I have tried putting addProduct() inside $(document).ready(). oProdTable1 is still undefined and oProdTable2 is still undefined. I tried putting oProdTable2 before oProdTable1 and now oProdTable1 doesn't even load and both tables are undefined!
EDIT3: Every DataTable in the code after oProdTable2 does not load and is undefined. I compared the oProdTable1 and oProdTable2 code using the Notepad++ compare plugin and cannot find any major differences such as missing braces that I think could cause this.
EDIT4: Here is the code for oProdTable2, which seems to be problematic:
oProdTable2 = $('#productstable2').dataTable( {
"aaSorting": [[ 1, "asc" ]],
"aoColumnDefs":[
{"aTargets":[0],"bSearchable":false,"bVisible": false},
{"aTargets":[1],"sWidth":"60px"},
{"aTargets":[2],"sWidth":"200px"},
{"aTargets":[3],"sWidth":"300px"},
{"aTargets":[4],"sWidth":"60px"},
{"aTargets":[5],"sWidth":"60px"},
{"aTargets":[6],"sWidth":"60px"},
{"aTargets":[7],"sWidth":"60px"},
{"aTargets":[8],"sWidth":"60px"},
{"aTargets":[9],"sWidth":"60px"},
{"aTargets":[10],"sWidth":"60px"},
{"aTargets":[11],"sWidth":"60px"},
{ "sClass": "usa", "aTargets": [ 4, 5 ] },
{ "sClass": "can", "aTargets": [ 6, 7 ] },
{ "sClass": "lat", "aTargets": [ 8, 9 ] },
],
"iDisplayLength": 100, //sets item limit for table
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bSortCellsTop": true,
//"bStateSave": true,
"bSortClasses": false,
"sDom": 'T<"clear">C<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf",
"aButtons":
[
//"Add Product" button
{
"sExtends": "text",
"sButtonText": "Add Product",
"fnClick": function ( nButton, oConfig, oFlash ) {
addProduct("2");
}
},
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [ "copy","print","csv", "xls", "pdf" ]
}
]
},
'sAjaxSource': 'ajax-getproductstable.php',
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "productLine", "value": "2" } );
},
"fnInitComplete": function() {
var oSettings = $('#productstable2').dataTable().fnSettings();
for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
if(oSettings.aoPreSearchCols[i].sSearch.length>0){
$("thead input")[i-1].value = oSettings.aoPreSearchCols[i].sSearch;
$("thead input")[i-1].className = "activefilter"; }
}
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var id = aData[0];
$(this.fnGetTds(nRow)[1]).addClass("editable").addClass("ref");
$(this.fnGetTds(nRow)[2]).addClass("edit_area").addClass("name");
$(this.fnGetTds(nRow)[3]).addClass("edit_area").addClass("description");
$(this.fnGetTds(nRow)[4]).addClass("editable").addClass("price_rtl_usa");
$(this.fnGetTds(nRow)[5]).addClass("editable").addClass("price_dlr_usa");
$(this.fnGetTds(nRow)[6]).addClass("editable").addClass("price_rtl_can");
$(this.fnGetTds(nRow)[7]).addClass("editable").addClass("price_dlr_can");
$(this.fnGetTds(nRow)[8]).addClass("editable").addClass("price_rtl_lat");
$(this.fnGetTds(nRow)[9]).addClass("editable").addClass("price_dlr_lat");
$(this.fnGetTds(nRow)[10]).addClass("editable").addClass("ins_val_rtl_usa");
$(this.fnGetTds(nRow)[11]).addClass("editable").addClass("ins_val_dlr_usa");
$(this.fnGetTds(nRow)[12]).addClass("editable").addClass("ins_val_rtl_can");
$(this.fnGetTds(nRow)[13]).addClass("editable").addClass("ins_val_dlr_can");
$(this.fnGetTds(nRow)[14]).addClass("editable").addClass("net_l");
$(this.fnGetTds(nRow)[15]).addClass("editable").addClass("net_w");
$(this.fnGetTds(nRow)[16]).addClass("editable").addClass("net_h");
$(this.fnGetTds(nRow)[17]).addClass("editable").addClass("net_weight");
$(this.fnGetTds(nRow)[18]).addClass("editable").addClass("packed_l");
$(this.fnGetTds(nRow)[19]).addClass("editable").addClass("packed_w");
$(this.fnGetTds(nRow)[20]).addClass("editable").addClass("packed_h");
$(this.fnGetTds(nRow)[21]).addClass("editable").addClass("packed_weight");
$(this.fnGetTds(nRow)[22]).addClass("editable").addClass("customs_cost");
$(this.fnGetTds(nRow)[23]).addClass("editable").addClass("customs_desc");
$(this.fnGetTds(nRow)[24]).addClass("editable").addClass("customs_code");
$(this.fnGetTds(nRow)[25]).addClass("editable").addClass("customs_origin");
$(this.fnGetTds(nRow)[26]).addClass("edit_area").addClass("note");
$(nRow).attr("id", id);
return nRow;
},
"fnDrawCallback": function () {
// CODE FOR EDITABLE INLINES
$(".edit_area_w").editable('ajax-edit-product-inline.php', {
type : 'mce',
submit : 'OK',
indicator : "Saving...",
tooltip : 'Click to edit...',
width : '500px',
height : '100px',
"callback": function( sValue, y ) {
$(this).removeClass('empty_edit');
$("#productstable tr").removeClass("just_edited");
$(this).parent().addClass("just_edited");
var aPos = oProdTable2.fnGetPosition( this );
var update = oProdTable2.fnUpdate( sValue, aPos[0], aPos[2], true, true);
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oProdTable2.fnGetPosition( this )[2]
};
}
});
$('.editable').editable('ajax-edit-product-inline.php', {
event : "dblclick",
"callback": function( sValue, y ) {
$(this).removeClass('empty_edit');
$("#productstable tr").removeClass("just_edited");
$(this).parent().addClass("just_edited");
var aPos = oProdTable2.fnGetPosition( this );
var update = oProdTable2.fnUpdate( sValue, aPos[0], aPos[2], true, true);
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oProdTable2.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
$('.edit_area').editable('ajax-edit-product-inline.php', {
event : "dblclick",
type : "textarea",
cancel : 'Cancel',
submit : 'OK',
indicator : '<img src="img/indicator.gif">',
"callback": function( sValue, y ) {
$(this).removeClass('empty_edit');
$("#productstable tr").removeClass("just_edited");
$(this).parent().addClass("just_edited");
var aPos = oProdTable2.fnGetPosition( this );
oProdTable2.fnUpdate( sValue, aPos[0], aPos[2]);
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oProdTable2.fnGetPosition( this )[2]
};
},
} );
$('.edit_select').editable('ajax-edit-product-inline.php', {
event : "dblclick",
loaddata: function ( value, settings ) {
return {
"pid": $(this).parent().attr("id")
};
},
loadurl : 'ajax-part-selects.php',
loadtype: "GET",
type : 'select',
submit : 'OK',
"callback": function( sValue, y ) {
$(this).removeClass('empty_edit');
$("#productstable tr").removeClass("just_edited");
$(this).parent().addClass("just_edited");
var aPos = oProdTable2.fnGetPosition( this );
oProdTable2.fnUpdate( sValue, aPos[0], aPos[2]);
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oProdTable2.fnGetPosition( this )[2]
};
},
});
}
} );
$("#productstable2 .floating_filters input").keyup( function () {
// Filter on the column (the index) of this element
oProdTable2.fnFilter( this.value, $(".floating_filters input").index(this)+1 );
$(this).addClass("activefilter");
} );
$("#productstable2 .floating_filters input").each( function (i) {
asInitVals[i] = this.value;
} );
$("#productstable2 .floating_filters input").focus( function () {
if ( $(this).hasClass("search_init"))
{
this.className = "";
this.value = "";
}
} );
$("#productstable2 .floating_filters input").blur( function (i) {
if ( this.value == "" )
{
$(this).removeClass("activefilter");
$(this).addClass("search_init");
this.value = asInitVals[$(".floating_filters input").index(this)];
}
} );

I finally found the solution! The problem wasn't even with the javascript code, it was with the html. The table with the id "productstable2" had one less "td" than "th". I just needed to add an additional <td></td> to the list of "td"s.

Javascript conditional formatting not recognized

I'm having a jQuery DataTable that is generated from a JSON file. All works fine, but as it comes to conditional formatting, I get stuck. The following script gives all cells in column 2 a 'positive' class (even negative integers). What's wrong with my if-statement?
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( parseFloat(aData[1]) <= 0 ) {
jQuery('td:eq(1)', nRow).addClass('negative');
} else {
jQuery('td:eq(1)', nRow).addClass('positive');
}
return nRow;
}
thanks in advance!
edit: a part of the JSON file (the number I'm referring to is "punten":
[
{
"spel_id": "2012-09-24 15:43:56",
"locatie": "white room",
"speler": "Arne",
"punten": "17"
},
{
"spel_id": "2012-09-24 15:43:56",
"locatie": "white room",
"speler": "Bjorg",
"punten": "26"
}
]
and my js to generate the table (using DataTables):
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"sAjaxSource": "json_gespeeldekaartings.php",
"aoColumns": [
{ "mData": "kaarting"},
{ "mData": "speler" },
{ "mData": "punten"}
],
"sAjaxDataProp": "",
"sPaginationType": "full_numbers",
"aaSorting": [],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( parseFloat(aData[1]) <= 0 ) {
jQuery('td:eq(1)', nRow).addClass('negative');
} else {
jQuery('td:eq(1)', nRow).addClass('positive');
}
return nRow;
}
} )
} );

inster of
if ( parseFloat(aData[1]) <= 0 ) {
use
if ( parseFloat(aData.punten <= 0 )
EDIT
try this :
remove fnRowCallback and use mRender for in this example :
...
"aoColumns": [
{ "mData": "kaarting"},
{ "mData": "speler" },
{ "mData": "punten",
"sType": "numeric",
"mRender": function ( data, type, full ) {
if(data > 0) return "<div class='positive'>" + data + "</div>"; // example
return "<div class='negative'>" + data + "</div>"; // example
}
}
],
...

Fixed rows sorting in datatables

I want to establish some fixed rows in head of the datatable.
This is my datatable settings:
var oTable = $('#transactions').dataTable( {
"aaSorting": [ [0,'desc'] ],
"bFilter": false,
"bSort": true,
"aaSorting": [[3,'desc']], // default search colums
// "aaSortingFixed": [[3,'desc']],
"bPaginate": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"asStripeClasses": [ 'monitoring-table-new' ],
"bAutoWidth": false,
"aoColumns": [
{ "sType": "custom",
"sClass": "td-date-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="date"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-transaction-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="transaction"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-client-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="client"><div>' + sVal + '</div></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-value-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="value"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-status-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="status"><div>' + sVal + '</div></span></div></div>';
}
},
],
"sAjaxSource": '<?php echo url_for('#test?sf_format=json'); ?>',
} );
I have done in the following way:
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) {
if (x.indexOf("MY VALUE") != -1) return -1; // keep this row at top
if (y.indexOf("MY VALUE") != -1) return 1; // keep this row at top
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) {
if (x.indexOf("MY VALUE") != -1) return 1; // keep this row at top
if (y.indexOf("MY VALUE") != -1) return -1; // keep this row at top
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
This will keep in top position the rows which have "MY VALUE" in text. But the problem is that when I sort on other column, the "fixed" row is not remaining on top of the table.
Any solutions?

Just don't sort it. Use a tfoot like so -
<thead> ... </thead>
<tfoot style="display: table-row-group"> ... </tfoot>
<tbody> ... </tbody>

This is not easy, one thing you could do is mix your custom sorting with a custom datasource sorting tha customizes your datasource
// var oTable;
var onTopValues = new Array("Litige", "5410");
/* disable asc sorting for specific rows */
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) {
if (isOnTop(x)) return -1; // keep this row at top
if (isOnTop(y)) return 1; // keep this row at top
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) {
if (isOnTop(x)) return -1; // keep this row at top
if (isOnTop(y)) return 1; // keep this row at top
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
function isOnTop(s) {
// search for on top values
for (var i = 0; i < onTopValues.length; i++) {
if (s === onTopValues[i]) {
return true;
}
}
return false;
}
//custom datasource
$.fn.dataTableExt.afnSortData['custom-ontop'] = function ( oSettings, iColumn )
{
var aData = [];
//prepare the data
$('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function(){
//If the last column of this row should stay on top, return the value of the
//last row as datasource
if(isOnTop($(this).closest('tr').find('td:last').text())){
aData.push($(this).closest('tr').find('td:last').text());
}else{
//otherwise return this row as datasource
aData.push($(this).text());
}
});
return aData;
};
$(document).ready(function() {
/* Apply custom classes to table headers */
$.fn.dataTableExt.oStdClasses.sSortAsc = "custom_asc";
$.fn.dataTableExt.oStdClasses.sSortDesc = "custom_desc";
oTable = $('#transactions').dataTable({
"aoColumnDefs": [ { aTargets: [0,1,2,3], sType: "custom"}] ,
"aoColumns": [
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" }
],
"aaSorting": [],
"aaData": [
[ "2012-01-2", "2", "Local <br>0312313213", 20, "Litige" ],
[ "2012-03-22", "25", "Local <br>35313313213", 5540, "Valid" ],
[ "2012-01-2", "2", "Local <br>0312313213", 10, "Valid" ],
[ "2012-03-22", "25", "Local <br>35313313213", 5410, "Valid" ]
]
});
});
Basically you are still using your sorting function but you pass them a custom datasource that forces the values to stay on top. This assume that you are sorting on the last column, but you can add your logic to it.
http://jsbin.com/eroyac/4/edit#preview

This way i can lock the first row, and the sorting only affects the row after this one. Check this page for other options : http://datatables.net/reference/option/orderFixed
$('#budgytbl').dataTable({
"orderFixed": [ 0, 'asc' ]
})
<table id="budgytbl"...
<tbody>
<tr>
<td></td>
<td id="input-name"></td>
<td id="input-parent"></td>
</tr>
#foreach ($categories as $category)
<tr>
...
</tr>
#endforeach
...

I have a simplier solution.
I create the second tbody in my table and just move all rows I need to persist in that another tbody like so:
initComplete: function() {
var self = this;
var api = this.api();
api.rows().eq(0).each(function(index) {
var row = api.row(index);
if (row.data()...) { // condition here
var $row_to_persist = $(row.node());
var $clone = $row_to_persist .clone();
$(self).find('tbody:last').append($clone);
$total_row.remove();
row.remove();
api.draw();
}
});
}