Calculated column with hyperlink to open items in modal works only on the 1st page of list view

Question

In SharePoint 2013 I have a Site page with list view web part that contains calculated column. In this column the following function is executed to be able to open items in modal:

$(document).ready(function() {
$("a.viewItem").each(function() {
    var headerid = $(this).parent().parent().parent("tr").attr("iid").split(",")[1]
    var href = "URL"+headerid;
    console.log(href);
    var onlink = "openInDialog(500,500,true,true,true,'"+ href +"&IsDlg=1');"
    $(this).attr('onclick', onlink);
}); 

});

Unfortunately, this works only on the first page of list view. If 2nd page is opened (next 30 items), the script is not executed.

How can I fix this so that it works for all list items?

Answer 1

You can use the following CSR script in a JS file and attach it as JSLink to the list view webpart(under Advanced properties)

$(document).ready(function ()
{

    var linkFunction = function ()
    {
        $("a.viewItem").each(function ()
        {
            var headerid = $(this).parent().parent().parent("tr").attr("iid").split(",")[1]
                var href = "URL" + headerid;
            console.log(href);
            var onlink = "openInDialog(500,500,true,true,true,'" + href + "&IsDlg=1');"
                $(this).attr('onclick', onlink);
        }
        );
    } // close linkFunction

    SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function ()
    {
        linkFunction();
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        {
            OnPreRender: function (ctx)
            {
                linkFunction();
            }, // close OnPreRender
            OnPostRender: function (ctx)
            {
                linkFunction();
            } // close OnPostRender
        }
        ); // close RegisterTemplateOverrides

    }
    ); // close executeFunc

}
); // close ready

Here OnPreRender and OnPostRender will execute when ever you do a sort, filter and move to another page in the list view making sure the events are attached to the required objects.

This page helped me in designing CSR codes like above and explaind how OnPreRender and OnPostRender works.