fnRowCallback using same procedure as fnDrawCallback

fnRowCallback using same procedure as fnDrawCallback

jp_noronhajp_noronha Posts: 59Questions: 0Answers: 0
edited November 2011 in Plug-ins
Hi Allan

Do you think possible for fnRowCallback to implement the same method as fnDrawCallback, allowing the existance of more than one function per row?
The problem is that at the moment i allready have code assign for fnRowCallback, by calling the plugin SearchHighlighting and now i'm implementing another that could use a similar aproach. In this case is a plugin to show inline charts, with the help of jQuery Sparklines plugin.

joao noronha

Replies

  • jp_noronhajp_noronha Posts: 59Questions: 0Answers: 0
    since at the moment i cannot use more than one function with fnRowCalback i went head and made the inlineChart plugin with fnDrawCallback. It uses JQuery Sparklines plugin (http://omnipotent.net/jquery.sparkline/)

    [code]
    /*
    * File: jquery.InlineChart.js
    */
    (function($) {

    $.fn.InlineChart = function(options) {

    var defaults = {
    sClassName: "InlineChart",
    sType: "bar",
    iColInline: -1,
    aiInlineCols: [],
    sNullZeroChart: "Default",
    sWidthChart: "auto",
    sHeigthChart: "auto",
    sLineColor: "blue",
    sFillColor: "lightblue",
    bShowSpots: false,
    sWidthBar: "auto",
    sBarColor: "blue",
    sNegBarColor: "red",
    sZeroBarColor: "lightblue",
    sNullBarColor: "gray",
    asMapColorCol: [],
    aoMapColorVal: null
    };


    return this.each(function(index, elem) {

    var oTable = $(elem).dataTable();
    var properties = $.extend(defaults, options);

    //Validar se as propriedades estao correctas
    if (properties.iColInline < 0) {
    return;
    }
    if (properties.aiInlineCols.length < 2) {
    return;
    }

    var _fnDrawCallBackInlineChart = function(oSettings) {

    if (oSettings.aiDisplay.length == 0) {
    return;
    }

    var nTrs = $('tbody tr', oTable);

    for (var r = 0; r < nTrs.length; r++) {
    // Loop through the rows/fields for matches
    var nRow = nTrs[r];
    var sValues = "";

    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition( nRow );

    /* Get the data array for this row */
    var aData = oTable.fnGetData( aPos );

    for (var i = 0; i < properties.aiInlineCols.length; i++) {
    var sData = aData[properties.aiInlineCols[i]];

    if (properties.sNullZeroChart == "Default") {
    if ((sData == null) || (sData == 'undefined'))
    sData = "null";
    }
    if (properties.sNullZeroChart == "Null2Zero") {
    if ((sData == null) || (sData == 'undefined'))
    sData = "0";
    }
    if (properties.sNullZeroChart == "Zero2Null") {
    if ((sData == null) || (sData == 'undefined'))
    sData = "null";
    else if (sData == 0)
    sData = "null";
    }

    sData.replace("%", ""); //para poder trabalhar valores percentuais
    sValues = sValues + sData + ",";
    };

    sValues = sValues.substring(0, sValues.length - 1);
    $('td:eq(' + properties.iColInline + ')', nRow).addClass(properties.sClassName);
    $('td:eq(' + properties.iColInline + ')', nRow).attr("values", sValues);
    }

    //Draw inline chart
    var cells = $("." + properties.sClassName, oTable);
    if (cells !== null && cells !== 'undefined')
    {
    if (properties.sType == 'bar') {
    if (properties.aoMapColorVal !== null && properties.aoMapColorVal !== 'undefined')
    cells.Sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor, mapColor: properties.aoMapColorVal });
    else {
    if (properties.asMapColorCol.length !== 0)
    cells.Sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor, mapColor: properties.asMapColorCol });
    else
    cells.Sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor });
    }
    }

    if (properties.sType == "line") {
    if (properties.bShowSpots)
    cells.Sparkline('html', { type: "line", width: properties.sWidthChart, height: properties.sHeigthChart, lineColor: properties.sLineColor, fillColor: properties.sFillColor });
    else
    cells.Sparkline('html', { type: "line", width: properties.sWidthChart, height: properties.sHeigthChart, lineColor: properties.sLineColor, fillColor: properties.sFillColor, spotColor: false, minSpotColor: false, maxSpotColor: false });
    }

    if (properties.sType == 'pie') {
    if (properties.asMapColorCol.length !== 0)
    cells.Sparkline('html', { type: "pie", width: properties.sWidthChart, height: properties.sHeigthChart, mapColor: properties.asMapColorCol });
    else
    cells.Sparkline('html', { type: "pie", width: properties.sWidthChart, height: properties.sHeigthChart });
    }
    }
    };

    oTable.fnSettings().aoDrawCallback.push({
    "fn": _fnDrawCallBackInlineChart,
    "sName": "fnInlineChartDraw"
    });

    oTable.fnDraw();
    });
    };
    })(jQuery);
    [/code

    Example:
    [code]
    var odt = $('#example').dataTable();
    odt.InlineChart({iColInline: 2, aiInlineCols: [3,4]});
    [/code]

    But it gives me an error. Can you give me a hand to understand what went wrong Allan?
    Thanks in advance

    Joao Noronha
This discussion has been closed.