cluetip on each link

cluetip on each link

gregggregg Posts: 5Questions: 0Answers: 0
edited October 2009 in General
Hi Allan,

I tried to include the plugin cluetip inside datatables. I followed the thread of netman(http://datatables.net/forums/comments.php?DiscussionID=712) and at the end you tell him to look at http://datatables.net/examples/advanced_init/events_post_init.html

I tried to follow your example but i can't succeed in adapting it to cluetip.

My DataTable looks like this :
id (hidden column) | name (html link with id) | ...

clueTip uses this syntax :
[code]
$(document).ready(function() {
$('a.itemct').cluetip({tracking: true});
});
[/code]

and each link inside the "name" column looks like this :
[code]Test[/code]

As for the initialisation of datatables :

[code]var oTable;
$(document).ready(function() {
oTable = $('#itemlist').dataTable( {
"sDom": 'ifrtlp',
"aoColumns": [
{ "bSearchable": false, "bVisible": false }, { "sWidth": "40%", "sClass": "itemname", "fnRender": function ( oObj ) { return "" + oObj.aData[2] + "" }, "sType": "html" }, { "bSearchable": false, "bVisible": false }
],
"iDisplayLength": 50,
"aaSorting": [[ 3, "desc" ], [ 4, "desc" ]],
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "database/json.txt",
} );
} );[/code]

Can you please explain how to use cluetip (on every link of the "name" column, not on every row) ?

gregg
regards

ps: btw i am very impressed with datatables ... it is a very powerful plugin.

Replies

  • allanallan Posts: 63,528Questions: 1Answers: 10,473 Site admin
    Hi Gregg,

    Thanks for your kind words about DataTables :-)

    Try this for your initialisation code:

    [code]
    var oTable;
    $(document).ready(function() {
    oTable = $('#itemlist').dataTable( {
    "sDom": 'ifrtlp',
    "aoColumns": [
    { "bSearchable": false, "bVisible": false }, { "sWidth": "40%", "sClass": "itemname", "fnRender": function ( oObj ) { return "" + oObj.aData[2] + "" }, "sType": "html" }, { "bSearchable": false, "bVisible": false }
    ],
    "iDisplayLength": 50,
    "aaSorting": [[ 3, "desc" ], [ 4, "desc" ]],
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "database/json.txt",
    } );

    $('a.itemct', oTable.fnGetNodes()).cluetip({tracking: true});
    } );
    [/code]
    Hopefully that will do the trick for you!

    Regards,
    Allan
  • gregggregg Posts: 5Questions: 0Answers: 0
    Thank you for your quick answer.

    I replace this :
    [code]$('a.itemct', oTable.fnGetNodes()).cluetip({tracking: true});[/code]

    by :
    [code]
    "fnInitComplete": function() {
    $('a.itemct', oTable.fnGetNodes()).cluetip({tracking: true});
    }
    [/code]

    and it seems to be working like a charm :) I use fnInitComplete and i hope it is the right one.

    Again i am very impressed with datatables and the quick answer on every post.
  • allanallan Posts: 63,528Questions: 1Answers: 10,473 Site admin
    Hi Gregg,

    Yes you are absolutely right to use fnInitComplete(). Sorry, I had missed the fact that you were using sAjaxSource, which necessitates this method. Nice one :-)

    Regards,
    Allan
  • laurellaurel Posts: 3Questions: 0Answers: 0
    Hi, Alan

    I am using AjaxSource . Cluetip works with other link but not with the datatable produce links.

    the code :

    [code]

    var oTable;

    $(document).ready(function() {
    $('#demo').html("");



    oTable = $('#example').dataTable(
    {
    "bProcessing": true,
    "bServerSide": true,

    "aoColumns": [
    { "sTitle": "ID",
    "sWidth": "150px",
    "fnRender": function(oObj) {
    return " D U M " + oObj.aData[0];
    }
    },
    { "sTitle": "ParentID" },
    { "sTitle": "ParentName" },
    { "sTitle": "Name" },
    { "sTitle": "Value" },
    { "sTitle": "Description"}],
    "sAjaxSource": "/setting/datatables",
    "sPaginationType": "full_numbers",
    "bAutoWidth": false,
    "iDisplayLength": 10,
    "sDom": '<"H"l<"toolbar">fpir>t<"F">',
    "fnInitComplete": function() {
    $('a').cluetip({ tracking: true });
    }


    }
    );

    $("div.toolbar").replaceWith('<%=Html.ActionLink("????","Create") %>');


    });



    [/code]


    Thanks !
  • allanallan Posts: 63,528Questions: 1Answers: 10,473 Site admin
    Hi laurel,

    Please see this example: http://datatables.net/examples/advanced_init/events_post_init.html for adding events post initialisation. The second question in the FAQs for server-side processing also notes this: http://datatables.net/faqs

    Allan
This discussion has been closed.