【问题标题】:In Angular JS how to disable column sort feature for selected columns在Angular JS中如何禁用选定列的列排序功能
【发布时间】:2015-06-24 13:08:47
【问题描述】:

在 jquery 数据表中,我可以禁用特定列排序

"aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0, 7]
            }]

有人知道如何在 Angular JS 中做到这一点吗?

<table class="custom-table" datatable="ng" dt-options="dtOptions" id="contacts-list-table">
</table>

myApp.controller("ListCtr", ['DTOptionsBuilder', function(DTOptionsBuilder) {
  $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip') 
}])

此代码隐藏了我的搜索栏但无法隐藏我的第一列和第四列的排序功能?

【问题讨论】:

  • 您希望您的 tr 元素不可点击?你也可以发布tr代码吗?如果您粘贴完整的表格代码会很有帮助。
  • 其中一种方法是您可以使用 ng-click = "$event.stopPropogation();"对于那个 div/tr 元素并在 js 中操作它......如果您提供有关如何实现表格的更多详细信息,将为您提供更具体的答案
  • 你能提供一个小提琴或plunker或发布你的表格代码

标签: angularjs angular-datatables


【解决方案1】:

角度数据表等价于

aoColumnDefs: [{ bSortable: false, aTargets: [0, 4] }]

$scope.dtColumnDefs = [
   DTColumnDefBuilder.newColumnDef(0).notSortable(),
   DTColumnDefBuilder.newColumnDef(4).notSortable()
];

...

<table class="custom-table" dt-column-defs="dtColumnDefs" datatable="ng" dt-options="dtOptions" id="contacts-list-table"></table>

您必须在控制器中包含DTColumnDefBuilder

myApp.controller("ListCtr", ['DTOptionsBuilder', 'DTColumnDefBuilder',
    function(DTOptionsBuilder, DTColumnDefBuilder) {
       $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip');
       $scope.dtColumnDefs = [
          DTColumnDefBuilder.newColumnDef(0).notSortable(),
          DTColumnDefBuilder.newColumnDef(4).notSortable()
       ];
    }
])

http://l-lin.github.io/angular-datatables/archives/#!/api

【讨论】:

  • 你知道如何在角度数据表中设置“aLengthMenu”:[[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]]
  • @vinothini,太好了,你让它工作了(显然?) - 关于aLengthMenu,没有“翻译”的名称/方法,但是你应该在你的情况下使用.withOption('aLengthMenu', [[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]])$scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C&lt;"clear"&gt;lfrtip').withOption('aLengthMenu', [[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]]); ....withOption() 只需将this[key] = value 添加到选项文字中。
  • @davidkonrad 我正遭受同样的问题。你能提供任何帮助吗?这里是我的问题的链接stackoverflow.com/questions/44501820/…
【解决方案2】:

我已经尝试了所有可能的解决方案来禁用排序,但唯一对我有用的是:order: falseUse this for reference

我的dtOptions 如下

vm.dtOptions = {
        dom: '<"top"f>rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>',
        pagingType: 'simple',
        autoWidth: false,
        responsive: true,
        order: false, // This fixed the issue
        columnDefs : [{
            targets: [0, 1, 2, 3, 4, 5, 6, 7], // column or columns numbers
            orderable: false,  // This was not working
            filterable: false,
            sortable  : false                
            },
            {
                // Target the actions column
                targets           : 8,
                responsivePriority: 1,
                filterable        : false,
                sortable          : false,
                orderable: false
            }                
        ]
    }

【讨论】:

    猜你喜欢
    • 2021-09-03
    • 1970-01-01
    • 1970-01-01
    • 2017-02-07
    • 2018-09-07
    • 2015-11-07
    • 2022-10-26
    • 2017-04-24
    • 1970-01-01
    相关资源
    最近更新 更多