如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？

Question

当我使用它时Asp-bound field它完美地工作看column一是Ellipsed但是当使用template field link button它时它返回空白看到它是空白的我不知道我应该怎么做才能在链接按钮列字段上应用相同的任何建议？我script的Eclipsedfunction 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;            });      下面是我的网格视图<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>如何在链接按钮字段上使用它？有没有办法做到这一点？

Answer 1

GridView 中的链接应如下所示：

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

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

<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>

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

最重要的是，这个函数似乎没有做任何事情或没有被调用：

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

看看这个页面是如何完成的。

我做了以下片段。它检查href字符串中是否存在an ，如果存在，则跳过对字符串的修剪。

<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>