当前位置：文江博客话题详情

使 dataTables.js jQuery 插件中的列不可排序

发布于 2024-11-04 02:23:04 字数 141 浏览 1 评论 0原文

我正在使用 dataTables.js jQuery 插件。

我的表的第一列是行计数器，所以我不希望用户对其进行排序。最后一列包含用户可以在一行上执行的一些操作链接。如何使这两列不可排序？

注意：我使用数据表的管道（服务器端进程）模式。

原文

分享到QQ

分享到微博

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

发布评论

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

冰之心 2024-11-11 02:23:05

这是通过将 bSortable 设置为 false 来完成的：

/* Using aoColumnDefs */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumnDefs": [ 
            { "bSortable": false, "aTargets": [ 0 ] }
        ] } );
} );

/* Using aoColumns */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [ 
            { "bSortable": false },
            null,
            null,
            null,
            null
        ] } );
} );

This is done by setting bSortable to false:

/* Using aoColumnDefs */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumnDefs": [ 
            { "bSortable": false, "aTargets": [ 0 ] }
        ] } );
} );

/* Using aoColumns */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [ 
            { "bSortable": false },
            null,
            null,
            null,
            null
        ] } );
} );

回复收藏 0 原文

め可乐爱微笑 2024-11-11 02:23:05

DataTables 1.10+ 还支持 HTML5 data- 样式属性，包括 data-sortable="false"，这使得该列不符合排序条件：

<table>
    <thead>
        <tr>
            <th data-sortable="false">Row</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Organization</th>
            <th data-sortable="false">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            [etc]
        </tr>
    </tbody>
</table>

查看jsFiddle 中的演示

DataTables 1.10+ also supports HTML5 data- style attributes, including data-sortable="false", which makes the column ineligible for sorting:

<table>
    <thead>
        <tr>
            <th data-sortable="false">Row</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Organization</th>
            <th data-sortable="false">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            [etc]
        </tr>
    </tbody>
</table>

See this demo in jsFiddle

回复收藏 0 原文

旧时模样 2024-11-11 02:23:05

aaSortingFixed

这个参数基本一致
到 aaSorting 参数，但不能
被用户交互覆盖
桌子。这意味着你
可以有一列（可见或
隐藏）排序将始终
强制先进行 - 之后的任何排序
（来自用户）将是
按要求执行。这可以是
对于将行分组在一起很有用。

使用示例：

$(document).ready( function() {
    $('#example').dataTable( {
         "aaSortingFixed": [[0,'asc'],[5,'asc']]
    } );
} );

0 是“不可排序”行的编号（从左开始）。（因此在该示例中，第一列和第六列是固定的）

官方文档

aaSortingFixed

This parameter is basically identical
to the aaSorting parameter, but cannot
be overridden by user interaction with
the table. What this means is that you
could have a column (visible or
hidden) which the sorting will always
be forced on first - any sorting after
that (from the user) will then be
performed as required. This can be
useful for grouping rows together.

Example of usage:

$(document).ready( function() {
    $('#example').dataTable( {
         "aaSortingFixed": [[0,'asc'],[5,'asc']]
    } );
} );

0 is number of your 'unsortable' row (from left). (So in that example the first and the sixths column are fixed)

Official Documentation

回复收藏 0 原文

晨曦÷微暖 2024-11-11 02:23:05

您可以定义一个回调函数来支持单独列中不可更改的数字顺序：

$('#someId').dataTable({
        // ...
        "aoColumns": [
            // ...
            {"bSortable": false}, // set unsortable this column
            // ...
        ],
        fnDrawCallback: function(oSettings) {
            $(this).find('tbody tr').each(function(index) {
                $(this).find('td').eq(1).text(index + 1); // .eq([index of column])
            });
        }
    });

You can define a callback function for support unchangeable numbers order in separate column:

$('#someId').dataTable({
        // ...
        "aoColumns": [
            // ...
            {"bSortable": false}, // set unsortable this column
            // ...
        ],
        fnDrawCallback: function(oSettings) {
            $(this).find('tbody tr').each(function(index) {
                $(this).find('td').eq(1).text(index + 1); // .eq([index of column])
            });
        }
    });

回复收藏 0 原文

~没有更多了~