jquery - 删除数据表列中的额外填充

Question

嗨，我创建了如下所示的 JQuery DataTables:

所以我的问题是如何删除“图片”列中过多的填充？

这是我初始化表的方式:

$('#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 ] },
            ],
        });

这是我向表中添加行的方法:

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,
        ]);
    }

Answer 1

我有两种查看方式:

1。 CSS 类更改(影响各处)

在数据表中为 THeads 定义了一个 css class，请查看:

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

2。使用Datatables API(影响特定表实例)

正如@ArinCool 的回答中提到的:

aoColumnDefs:它允许按索引传递列数组以及要应用于该列的相关样式或函数。这是一个例子

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

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

            }
        ]
    } );
} );

干杯!!