如何将Jquery Datatables省略号渲染器用于模板字段链接按钮?

When I am using with Asp-bound field it's working perfect

当我使用aspbound字段时，它是完美的。

look column one is Ellipsed

第一列被省略了

But when using on template field link button returning blank

但是当使用模板字段时，链接按钮返回空

see it's blank I don't know what should I do to apply the same on the link button columns fields any suggestion?

看，它是空白的我不知道我该怎么做才能在链接按钮列字段中应用相同的东西有什么建议吗?

my script for Eclipsed

我的脚本黯然失色

function pageLoad() {
            var table = $('#gvTest  ').DataTable({
                select: true,
                pageLength: 15,
                lengthChange: false,
                scrollY: "400px",
                scrollX: true,
                scrollCollapse: false,
                order: [15],
                fixedColumns: true,
                columnDefs: [ 
                    { targets: 0, render: $.fn.dataTable.render.ellipsis(7, true) },
                    { targets: 1, render: $.fn.dataTable.render.ellipsis(10, true) },                        
                 ],
                fixedColumns:   {
                    leftColumns: 1,
                }
            });
            $('#BtnReport').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
                });
                var suid = ids;
                var usr = document.getElementById("lblUser").innerText;
                var url2 = "/report/FinalizedReport.aspx?UID=" + suid + "&" + "user=" + usr;
                window.open(url2, '_blank');
                 return false;
            });
            $('#btnAssign').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                 var usr = document.getElementById("lblUser").innerText;
                var url2 = "/PatientAssignment/PatientAssignPage.aspx?UID=" + suid + "&" + "user=" + usr;
                window.location.assign(url2);
                 return false;
            });
             $('#btnAttach').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/Attachment/PatientAttachmentPage.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
             $('#btnHistory').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/History/WriteHistory.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
              $('#btnEmergency').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnEM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $('#btnRemoveEm').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnREM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
    var esc = function ( t ) {
        return t
            .replace( /&/g, '&amp;' )
            .replace( /</g, '&lt;' )
            .replace( />/g, '&gt;' )
            .replace( /"/g, '&quot;' );
    };

    return function ( d, type, row ) {
        // Order, search and type get the original data
        if ( type !== 'display' ) {
            return d;
        }

        if ( typeof d !== 'number' && typeof d !== 'string' ) {
            return d;
        }

        d = d.toString(); // cast numbers

        if ( d.length < cutoff ) {
            return d;
        }

        var shortened = d.substr(0, cutoff-1);

        // Find the last white space character in the string
        if ( wordbreak ) {
            shortened = shortened.replace(/\s([^\s]*)$/, '');
        }

        // Protect against uncontrolled HTML input
        if ( escapeHtml ) {
            shortened = esc( shortened );
        }

        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
    };
};
         }

below is my grid view

下面是我的网格视图

<asp:GridView  ID="gvTest" Width="100%" runat="server"  CssClass="display" AutoGenerateColumns="False" >
   <Columns>
     <asp:BoundField  DataField="PatientID"  HeaderText="Patient ID" >
     </asp:BoundField>
     <asp:TemplateField   HeaderText="Patient Name" SortExpression="PatientName">
    <ItemTemplate  >                
       <asp:LinkButton  ID="lnkVwr"   Text='<%#Eval("PatientName") %>'   OnClientClick = "return imgViewer(this)"  runat="server"    ></asp:LinkButton
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
 </asp:GridView>

How can I use this on link button field? Is there any way to do that?

如何在link按钮字段中使用这个?有什么办法吗?

1 个解决方案

#1

A link in the GridView should look like this

GridView中的链接应该是这样的

<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack(&#39;ctl00$gvTest$ctl11$lnkVwr&#39;,&#39;&#39;)">VDWWD</a>

But after Ellipsis it looks like this

但是在省略之后，它看起来是这样的

<span class="ellipsis" title="<a onclick=&quot;return imgViewer(this);&quot; id=&quot;lnkVwr&quot; href=&quot;javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')&quot; style=&quot;color:#000000!important&quot;>VDWWD</a>"><a&#8230;< span=""></a&#8230;<></span>

As you can see it made a complete mess of the HTML and it's no wonder the browser does not know what to do with it.

正如您所看到的，它把HTML弄得一团糟，难怪浏览器不知道如何处理它。

On top of that it seems that this function doesn't do anything or does not gets called:

除此之外，这个函数似乎什么都不做或者不被调用:

.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )

Take a look on this page how it is done https://datatables.net/blog/2016-02-26

看看这个页面是如何实现的:https://datatables.net/blog/2016-02-26

I made the following snippet. It checks if an href is present in the string and if there is, skips the trimmming of the string.

我做了下面的片段。它检查字符串中是否存在href，如果存在，则跳过字符串的trimmming。

<script type="text/javascript">
    function pageLoad() {
        var table = $('#gvTest').DataTable({
            fixedColumns: true,
            columnDefs: [
                { targets: 0, render: $.fn.dataTable.render.ellipsis() },
                { targets: 1, render: $.fn.dataTable.render.ellipsis() },
            ],
        });
    }

    $.fn.dataTable.render.ellipsis = function () {
        return function (data, type, row) {
            if (type !== 'display') {
                return data;
            }

            if (data.length > 10 && !data.includes("href")) {
                return data.substr(0, 10) + '…';
            } else {
                return data;
            }
        }
    };
</script>

#1