Adding a button into a cell

Adding a button into a cell

danielkorzekwadanielkorzekwa Posts: 5Questions: 0Answers: 0
edited July 2011 in DataTables 1.8
Hi,

Imagine we create a two column table from array [[userName,userId],[userName,userId]....]
In the first column we display user name whereas in the second column we put a button with a click listener, e.g. call a function showDetails(userId). At the moment to provide a custom rendering for the second column I use

"fnRender" : function(obj) {
var userId= obj.aData[obj.iDataColumn]
return ''
}

and it works, however I wonder if there is a better was to specify custom rendering with onclick listener for a given cell. Ideally I'd like to have:
"fnRender" : function(obj) {
var userId= obj.aData[obj.iDataColumn]
$(document.createElement("button")).click(marketDetails(userId))
}

I will appreciate any help.

Regards.
Daniel Korzekwa

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    I'm not an expert javascripter, but I prefer the simplicity of approach 1, especially since it already works.

    If you go with path 2, you need to create the element, then add it to the right location, then bind the listener. more code to do the same thing already accomplished in approach 1.
  • danielkorzekwadanielkorzekwa Posts: 5Questions: 0Answers: 0
    Thanks fbas for you answer.

    I'm not a java script expert either and I 'm skilled more in the server side development including some web apps adopting java web frameworks, which do all javascript for you. and maybe it's where my question is coming from.

    The advantage of the second solution I opt for, would be:
    - You can pass an object function rather than raw javascript text, which may help you to create more object oriented components. e.g. function MyTableComponet(onClickListener). Having that fnRender returns just an html string, you need to know where the function you are going to call actually exists in a DOM object to be able to call it.

    - Additionally it's easier to create a button with onClick listener in jquery rather than concatenating it with String, e.g. if a function is named (in my case) placeBet(betSize, betPrice, betType, marketId, runnerId), then concatenating onClick.... from function parameter values doesn't sounds great and also looks pretty ugly.
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    gotcha. you can modularize better with approach 2, and separate HTML content from scripted functionality, etc.

    I'm a little curious about your site. Is it a gambling site? or futures market/prediction market kind of thing?
  • danielkorzekwadanielkorzekwa Posts: 5Questions: 0Answers: 0
    I'm doing some research on betting exchange markets. It's not a gambling and it's not a commercial project.

    The screenshot of a google gadget I'm referring to in my question is here:
    https://picasaweb.google.com/lh/photo/fid2xwi440CHK1SOcRGxEw?feat=directlink

    and the sources of this gadget are here:
    http://code.google.com/p/betting-exchange-google-gadget/source/browse/trunk/betex_bet_placer/bet_placer_widget.js

    Sometimes I write on my research on my blog at blog.danmachine.com
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    Thanks, very cool. I'm a little into this topic myself. I've written a few virtual/game stock exchanges and was interested in setting up betting/futures/prediction things as well.

    What is being exchanged? The prices seem tied to a user? Is it based on their (perceived) success at predictions/bets?
  • danielkorzekwadanielkorzekwa Posts: 5Questions: 0Answers: 0
    We are going a bit out of topic for this forum, if you want to chat on exchanges, then you are more than welcome to contact me by linkedin, you will find my profile there.

    Cheers.
    Daniel
  • danielkorzekwadanielkorzekwa Posts: 5Questions: 0Answers: 0
    Traversing this forum I found a way to achieve solution 2 I described in my question. Basically instead of returning button html by fnRender I use:

    $('#bet_placer_widget_table tbody td').click(function() {
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition(this);

    /**Column 2 is a hedge action.*/
    if (aPos[1] == 2) {
    var runnerId = marketDataJson.runners[aPos[0]].runnerId
    hedge(marketDataJson.marketId, runnerId)
    }
    });

    I would still prefer a fnRender() function which may return an object rather than html string.
This discussion has been closed.