web-dev-qa-db-fra.com

jQuery Datatables aligner le centre 1 colonne

Voulez aligner juste la première colonne appelée "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' }
            ]
        });

Qu'est-ce que j'ai besoin d'ajouter l'option des colonnes pour y arriver? J'essaie de lire tous les documents Datatables et Google.

jqueryhtmlcssdatatables
15
Ballon Ura

Vous pouvez utiliser vos classes de thème (bootstrap) ou les vôtres dans columndef. comme 

text-right, text-left, text-center

 'columnDefs': [
  {
      "targets": 0, // your case first column
      "className": "text-center",
      "width": "4%"
 },
 {
      "targets": 2,
      "className": "text-right",
 }],
31
Ahmed Sunny

En outre, vous pouvez regrouper les colonnes pour appliquer un style à plusieurs comme ceci:

  columnDefs: [
    { className: 'text-right', targets: [7, 10, 11, 14, 16] },
    { className: 'text-center', targets: [5] },
  ], ...
1
aabiro

Vous pouvez styliser cela manuellement 

$("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>';
            }
        },
    ],
    ....
});
0
Wahid Masud

Vous pouvez également spécifier un nom de classe CSS unique dans chaque objet Colonne. 

Dans ton cas:

{ 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" }

0
Mario Tilli