The show more link on datatable is not working on 2nd page and further
The show more link on datatable is not working on 2nd page and further
avi@arunesh
Posts: 8Questions: 3Answers: 0
i've a "show more" link in a data table on rows , cliking on it will show the full text.
the problem is it's working in the first page , but if i moved to next page or change the page length it doesn't work .
the data in the data table is coming from server.
here is my code for that column in data table:-
{
"mData" : "comment",
"mRender" : function(data,type, full) {
var showChar = 50;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
var contentt = JSON.stringify(data);
var content = contentt.replace(/["]+/g,'').substring(1,contentt.length - 1);
if (content.length > showChar) {
var c = content.substr(0,showChar);
var h = content.substr(showChar - 1,content.length- showChar);
var html = c
+ '<span class="moreellipses">'
+ ellipsestext
+ ' </span><span class="morecontent"><span>'
+ h
+ '</span> <a href="" class="morelink">'
+ moretext
+ '</a></span>';
return html.toString();
}
$(".morelink").click(function() {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
return data;
}
}
i tried binding it like
$("#notestable").on("click", ".moreclick", function ...);
but it doesn't help.
thanks in advance.
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
The
columns.renderoption doesn't have access to the DOM elements. You should use$("#notestable").on("click", ".moreclick", function ...);as you suggested, but outside of the table's initialisation. See this example.Allan
i tried it puttin outside like below code , but it doesn't help
Can you link to the page showing the issue so it can be debugged please.
Allan
oh , sorry for that , it's in my local file . and i may not allowed to share it .
but i tried debugging , from 2nd page the control is not even going into the "morelink" function .and it's closing the UI
I'm afraid there isn't much help I can offer with a link to the page, or a test page such os on JSFiddle or http://live.datatables.net showing the issue.
Allan
hi , appreciate your help . i somehow solved this using bind.
$(table).bind( 'draw', clickMore);
and putting the above function in clickMore()
but now if i go to next page , and then come back on first page , the first page click event are stuck , if i debug it will work Or if i again go to next page and come back it'll work.
it's stuck sometimes in between .
I think you want to use a delegate event handler like the events FAQ mentions. However, as I said, I can't do anything without a test case.
Allan