The show more link on datatable is not working on 2nd page and further

avi@arunesh · April 2016

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
                                                    + '&nbsp;</span><span class="morecontent"><span>'
                                                    + h
                                                    + '</span>&nbsp;&nbsp;<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.

allan · April 2016

The columns.render option 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

avi@arunesh · April 2016

i tried it puttin outside like below code , but it doesn't help

$("#notesTable tbody tr").on("click", ".morelink", 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;
                                                    });

allan · April 2016

Can you link to the page showing the issue so it can be debugged please.

Allan

avi@arunesh · April 2016

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

allan · April 2016

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

avi@arunesh · April 2016

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 .

allan · April 2016

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

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

Answers