5

Hi so I have created JQuery DataTables that looks like this:

enter image description here

So my question is how to remove that too much padding in the "PICTURE" column?

This is how I initialize the table:

$('#violators_tbl').DataTable({
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [ 2,3 ] },
                { "sWidth": "20%", "aTargets": [ 0 ] },
                { "sWidth": "35%", "aTargets": [ 1 ] },
                { "sWidth": "30%", "aTargets": [ 2 ] },
                { "sWidth": "15%", "aTargets": [ 3 ] },
            ],
        });

This is how I add rows to the table:

function update_table(violator){
        var img_str1 = '<img class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.front_temp_file_path + '\">';
        var img_str2 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.rear_temp_file_path + '\">';
        var img_str3 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.right_temp_file_path + '\">';
        var img_str4 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.left_temp_file_path + '\">';
        violators_table.dataTable().fnAddData([
            violator.violator_id,
            violator.get_full_name(),
            'Under Construction',
            img_str1 + img_str2 + img_str3 + img_str4,
        ]);
    }
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
iamjc015
  • 2,127
  • 6
  • 25
  • 61

3 Answers3

4

There are 2 ways I see:

1. CSS Class Change (Affects everywhere)

There is a css class defined for THeads in datatables look into that:

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}

2. Using Datatables API (Affects Specific Table Instance)

as mentioned in @ArinCool's answer:

aoColumnDefs: It allows passing an array of columns by index and related style or function to be applied on that column. Here is an example 

$('#example').dataTable( {
        "aoColumnDefs": [
            {

                // mention css class-name and targetted column index (starts with zero from left)                    
                { "sClass": "class-name", "aTargets": [ 4 ] },

            }
        ]
    } );
} );

Cheers!!

Language Lassi
  • 2,520
  • 21
  • 24
2

Easier way would be to add the sClass option which adds a class to the designated columns. Thereafter, you can style your my_class according to your needs. This way, only the specific table instance is affected and not the others in your application.

$('#violators_tbl').dataTable({
    "aoColumnDefs": [
      { "sClass": "my_class", "aTargets": [ 0 ] }
    ]
  } );
ArinCool
  • 1,720
  • 1
  • 13
  • 24
1

If this is related to the space between the pictures, you need to set something along the lines of font-size: 0 in your CSS for that cell. Something like:

td.picture-cell {
  font-size: 0;
}

Alternatively, if you really don't want to touch CSS, you could do this with your JS:

var img_str1 = '<img class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.front_temp_file_path + '\"><!--';
var img_str2 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.rear_temp_file_path + '\"><!--';
var img_str3 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.right_temp_file_path + '\"><!--';
var img_str4 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.left_temp_file_path + '\">';

What you're dealing with is rendering white-space. That's the equivalent to a bunch of spaces that occur when code is formatted. The first solution tells the browser (via CSS) to render your white-space characters as nothing (font-size: 0;).

The second solution wraps the end of one img tag to the beginning of the next img tag in a comment, which tells the HTML rendering engine to ignore all characters present between the opening of the comment (<!--) to the closing of the comment (-->).

Of course, if this isn't related to the space between the pictures, then this isn't your solution. I couldn't really tell what padding exactly you're referencing, but based on your mention of the pictures, this was my best educated guess.

Edit

If you're looking for a fix for the padding at the end of the table cell, you need to set the table and subsequent cells' width to auto with CSS like so:

#violators_tbl {
  width: auto!important;
}
#violators_tbl td {
  width: auto!important;
}

From there, you can then readjust the widths for individual columns like this:

#violator_tbl td:nth-child(1) { /* This is the first column */
  width: 40px!important;
}
#violator_tbl td:nth-child(2) { /* This is the second column */
  width: 80px!important;
}

With the number in nth-child referencing the order in which the column appears (1 for the first column, 2 for the second, etc.)

I wouldn't normally recommend the !important modifier, but since I have no idea what the CSS looks like that's driving that table, I won't bother trying to outrank the existing specificity. Just keep in mind that !important is not an optimal pattern to follow under normal circumstances.

Alternatively you can set the container for the table to a specified width as well. What you're seeing with the extra padding at the end of that cell is the table filling its container. If you give it a smaller container, then it will fill less space.

Try wrapping #violators_tbl in a div that looks like <div class='table-shrink'><table id='violators_tbl'></table></div> and then add this CSS:

.table-shrink {
  width: 400px; /* Whatever width works best for you goes here */
}
Josh Burgess
  • 9,327
  • 33
  • 46