Customization of column button text

jenny228

Hi,

I have a DataTable which have a Show/Hide button. The columns buttons are displayed 1,2,3,4,5,6,7 .

I wanted to custom text the column button. How to achieve this?
Every button should display a different text.

"buttons" : [
{
extend : 'colvis',
text : '<i class="colvis" style="font-size:09px">Show / Hide</i>',
titleAttr : 'Show/Hide',
columns : [ 1, 2, 3, 4, 5, 6, 7 ]
}
]

Thanks.

colin

This example here should get you going, it's showing how to do that,

Colin

jenny228

Currently my column button picks up the text from the header columns. I dont want the header to appear in the column button text. It should be entirely different. Should be something like this for ex

{"xxx","hhh","rft", "fgv", "rtee", "tredcm", "gfor"}

kthorngren

Instead of return (idx+1)+': '+title; shown in the example Colin linked to you will need to return something that matches your logic for choosing the name.

Kevin

jenny228

ok ..I got it..Thanks

I understood what to do. I wrote the following code.

But the text is still not displayed. What mistake am I making here?

             "buttons" : [  
                {
                                extend : 'colvis',
                                text : '<i class="colvis" style="font- 
                                                                            size:09px">Show / Hide</i>',
                                titleAttr : 'Show/Hide',
                                columns : [ 1, 2, 3, 4, 5, 6, 7 ],
                                **columnText: function ( dt, idx, title ) {
                                    if(idx==1){
                                        return "Hi";
                                    }
                                    if(idx==2){
                                        return 'hello';
                                    }
                                    if(idx==3){
                                        return 'hiiii';
                                    }

                                    if(idx==4){
                                        return 'Text';
                                    }

                                    return (idx+1)+': ';
                                    }**
                        }

]

jenny228

"buttons" : [ 
   {
                   extend : 'colvis',
                   text : '<i class="colvis" style="font-
                                                               size:09px">Show / Hide</i>',
                   titleAttr : 'Show/Hide',
                   columns : [ 1, 2, 3, 4, 5, 6, 7 ],
                   columnText: function ( dt, idx, title ) {
                       if(idx==1){
                           return "Hi";
                       }
                       if(idx==2){
                           return 'hello';
                       }
                       if(idx==3){
                           return 'hiiii';
                       }
 
                       if(idx==4){
                           return 'Text';
                       }
 
                       return (idx+1)+': ';
                       }
           }

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Is it working with your last code snippet?

Kevin

jenny228

My code snippet works
But ts always the default header text which appears on column button
with or without "columnText".

There are 22 columns in my datatable and only 7 column buttons appear on show/Hide and they function as expected. columns : [ 1, 2, 3, 4, 5, 6, 7 ]

jenny228

Is any css /js missing in my path?

kthorngren

I'm confused.

My code snippet works
But ts always the default header text which appears on column button
with or without "columnText".

Maybe I'm not understanding the problem. I took your code and built this test case:
http://live.datatables.net/welovopu/1/edit

Does the test case work as you want? If not what do you want to change?

Kevin

jenny228

Thanks Colin and Kthorngren. Your example really helped. I realised specific css and js were missing in my classpath. It's working now. Appreciate your help so much.