Hello everyone. I'm using Tapestry-Jquery and I'm trying to configure my
datatable to use fnRowCallback. The idea behind fnRowCallback is to style a
row based on cell data. In my case if a purchase order is a rush, add a
class to the row styling it to red. 

The datatable example in the API says fnRowCallback should be configured as
followed,

   $(document).ready( function() {
     $('#example').dataTable( {
       "fnRowCallback": function( nRow, aData, iDisplayIndex,
iDisplayIndexFull ) {
         // Bold the grade for all 'A' grade browsers
         if ( aData[4] == "A" )
         {
           $('td:eq(4)', nRow).html( '*A*' );
         }
       }
     } );
   } );

I'm configuring my datatable serverside and passing it into my component
like so, 

java 
public JSONObject getOptions() {
        JSONObject json = new JSONObject();
        json.put("bJQueryUI", "true");
        json.put("bStateSave", true);
        json.put("bAutoWidth", true);
}

tml
<t:jquery.datatable t:source="purchaseRequests" 
                     t:mode="false" 
                     t:options="options" 
                     rowsPerPage="25" 
                     t:row="purchaseRequest" 
                     t:mixins="rowColor" 
                     >

Because JSON doesn't support functions, I created a mixin called rowColor
that handles fnRowCallback,  however I'm getting script limit errors in ie8.
My mixin/script is as followed. 


RowColor mixin

public void afterRender() {
        JSONObject opt = new JSONObject();
        opt.put("id", table.getClientId());
        js.addInitializerCall(InitializationPriority.EARLY, "rowColor",
opt);
    }


(function( $ ) {

    T5.extendInitializers(function(){

        function rowColor(specs) {

            //Insert second tr row in the thead part
            var oTable = $("#"+specs.id).dataTable(),
            oldoptions  = oTable.fnSettings();
            var newoptions = $.extend(oldoptions , {
                "bJQueryUI": true,
                "bStateSave": true,
                "fnRowCallback" : function( nRow, aData, iDisplayIndex,
iDisplayIndexFull ) {
                    if (aData["rush"] == "Rush" ) {
                        nRow.className = nRow.className + " gradeX";  
                    }
                }
            })
            
            oTable.fnDestroy();
            $("#"+specs.id).dataTable(newoptions);

        }

        return {
            rowColor : rowColor
        }
    });

}) ( jQuery )


Does anybody else know how to do this?



--
View this message in context: 
http://tapestry.1045711.n5.nabble.com/Tapestry-Jquery-Datatable-Configuration-tp5719753.html
Sent from the Tapestry - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org

Reply via email to