简体   繁体   中英

How to hide a particular column in jQuery jTable with the user option?

I am using jQuery jtable to fetch data from my server. In my jtable I need to hide certain columns with the user option, for this I have written a function inside my fields as shown. In this particular table I want to hide the Description column for this I am getting the value such as 'Device Fault' from the user. So, if the user select device fault I want to hide only that particular column in the table.

        fields: {
        Date: {
            title: 'Date',
        },
        Event_name: {
            title: 'Event Name',
        },
        Event_Description: {
            title: 'Event Description',

        },
        Tag: {
            title: 'Tag',
        },
        Description: {
            title: 'Description',
            visibility: function(data){
              if(selectedEventName == 'Device Faults'){
                return = hidden;
              }
              else{
                return = fixed;
              }
            },
        },
        Serial_number: {
            title: 'Serial Number',
        },
        IP_address: {
            title: 'IP Address',
        },
    },

How can I achieve this, can someone help me with this.

Thanks

First thing to say, is that jTable may have built in functionality that will meet the user requirement. Right click on the column headings and a pop up appears, where columns can be checked/unchecked to display or hide the column respectively.

Secondly, the field option visibility must be a static value not a function.

Once the table has been initialised, you can use the jtable('changeColumnVisibility') function to hide or display a column.

eg.

$('#mytable').jtable('changeColumnVisibility','Description','hidden');

You can use visibility: 'hidden'. For Example.......

 fields: {
        HiddenInfo: {
            title: 'HiddenInfo',
            width: '10%',
            visibility: 'hidden'
        },

More details, visit.... http://jtable.org/Demo/ColumnHideShow

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM