在 jQuery DataTables 中使用锚标记对列进行排序

发布于 2024-08-14 08:39:00 字数 541 浏览 5 评论 0原文

我使用 jQuery 数据表插件对表数据进行排序。如果列包含简单文本，排序效果很好。如果我在文本上放置任何锚标记条件，则列排序无法正确排序。

我以以下方式显示值：

<td><?php if ($allAptArr[$d][27]['staffinactive'] == 1) { ?>
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
    <?php } else { ?>
        <a href='#' onClick="redirectToStaff('<?=$allAptArr[$d][10]['staff_id']?>');">
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
        </a>
<?php } ?> </td>

使用此代码，列排序失败。

原文

I used the jQuery datatable plugin in sort the table data. The sorting works fine if a column contains simple text. If I put any anchor tag condition on a text then the column sorting does not sort properly.

I displayed the values in following manner:

<td><?php if ($allAptArr[$d][27]['staffinactive'] == 1) { ?>
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
    <?php } else { ?>
        <a href='#' onClick="redirectToStaff('<?=$allAptArr[$d][10]['staff_id']?>');">
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
        </a>
<?php } ?> </td>

with this code the column sorting fails.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绮筵 2024-08-21 08:39:00

在ready函数之前添加这个：

    //sets up numeric sorting of links
    jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(y) ) ? -1 : ((x > y || isNaN(x)) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y) ) ? -1 : 0));
    };

并在ready函数处：

        "aoColumns": [
          { "sType": "num-html" },
          null,
          etc. etc.
        ]

这就是它对我来说如何使用锚点的工作方式，整数按其应有的方式排序。

add this before the ready function:

    //sets up numeric sorting of links
    jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(y) ) ? -1 : ((x > y || isNaN(x)) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y) ) ? -1 : 0));
    };

and at the ready function:

        "aoColumns": [
          { "sType": "num-html" },
          null,
          etc. etc.
        ]

This is how it works for me with anchors, integers are getting ordered as they should.

回复收藏 0 原文

无妨# 2024-08-21 08:39:00

将列类型设置为“html”：

$('#example').dataTable( {
    "aoColumns": [ 
        { "sType": "html" },
        null,
        null,
        null,
        null
    ]
} );

这将在排序之前去除 HTML 标签。

请参阅sType 参数文档

Set column type to 'html':

$('#example').dataTable( {
    "aoColumns": [ 
        { "sType": "html" },
        null,
        null,
        null,
        null
    ]
} );

This will strip HTML tags before sorting.

See documentation for sType parameter

回复收藏 0 原文

挥剑断情 2024-08-21 08:39:00

我只是在涉及链接时使用数据表进行排序时遇到问题 - 我有一列在某些单元格中有链接，而在其他单元格中没有链接。它似乎是排序，但它是对所有链接进行排序，然后对所有非链接进行排序，而不是同时对链接和非链接进行排序。事实证明，问题出在标记中的间距。当我去掉任何 a 标签周围的所有非必要间距时，我的列排序完美。

回复收藏 0 原文

仲春光 2024-08-21 08:39:00

这对于答案来说已经很晚了，但它仍然对其他读者有帮助，你可以采取一个虚拟专栏。还隐藏该虚拟列并按虚拟列对实际列进行排序。假设我有三列，然后添加第四列作为虚拟列并将其放入数据表调用中

$('#example').dataTable({ "aoColumns": [null, null, {"iDataSort":3 }, { "bVisible": false}]);

This is quite late for the answer, still it will helpful for other readers, You can take a dummy column. Also hide that dummy column and sort actual column by dummy column. Suppose I have three columns then add fourth coulmn as dummy and put this in datatable call

$('#example').dataTable({ "aoColumns": [null, null, {"iDataSort":3 }, { "bVisible": false}]);

回复收藏 0 原文

海的爱人是光 2024-08-21 08:39:00

我使用 DataTables HTML5 数据属性来获取所需的功能包含在锚标记中的可排序日期。

以下是多个表格单元格之一的 HTML 片段：

<td data-order="20180115"><a href="#">01/15/2018</a></td>

I used the DataTables HTML5 data attributes to get the desired function of a sortable date that is wrapped in an anchor tag.

Here is an HTML snippet for one of many table cells:

<td data-order="20180115"><a href="#">01/15/2018</a></td>

回复收藏 0 原文

计㈡愣 2024-08-21 08:39:00

我认为这是因为您没有将锚点与同一列中的锚点数据混合。你也不应该使用onClick，特别是jquery，只需使用正确的选择器设置一个click()函数。

回复收藏 0 原文

晌融 2024-08-21 08:39:00

正如这些人所说，并非您放入 tds 中的所有内容都是可排序的。例如，需要专门禁用链接。下面的代码片段将禁用表中第一列的排序。

<script type="text/javascript">
$(document).ready(function ()
{
    $('#example').dataTable({
            "aoColumnDefs":[{"bSortable": false, "aTargets": [0]}]});
});
</script>

As the guys said, not all content you put in the tds is sortable. Links for example need to be specifically disabled. The code snippet below will disable sorting for the first column in the table.

<script type="text/javascript">
$(document).ready(function ()
{
    $('#example').dataTable({
            "aoColumnDefs":[{"bSortable": false, "aTargets": [0]}]});
});
</script>

回复收藏 0 原文