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

问题描述

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

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

  projectsTable = $ （'#projects_table'）DataTable（{
dom：'<clean> lf<clean> T<clean><clean> rtip' 
stateSave：true，
data：tableData，
bSortCellsTop：true，
respond：true，
autoWidth 
tableTools：{
aButtons：[
 {
sExtends：text，
sButtonText：新项目，
fnClick：function（mButton，oConfig，oFlash）{
 addProjectDialog（）; 
} 
}，{
sExtends：text，
sButtonText：重置所有过滤器，
fnClick：function（mButton，oConfig，oFlash）{
 resetAllFilters（）; 
} 
} 
 ] 
} 
 }）; 
  

只有用户拥有正确的权限，我才想显示新建项目按钮。是否有可能？

解决方案

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

  var canUserCreateProjects = true; 
 
 // DataTables TableTools按钮选项
 var aButtonsData = []; 
 
 //如果用户可以创建项目
 if（canUserCreateProjects）{
 aButtonsData.push（{
sExtends：text，
 sButtonText：New project，
fnClick：function（mButton，oConfig，oFlash）{
 addProjectDialog（）; 
} 
}）; 
} 
 
 aButtonsData.push（{
sExtends：text，
sButtonText：重置所有过滤器，
fnClick ：function（mButton，oConfig，oFlash）{
 resetAllFilters（）; 
} 
}）; 
 
 //初始化DataTable 
 var projectsTable = $（'＃projects_table'）。DataTable（{
dom：'<clean> lf& tclean><clean> rtip'，
stateSave：true，
data：tableData，
bSortCellsTop 
respond：true，
autoWidth：false，
tableTools：{
aButtons：aButtonsData 
} 
}）; 
  

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?

解决方案

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