jQuery Datatables align center 1 column
78,751
Solution 1
You can use your theme classes (bootstrap), or your own in columndef. like
text-right, text-left, text-center
'columnDefs': [
{
"targets": 0, // your case first column
"className": "text-center",
"width": "4%"
},
{
"targets": 2,
"className": "text-right",
}
]
Solution 2
Also, you can group the columns to apply one style to many like so:
columnDefs: [
{ className: 'text-right', targets: [7, 10, 11, 14, 16] },
{ className: 'text-center', targets: [5] },
], ...
Solution 3
You can also specify a single css class name inside each column object.
In your case:
{
data: 'Status',
render: function (data, type, row) {
switch (data) {
case 1:
return '<div id="circleRed"></div>';
case 2:
return '<div id="circleGreen"></div>';
case 3:
return '<div id="circleOrange"></div>';
}
},
className: "text-center"
}
Solution 4
You can style that manually
$("select_your_table").DataTable({
....
columns: [
{
mData: "select_property_from_json",
render: function (data) {
return '<span style="display: flex; flex-flow: row nowrap; justify-content: center;">data</span>';
}
},
],
....
});
Comments
-
Ballon Ura almost 3 years
Want to align center just the first column called "Status":
$("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { cardEndingWith: $("#ccn").val(), status: $("#status").val(), supplier: $("#supplier").val(), fromDate: $("#fromDate").val(), toDate: $("#toDate").val() } }, columns: [ { data: 'Status', render: function (data, type, row) { switch (data) { case 1: return '<div id="circleRed"></div>' break; case 2: return '<div id="circleGreen"></div>' break; case 3: return '<div id="circleOrange"></div>' break; } } }, { data: 'TransactionId' }, { data: 'CreditCardNumber' }, { data: 'Supplier' }, { data: 'CreatedAt' }, { data: 'Amount' } ] });
What i need to add the columns option to make it happen? I try to read all the Datatables doc and google.