Why is the data in the table not aligned properly?

izumov

my page is http://izumov.ultimatefreehost.in/goods007.html
When initiating, for example, I tell the data in the 2nd column to be centered

"columnDefs": [
        {"sWidth": "136px", "aTargets": [ 0  ] }, //код
        {"sWidth": "136px", "aTargets": [ 1  ],className:'dt-body-center' }, 

and left alignment is displayed. What is my mistake?

colin

Does the column have the class defined in columns.className? If so, then the issue is with your CSS.

Colin

izumov

I had two columns in which I displayed icons and I assigned them class names for subsequent processing of the click event

{ className:"position",targets: [11],
     "render": function ( data, type, row ) {
       return '<img src="add_my.png">'
     }
   },
    { className:"position_reduce",targets: [12],
     "render": function ( data, type, row ) {
       return '<img src="minus_my.png">'
     }
   },

after adding code to style these columns, I inserted the code before these lines

{"sWidth": "50px", "aTargets": [ 11  ],className:'dt-body-center' }, 
        {"sWidth": "50px", "aTargets": [ 12  ],className:'dt-body-center' }, 

event handlers stopped working because column class names were redefined. What do i do?

kthorngren

I don't remember which has priority but if you define options using columns and the same options using columnDefs one will overwrite the other. Move the two lines you have in columnDefs into the specific columns option. combine the columns.className into one string with spaces separating the classes, for example: className:"position dt-body-center",.

Kevin

loquat7

            columnDefs : [ {
                targets : 1,
                className : "text-center"
            }, {
                targets : 2,
                className : "text-center"
            }, {
                targets : 3,
                className : "text-center"
            }, {
                targets : 4,
                className : "text-center"
            }, {
                targets : 5,
                className : "text-center"
            }, {
                targets : 6,
                className : "text-center"
            } ],

izumov

followed your advice and rewrote the code

{ className:"position dt-body-center",targets: [11],
     "render": function ( data, type, row ) {
       return '<img src="add_my.png">'
     }
   },
    { className:"position_reduce dt-body-center",targets: [12],
     "render": function ( data, type, row ) {
       return '<img src="minus_my.png">'
     }

now everything works as it should thanks for the valuable and quick answer