如何有条件地显示 TableTools 按钮 [英] How to conditionally display TableTools buttons

问题描述

我使用 jQuery DataTables 和 TableTools 扩展来在表头中显示按钮.但是是否可以选择在满足某些条件时显示按钮?

I'm using jQuery DataTables and TableTools extension to display buttons in table header. But is there an option to show button when some condition is met?

我的表初始化代码如下所示:

My table initialization code is shown below:

projectsTable = $('#projects_table').DataTable({
    "dom": '<"cleaner">lf<"cleaner">T<"cleaner"><"cleaner">rtip',
    "stateSave": true,        
    "data":tableData,
    "bSortCellsTop": true,
    "responsive": true,
    "autoWidth": false,
    "tableTools":{
        "aButtons": [
            {
                "sExtends": "text",
                "sButtonText": "New project",
                "fnClick": function (mButton, oConfig, oFlash){
                    addProjectDialog();
                }
            },{
                "sExtends": "text",
                "sButtonText": "Reset all filters",
                "fnClick": function (mButton, oConfig, oFlash){
                    resetAllFilters();
                }
            }
        ]
    }
});

我想仅在用户具有正确权限时才显示新建项目"按钮.有什么可能吗?

I want to display "New project" button only if user has right permissions. Is it somehow possible?

推荐答案

由于 aButtons 是一个数组，可以如下解决:

Since aButtons is an array, this could be solved as shown below:

var canUserCreateProjects = true;

// DataTables TableTools buttons options
var aButtonsData = [];

// If user can create projects
if(canUserCreateProjects){
   aButtonsData.push({
      "sExtends": "text",
      "sButtonText": "New project",
      "fnClick": function (mButton, oConfig, oFlash){
         addProjectDialog();
      }
   });
}

aButtonsData.push({
   "sExtends": "text",
   "sButtonText": "Reset all filters",
   "fnClick": function (mButton, oConfig, oFlash){
      resetAllFilters();
   }
});

// Initialize DataTable
var projectsTable = $('#projects_table').DataTable({
    "dom": '<"cleaner">lf<"cleaner">T<"cleaner"><"cleaner">rtip',
    "stateSave": true,        
    "data":tableData,
    "bSortCellsTop": true,
    "responsive": true,
    "autoWidth": false,
    "tableTools": {
        "aButtons": aButtonsData
   }
});

这篇关于如何有条件地显示 TableTools 按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！