CODEWITHSUNDEEP
jquerycsstwitter-bootstrapdatatables-1.10
KiRa
KiRa

Reputation: 924

How to center data table header and data using in bootstrap w/o using CSS?

I am starting to learn asp.net mvc4 and bootstrap so far I managed to create this Data table. I am using the current default CSS of the mvc4 the Site.css. W/o modifying the css how can I center the Header (Name) and the data (A B C D) of my datatable?. If it is not possible how to edit it in CSS?. I only have a basic knowledge in css

PICTURE

Here is my code of my JS

var globalPersonId = 1;
var dataTablesOrderedList = "";
$(document).ready(function () {

var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "asc"]],
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
    ajax: { "url": "/BS/GetFirstDataTable" },
    columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", sClass: "alignCenter", sortable: false },
        {
            data: "ActionMenu", title: "Sample Button", width: "100px", sAlign: "alignCenter", searchable: false, orderable: false, sClass: "alignCenter",
            "mRender": function (data) {
                return '<button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"><i class="glyphicon glyphicon-cutlery glyphicon-fw action"></i></button>';
            }
        }
    ]
});

//    MyFirstBS();
function MyFirstBS() {

    dataTablesOrderedList = $('#tblMyFirstBS').DataTable({
        responsive: true,
        processing: true,
        info: true,
        retrieve: true,
        destroy: true,
        search: true,
        stateSave: true,
        lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
        ajax: {
            "url": "/BS/GetFirstDataTable",
            "data": function (d) {
                d.BSId = globalPersonId;
            }
        },
        columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", searchable: false, sortable: false }
    ]
    });
   }
  });

Upvotes: 1

Views: 8132

Answers (1)

Patrik Affentranger
Patrik Affentranger

Reputation: 13465

Using CSS is the best/preferred way of styling HTML.

For horizontal text alignment, Bootstrap has some helper CSS classes:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Source: http://getbootstrap.com/css/#type-alignment

For table cell alignment you could make your own helper CSS classes and use those:

.text-top {
  vertical-align: top;
}
.text-middle {
  vertical-align: middle;
}
.text-bottom {
  vertical-align: bottom;
}

Alternatively you could add custom CSS classes to your datatable:

<table class="example-class"> ... </table>

And then use that to style your cells:

.example-class th {
  vertical-align: middle;
}
.example-class td {
  vertical-align: top;
}

Upvotes: 4

Related Questions