Not able to align the header to the left

manalimtapre

Well the following is my code with the links included. It works to align the tbody contents to the left. However the header is not getting aligned to the left for those columns.

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

The files I have included are as follows:-
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="css/dataTable.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="plugins/select2/select2.min.css" type="text/css">
<link rel="stylesheet" href="css/dtbl_search_pagination.css" type="text/css">

I have tried all possible solutions that I read on different forums but finally posting the issue here now. I have also tried the dt-head-left option which doesnt work.
I am using the version 1.10.19 of datatables. I have checked the css files but there is no mention of dt-head?

nin_bound

It seems dt-head doesn't work with bootstrap or foundation.

Anywho. I looked through some references and I found a way to apply a style to the headers.

Reference:
https://datatables.net/reference/api/columns().header()

        $(document).ready(function () {
            var options = {};

            options.columnDefs = [
                { className: 'text-right', targets: [1,2] }
            ];

            table = $('#example').DataTable(options);

            //table.columns([1, 2]).header().to$().addClass("text-left"); This will not work because the header already has css class text-right.
            table.columns([1, 2]).header().to$().css("text-align", "left");
            
        });

Although, I guess another way is removing the css class altogether.

table.columns([1, 2]).header().to$().removeClass("text-right").removeClass("text-center").addClass("text-left");